babel-eslint 不允许动态导入

Question

I use webpack 2 and I want to make dynamic import. Linter gives the following error on dynamic import (that is import(...) ):

[js] Declaration or statement expected. (JSX attribute) import: true.

I have following .eslintrc (excerpt):

{
  "parser": "babel-eslint",
  "parserOptions": {
    "allowImportExportEverywhere": true
  }
}

Following is installed:

"eslint": "^3.16.1",
"babel-eslint": "^7.2.3",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",

babelrc configuration:

{
    "presets": [
    "es2015",
    "react"
    ],
    "plugins": ["syntax-dynamic-import", "dynamic-import-webpack"]
}

Update: Example where error occurs (react app). (Here the error is just [js] Declaration or statement expected ):

const App = () => {

    import('./routes/Main/Main').then((Main) => {});
    return(<div />);
};

Answer 1

I found the reason why this happens.

It seems VSCode has internal javascript linter that is enabled even if eslint plugin is linting. Disabling this internal linter solves the issue. So to solve, in project ( .vscode/settings.json ), user or global VSCode settings set the following:

{
     ...other settings...,
    "javascript.validate.enable": false
}

Answer 2

Adding the following to the .eslintrc.js file solved it for me:

  settings: {
    'import/resolver': {
      node: {
        paths: [path.resolve(__dirname, 'src')],
      },
    },
  },