Eslint-plugin-import: New rules to forbid webpack require.ensure() and System.import()

[tharakawj]

Webpack 2 is going to deprecate require.ensure() and System.import() in favor of import() for code splitting. import() syntax isn't specific to Webpack and it's currently an ES proposal at stage 3. So some projects might want to disallow usage of require.ensure() and System.import(), then they can easily switch to another module bundler or native implementation in the future. Currently, such requirement being discussed in the create-react-app project and there is an open issue facebookincubator/create-react-app#1524.

So I'm thinking about two new rules like no-webpack-require-ensure andno-webpack-system-import to support this. But I would like to know everyone's thoughts on this before sending a PR.

[ljharb]

eslint core already has no-restricted-properties, which can be set to block both of those. There's no need for a separate rule for it.

[sebastienbarre]

@tharakawj @ljharb Sorry to piggyback, but this seems related. I'm struggling trying to find which ESLint option would get rid of this error:

  7:36  error  Parsing error: Unexpected token import

the line is:

const Page1 = asyncComponent(() => import('./components/Page1')
  .then(module => module.default), { name: 'Page 1' });

Any hint would be appreciated.

[ljharb]

You need to enable parsing of import() as well as add a transform plugin for it; for eslint, you need babel-eslint - core can't handle it yet.

[sebastienbarre]

That did the trick, thanks for the lightning-fast answer.