babel-eslint does not allow dynamic import

Viewed 6953

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 />);
};
2 Answers

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

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