CODEWITHSUNDEEP
webpack
Dan Gamble
Dan Gamble

Reputation: 4155

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

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?

Upvotes: 4

Views: 8290

Answers (1)

Dan Gamble
Dan Gamble

Reputation: 4155

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

Upvotes: 5

Related Questions