title: Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level
body: <p>In webpack release v2.1.0-beta.28 they added (I'm using 2.2.0-rc.1):</p>
  
  <blockquote>
    <p>add <code>import()</code> as Code Splitting construct. It should be used instead of
    <code>System.import</code> 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.</p>
  </blockquote>
  
  <p>So i converted:</p>
  
  <pre><code>require.ensure(['./hero/homepage'], () =&gt; {
    require('./hero/homepage')
  }, 'hero-homepage')
  </code></pre>
  
  <p>Into: </p>
  
  <pre><code>import('./hero/homepage')
    .then(module =&gt; module.default)
    .catch(err =&gt; console.error(`Chunk loading failed, ${err}`))
  </code></pre>
  
  <p>But get: <code>Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level</code></p>
  
  <p>Is there something i have to add to the webpack config to allow imports to be used where they suggest?</p>