title: HowTo JavaScript ES modules dynamic import with rollup.js?
body: <p>I try to use <a href="https://developers.google.com/web/fundamentals/primers/modules#browser" rel="noreferrer">JS ES modules with a fallback bundle</a>, generated by rollup.js.</p>
  
  <p>Standard <code>import</code>s are no problem. But I have an issue with dynamic imports.</p>
  
  <p>I uploaded the full example of the setup here:
  <a href="https://www.file-upload.net/download-13588759/gulp-setup-example.zip.html" rel="noreferrer">https://www.file-upload.net/download-13588759/gulp-setup-example.zip.html</a></p>
  
  <p>Run:<br>
  1. <code>yarn install</code><br>
  2. <code>gulp test</code></p>
  
  <p>The setup of the <code>gulpfile.babel.js</code> is:</p>
  
  <pre class="lang-js prettyprint-override"><code>import buffer from 'vinyl-buffer';
  import gulp from 'gulp';
  import loadPlugins from 'gulp-load-plugins';
  import rollup from 'rollup-stream';
  import rollupPluginBabel from 'rollup-plugin-babel';
  import source from 'vinyl-source-stream';
  
  const $_ = loadPlugins();
  
  /*
   * JavaScript
   */
  function processJavaScriptMain() {
    return rollup({
      input: 'src/main.mjs',
      format: 'es',
      sourcemap: true,
      plugins: [
        rollupPluginBabel({
          exclude: 'node_modules/**',
        }),
      ],
    })
    .pipe(source('main.mjs', 'src')) // Bundle name
    .pipe(buffer())
    .pipe($_.sourcemaps.init({loadMaps: true}))
    //.pipe($_.terser())
    .pipe($_.rename('main.bundle.js'))
    .pipe($_.sourcemaps.write('.'))
    .pipe(gulp.dest('dist/'));
  }
  
  gulp.task('test', processJavaScriptMain);
  
  
  </code></pre>
  
  <p><code>.babelrc</code>:</p>
  
  <pre><code>{
    "presets": [
      [
        "@babel/env"
      ]
    ],
    "plugins": [
      "@babel/plugin-syntax-dynamic-import"
    ]
  }
  </code></pre>
  
  <p>And the file <code>main.js</code> is the entry point for the bundle and contains:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {demoUtil2} from './modules/utils.mjs';
  
  // Work
  console.log('demoUtil', demoUtil2());
  
  // 1. example: Doesn't work
  (async () =&gt; {
    const someCondition = true;
    if (someCondition) {
      const Demo = await import('./modules/Demo.mjs');
      new Demo();
    }
  })();
  
  // -----
  
  // 2. example: Doesn't work ether
  const someCondition  = true;
  if (someCondition ) {
    import('./modules/Demo.mjs').then(({ default: DefaultExport, NamedExport })=&gt; {
      console.log('hit');
    });
  }
  </code></pre>
  
  <p>The documentation from rollup.js says <a href="https://rollupjs.org/guide/en#dynamic-import" rel="noreferrer">that dynamic imports should be possible</a>.</p>
  
  <p>In the code from above the <em>1. example</em> result in the error:</p>
  
  <pre><code>Error: Unexpected token
      at error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:185:14)
      at Module.error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:8170:3)
      at tryParse (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7888:10)
      at new Module (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7924:15)
      at load.catch.then.then.then.source (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:9749:20)
      at &lt;anonymous&gt;
      at process._tickCallback (internal/process/next_tick.js:189:7)
  </code></pre>
  
  <p>The second example (like in the rollup.js docs) result in the error:</p>
  
  <pre><code>Error: 'import' and 'export' may only appear at the top level
      at error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:185:14)
      at Module.error (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:8170:3)
      at tryParse (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7888:10)
      at new Module (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:7924:15)
      at load.catch.then.then.then.source (C:\Users\user\Desktop\example\node_modules\rollup\dist\rollup.js:9749:20)
      at &lt;anonymous&gt;
      at process._tickCallback (internal/process/next_tick.js:189:7)
  </code></pre>
  
  <p>I expected, that the content of the dynamic imports is in some kind inline within the bundle or something like extracted into a different bundle.</p>
  
  <p>What do I do wrong?</p>