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 bundlesmix.config.webpackConfig.output = { chunkFilename: 'js/[name].bundle.js', publicPath: '/',};// alias the ~/resources foldermix.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