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

Daniel Brown picture Daniel Brown · Dec 14, 2017 · Viewed 11.7k times · Source

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!

Answer

Daniel Brown picture Daniel Brown · Dec 15, 2017

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