Hello I use laravel & Vue js i author project it working fine but this error?

Question

  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 :// webpack . js .org/concepts#loaders
  > <template>
  |     <div class="container">
  |         <div class="row justify-content-center">
   @ ./resources/js/Router.js 4:0-53 11:15-19
   @ ./resources/js/app.js
   @ multi ./resources/js/App.js ./resources/sass/app.scss

in APP require('./bootstrap');

window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import router from './Router'
 new Vue({
    el: '#app',
    router
});

in Router js

i importing the vue-router and vue

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

import User from './components/ExampleComponent.Vue'

Vue.use(VueRouter);

const router = new VueRouter({
    mode:'history',
    routes:[

        { path:'/user', component: User, } ,
        { path:'/categories', component: categories, } ,
    ]
})

You instantiated the Vue import on the window object. and then you are assigning the router to Vue. have you tried window.Vue.use()? I am not sure if that is the issue though. — Justin Duncan

Solar Solar · Accepted Answer · 2020-11-24T13:33:13

I ran into this error too. In my own case, I ran into this error because I wanted to use tailwind v2.0.

I think it have something to do with Laravel Mix v6.0 or POSTCSS 8. Because Vue SFCs doesn't work with PostCSS 8-only plugins yet. Taken from (https://github.com/JeffreyWay/laravel-mix/issues/2625).

So in my own case, the steps I took are listed below.

I uninstall the concerned packages npm uninstall tailwindcss postcss autoprefixer
Then I installed them back with compatibility build npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Check https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

I added "laravel-mix": "^5.0.1" to the package.json file to downgrade the laravel mix from v6.0 to v5.0.1.
Then npm install
Finally, npm run watch

Hello I use laravel & Vue js i author project it working fine but this error?

1 Answers