Babel-eslint: Dynamic import shown as error

[croraf]

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

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

[kentcdodds]

Hi @croraf,
Thanks for the thorough report. Could you create a small repository that reproduces this issue? It'll help us all determine what's going on :)

[croraf]

https://github.com/croraf/myboiler
myboiler/src/App.js
Check line 18.
The project now does not compile, but does not matter for the error. Ask if any questions.

[kentcdodds]

Thanks for that. I'm still not 100% sure I know what the issue is. It's more helpful if you create a small, isolated example. Something like what stack overflow encourages would be best, an MCVE.

[croraf]

Hmm. Not really sure how to do that, as you must have node and npm installed, and you should install eslint and other packages on your pc to get the minimal example. Is it possible you clone the above project, and just run npm install in the top leved directory (if you have node). OK, I also use VSCode IDE wih eslint plugin to have realtime linting. But you can also run eslint command on that file. This should give you the reported error on line 18.

This is a bit bigger than minimal working example. But you can ignore everthing except that line 18 in App.js file.

[kentcdodds]

Understood @croraf. I'm afraid that I don't have a whole ton of time to dig deeper into this. If you could provide more context and do some more digging into this that would be helpful. Sorry.

[croraf]

I uploaded much reduced version. But you still have to clone and run npm install, to install eslint.
But in principle the error is on App.js file line 18, import().

[croraf]

Strange thing. My IDE that uses eslint for linting is underlining import, but when I run eslint from cmd it doesnt show import(...) as an error.

[croraf]

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
}

[jdgarcia1381]

You can check a possible solution on this issue:
https://github.com/babel/babel-loader/issues/493#issuecomment-452380751