I recently set up eslint in my Laravel project, which uses VueJS and Vue-Router on the front-end. However, I encountered an issue when I added the mix.webpackConfig block to the webpack.mix.js file. The problem arose with the ES2015 import() function that I use to asynchronously load Vue components.
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
})
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
If I remove the mix.webpackConfig() block, everything works as expected. It's puzzling why adding eslint-loader would cause babel to break in this case.
This is the specific file where I utilize the import() function. While someone else faced a similar issue due to a filename typo, I have confirmed that my filenames are accurate.
import Vue from 'vue'
import Router from 'vue-router'
import App from './views/App.vue'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
meta: { layout: 'no-sidebar-no-container' },
component: Home
},
{
path: '/login',
name: 'login',
meta: { layout: 'no-sidebar' },
component: () => import('./views/Login.vue')
},
{
path: '/admin',
name: 'admin',
meta: { layout: 'no-sidebar' },
component: () => import('./views/Admin.vue')
},
{
path: '/events',
name: 'events',
meta: { layout: 'no-sidebar' },
component: () => import('./views/Events.vue')
},
{
path: '/course/:courseId',
name: 'course',
component: () => import('./views/Course.vue')
},
{
path: '/edit/course/:courseId',
name: 'edit-course',
meta: { layout: 'no-sidebar' },
component: () => import('./views/Admin/EditCourse.vue')
},
{
path: '/edit/course/newcourse',
name: 'edit-newcourse',
meta: { layout: 'no-sidebar' },
component: () => import('./views/Admin/EditCourse.vue')
},
{
path: '/edit/eventspage',
name: 'edit-eventspage',
meta: { layout: 'no-sidebar' },
component: () => import('./views/Admin/EditEventsPage.vue')
}
]
})