Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'

Question

I\'m using the VueJS Webpack template found here: https://github.com/vuejs-templates/webpack

Example Route:

const AuthRoute = () => impor         


        

Answer 1

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

Answer 2

.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"
  }
}