4

In webpack release v2.1.0-beta.28 they added (I'm using 2.2.0-rc.1):

add import() as Code Splitting construct. It should be used instead of System.import when possible. System.import will be deprecated in webpack 2 release (removed in webpack 3) as it's behavior is incorrect according to the spec.

So i converted:

require.ensure(['./hero/homepage'], () => {
  require('./hero/homepage')
}, 'hero-homepage')

Into: 

import('./hero/homepage')
  .then(module => module.default)
  .catch(err => console.error(`Chunk loading failed, ${err}`))

But get: Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

Is there something i have to add to the webpack config to allow imports to be used where they suggest?

Dan Gamble
  • 3,965
  • 1
  • 24
  • 44

1 Answers1

5

As per:

https://twitter.com/addyosmani/status/811958786273333248 and https://twitter.com/usefulthink/status/811958593100587009

The answer is you'll need babel-plugin-dynamic-import-webpack

Dan Gamble
  • 3,965
  • 1
  • 24
  • 44
  • instead of converting import to require-ensure why not modify eslint rule a bit with babel-eslint. https://stackoverflow.com/questions/39158552/ignore-eslint-error-import-and-export-may-only-appear-at-the-top-level – chetan pawar Jul 06 '17 at 23:23