Getting the following error “You may need an appropriate loader to handle this file type, e.” after running the “npm run watch”

Geek’s Need little help, any suggestion or hint will be highly appreciated.
The thing is I’m trying to install Vue on Laravel. But after installing the Vue router I decided to compile everything using “npm run watch” but I’m getting the following error on the console:
Note* Before running the “npm run watch” command the Vue was detected by the browser (“Vue Dev Tool”) but now it’s unable to detect that, I don’t know where I made the mistake :(.

ERROR in ./resources/js/components/ExampleComponent.Vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div class="container">
|         <div class="row justify-content-center">

webpack compiled with 1 error

APP.js Code
require('./bootstrap');

import router from "./routes";
import VueRouter  from "vue-router";
import Vue from "vue";

window.Vue = require('vue').default;

Vue.component(
        'example-component', 
        require('./components/ExampleComponent.vue').default);
Vue.use(VueRouter);

const app = new Vue({
    el: '#app',
    router,
});

Routes.js code
import ExampleComponent from "./components/ExampleComponent.Vue";
import VueRouter  from "vue-router";

const routes = [
    {
        path : "/",
        component:ExampleComponent,
        name:"home",
        
    }
];

const router = new VueRouter({
    routes // short for `routes: routes`
  });

  export default router;

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I solved just by editingwebpack.mix.js

from

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

to
mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css');

then do
npm update
npm run dev


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x