Eslint-plugin-import: 'import()' hint: Parsing error: Unexpected token (Fatal) in atom

[zhengjunxiang]

I want to use import() in order to Lazy Loading my code;

import asyncComponent from './AsyncComponent';

const Home = asyncComponent(() => import('./Home'));
const About = asyncComponent(() => import('./About'));
const Topics = asyncComponent(() => import('./Topics'));

export {Home, About, Topics};

But atom tell me 'Parsing error: Unexpected token (Fatal)';

This is my configuration：

"eslint": "^2.5.3",
 "eslint-config-airbnb": "^6.1.0",
 "eslint-plugin-import": "^2.0.1",
 "eslint-plugin-jsx-a11y": "^2.2.3",
 "eslint-plugin-react": "^4.2.3", 

.eslintrc:

{
  'parser': 'babel-eslint',
  'extends': 'airbnb',
  "plugins": [
    'react'
  ],
  'parserOptions': {
    'sourceType': 'module'
  },
  "settings": {
    "import/extensions": [
      ".js", ".jsx"
    ],
    "import/ignore": [
      "./Home"
    ]
  },
  'rules': {
    'strict': 'off',
    'class-methods-use-this': 'off',
    'indent': ['error', 2, {'SwitchCase': 1}],
    'array-bracket-spacing': ['error', 'never'],
    'block-spacing': ['error', 'never'],
    'comma-dangle': ['error', 'never'],
    'computed-property-spacing': ['error', 'never'],
    'constructor-super': 'error',
    'func-names': 'off',
    'id-length': 'off',
    'quotes': ['warn', 'single' ],
    'jsx-quotes': ['error', 'prefer-double'],
    'linebreak-style': ['warn', 'unix'],
    'new-cap': ['error', {'newIsCap': true, 'capIsNew': false}],
    'no-case-declarations': 'error',
    'no-class-assign': 'error',
    'no-const-assign': 'error',
    'no-console': ['warn', {
      allow: ['info', 'warn', 'error']
    }],
    "no-restricted-imports": ["error", "./Home"],
    'no-empty-pattern': 'error',
    'no-dupe-class-members': 'error',
    'no-nested-ternary': 'off',
    'no-param-reassign': 'off',
    'no-this-before-super': 'error',
    'no-undefined': 'error',
    'no-unused-expressions': 'off',
    'no-useless-concat': 'error',
    'no-var': 'error',
    'object-curly-spacing': ['error', 'never'],
    'object-shorthand': 'warn',
    'prefer-arrow-callback': 'error',
    'prefer-reflect': 'warn',
    'prefer-spread': 'error',
    'prefer-template': 'warn',
    'require-yield': 'error',
    'semi': ['warn', 'always'],
    'spaced-comment': 'off',
    'space-before-function-paren': ['error', "never"],
    'keyword-spacing': ['warn', {'before': true, 'after': true}],
    'space-in-parens': ['error', 'never'],
    'vars-on-top': 'off',
    'max-len': ['warn', 150],
    'key-spacing': ['warn', {
      'beforeColon': false,
      'afterColon': true
    }],
    'react/jsx-closing-bracket-location': ['warn', 'props-aligned'],
    'react/jsx-curly-spacing': ['error', 'never'],
    'react/jsx-handler-names': ['warn', {
      'eventHandlerPrefix': 'handle|toggle'
    }],
    'react/jsx-indent-props': ['error', 2],
    'react/jsx-no-duplicate-props': 'error',
    'react/jsx-quotes': 'off',
    'react/jsx-no-bind': ['off'],
    'react/no-direct-mutation-state': 'error',
    'react/no-multi-comp': ['error', {'ignoreStateless': true}],
    'react/prefer-es6-class': 'warn',
    'react/prop-types': 'off',
    'react/sort-comp': 'off',
    'react/jsx-first-prop-new-line': 'off',
    'jsx-a11y/label-has-for': 'off',
    'jsx-a11y/no-static-element-interactions': 'off'
  }
}

[ljharb]

I'm not sure if eslint v2 works with babel-eslint still; i'd upgrade to v3 at least.

That said, babel can parse import() but you still need a separate plugin transform for it, like https://www.npmjs.com/package/babel-plugin-dynamic-import-node

[benmosher]

sounds like an issue with eslint proper, not this plugin. closing but feel free to comment back if you can provide evidence that this plugin specifically is responsible. nothing about your config looks like it shouldn't work.

[everdimension]

I have this exact problem when using dynamic imports: https://webpack.js.org/api/module-methods/#import-

The rule that is throwing the errors is import/no-named-as-default-member. Basically it seems that it fails to parse such syntax.

In the file where I use import(/* ... */) the linter highlights the line with the message:
Parsing error: Unexpected token (Fatal)

In other files where I import stuff from the mentioned file (like import foo from './path/to/file-with-dynamic-import';) the path is highlighted with the message

Parse errors in imported module './path/to/file-with-dynamic-import': Unexpected token import (23:12) (import/no-named-as-default-member)

The build works, so it doesn't seem like a problem with the code. Also turning the import/no-named-as-default-member rule off hides the errors.

[ljharb]

Are you using babel-eslint as your parser? The default eslint parser can't understand stage 3 proposals.

[everdimension]

No, I'm not. Thank you, with babel-eslint there's no error.

[shalithas]

Adding "parser": "babel-eslint" to .eslintrc fixed the issue for me. Thanks @ljharb!