Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'
.eslintrc.js
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
allowImportExportEverywhere: true
}
Should Be:
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module',
allowImportExportEverywhere: true
}
Source: https://eslint.org/docs/user-guide/configuring#specifying-parser
With (@vue/cli) .eslintrc.json
{
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 8,
"sourceType": "module"
}
}
This StackOverflow question and answer did help me solve this issue, but currently in April 2020, the parser
key seems to be required inside parserOptions
, or at least for my combination of settings.
I will show my current day config that I use with Laravel 7/Laravel Mix and Vue 2.6~.
.eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"airbnb-base",
"plugin:vue/essential"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2019,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
// dat ruleset
},
"settings": {
"import/resolver": {
"alias": {
"map": [
["@", "./resources"]
],
"extensions": [".vue"]
}
}
}
}
You'll only need that
settings
key if you are using Webpack aliases.
package.json
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"laravel-mix": "^5.0.1",
}
.babelrc
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
webpack.config.js
If you are using Webpack "normally" without Laravel Mix, you will find your syntax is a little different here, but if you are using Webpack aliases, you will find this useful:
// use named JS bundles
mix.config.webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/',
};
// alias the ~/resources folder
mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': `${__dirname}/resources`,
},
},
});
Final note: I always recommend usage of airbnb-base
config and to rely on it to form the basis of your lint rules because it was created for multi-developer environments running die hard Functional Programming techniques for immutable, unidirectional data flow--and thus, Functional Reactive Programming while avoiding the pitfalls of JavaScript... and to focus on declarative code while avoiding reasonably bad kinds of imperative code.
I wrote a couple more words about that in my article about setting up ES Lint in Vue for Airbnb: https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8