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