Laravel 5.6 - Async / Lazy load vue components with laravel-mix and webpack - laravel

Question

Laravel 5.6.21
NPM 6.1.0
Node 10.5.0
Webpack 3.12.0
My question is how to properly configure laravel-mix, webpack and babel to successfully lazy-load vue components using the method described here: Lazying Loading Routes
More specifically, using stage-2 (es2018 ?) syntax as follows:
const Foo = () => import('./Foo.vue')
When trying to compile using laravel-mix all statements resembling the above syntax generate an error (example):
Syntax Error: Unexpected token (1:24)
1 | const Dashboard = () => import("Pages/Account/Dashboard.vue");
| ^
I believe laravel-mix uses Babel to transpile and read that Babel needs 'syntax-dynamic-import' so I created a .bablerc file with the following contents:
{
"plugins": [
"syntax-dynamic-import"
]
}
Since the bable config file didn't resolve the issue, I also tried an eslint configuration file with the following contents:
module.exports = {
plugins: ["vue"], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions: {
"parser": "babel-eslint",
"ecmaVersion": 7, //also tried 8
"sourceType": "module",
"ecmaFeatures": {
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
}
}
};
Finally, a copy of the dependencies in package.json are:
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-imports": "^1.5.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-vue": "^4.5.0",
"expect": "^22.0.3",
"jsdom": "^11.5.1",
"jsdom-global": "^3.0.2",
"laravel-mix": "^2.1.14",
"less": "^3.5.3",
"less-loader": "^4.1.0",
"mocha": "^4.0.1",
"mocha-webpack": "^1.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-loader": "^13.7.2",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.13",
"vue-test-utils": "^1.0.0-beta.8",
"webpack": "^3.12.0",
"webpack-auto-inject-version": "^1.1.0"
},
Any help regarding resolving this would be greatly appreciated.

Answer 1

I have been using with following in .eslintrc.json.
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"plugins": [
"vue"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
Also check your dynamic import function's path const Dashboard = () => import("Pages/Account/Dashboard.vue");. I thinks it should be a relative path something like const Dashboard = () => import("./Pages/Account/Dashboard.vue");

Answer 2

The problem is in the scss splitting in Vue and using mix.scss() both. Laravel mix when having both creates a css file with manifest js file content in it. which is definitely a bug. which the community mentions a bug from Webpack and will be resolved in webpack 5. But If you use only code splitting in Vue and have the default app.scss file imported to main Vue component like this(not in scope), so each other component will get the styling properly
// resources/js/components/app.vue
<template>
<!-- Main Vue Component -->
</template>
<script>
// Main Script
</script>
<style lang="scss">
#import '~#/sass/app.scss';
</style>
and the webpack.mix.js file will have no mix.scss function to run only a single app.js file. here is my file.
// webpack.mix.js
const mix = require('laravel-mix')
mix.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'] // important to install -D
})
mix.config.webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/'
}
mix
.js('resources/js/app.js', 'public/js')
.extract(['vue'])
.webpackConfig({
resolve: {
alias: {
'#': path.resolve('resources/') // just to use relative path properly
}
}
})
here is the package.json file (only including required dev dependencies)
{
"#babel/core": "^7.8.7",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.8.7",
"laravel-mix": "^4.1.4",
}
hope this resolves the issue