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 = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue')

Example Error:

[eslint] Parsing error: Unexpected token import

I've followed the steps provided in Webpack's Dynamic import section, as well as Anthony Gore's blog post on how to accomplish code splitting with VueJS at the router level. More specifically, here is my setup:

Package.json

...
"babel-core": "^6.22.1",
"babel-eslint": "^8.0.3",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-webpack": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.13.1"
...

.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": [
    "dynamic-import-webpack",
    "syntax-dynamic-import",
    "transform-runtime"
  ],
  "env": {
    "test": {
      "presets": ["env", "stage-2"]    }
  }
}

.eslintrc.js

parserOptions: {
  parser: 'babel-eslint',
  sourceType: 'module',
  allowImportExportEverywhere: true
}

I'm at a bit of a loss as to why I'm still seeing this error. My code runs and works as expected when using npm run dev and npm run build, but this parsing error prevents the rest of the file from being linted, and I am unable to suppress it.

Any/all help is appreciated!

Solution 1

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

Solution 2

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

Comments

[Barabas]

ESlint extension was installed in VS Code - hence it was installed globally. Therefore, the package babel-eslint needs installing globally npm install babel-eslint -g. In my case the row "parser": "vue-eslint-parser" was not required.

[Wayne Mao]

no idea why you said 'parser' is inside 'parserOptions'... it is always a sibling attribute as 'parserOptions'

[Clifford Fajardo]

Adding `parser: 'babel-eslint', solved my issue