dynamic imports failing?

[remy]

I'm new to rollup, but am trying to use dynamic imports and it seems the rollup compile process works up until I include the commonjs plugin.

I've made a repo here: https://github.com/remy/rollup-plugin-commonjs-issue - directions: npm i; npm start; - should throw the following error upon trying to parse the dynamic import:

❯ npm start

> roll-common@1.0.0 start /Users/remy/Sites/clones/roll-common
> rollup -c --f cjs

a.js → dist/index.js...
[!] (babel plugin) SyntaxError: /Users/remy/Sites/clones/roll-common/a.js: Unexpected token (1:10)
a.js (1:10)
SyntaxError: /Users/remy/Sites/clones/roll-common/a.js: Unexpected token (1:10)
    at error (/Users/remy/Sites/clones/roll-common/node_modules/rollup/dist/rollup.js:224:15)
    at Object.error (/Users/remy/Sites/clones/roll-common/node_modules/rollup/dist/rollup.js:17174:21)
    at /Users/remy/Sites/clones/roll-common/node_modules/rollup/dist/rollup.js:17183:29
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

The contents of a is simply:

const b = import('./b');

b.then(() => {
  console.log('done');
});

[surma]

I think this is due to this.

(You probably need the experimentalDynamicImport flag).

[remy]

@surma I'm using that in the rollup config. When I remove the commonjs plugin, the dynamic import works, but when it's included (so I can import cjs packages) the rollup errors.

[Rich-Harris]

Weighed in on Twitter already, but I cloned the repo and ran into a Babel issue (Unknown plugin "transform-runtime"). When I commented out the Babel plugin, it built successfully. Could any of your dependencies be out of date? (It doesn't look like they are, and there's even a lockfile in the repro, but I can't think what else could cause that...)

[lukastaegert]

Also worth noting that dynamic imports is still not an official JS feature. Maybe you need to tweak your babel config to make babel understand them.

[remy]

I've just updated the test repo to remove the transform-runtime thing. Not sure why or how that was in there (or how it was running locally for me), but without it, I get the same error:

[!] (babel plugin) SyntaxError: /Users/remy/Sites/clones/rollup-plugin-commonjs-issue/a.js: Unexpected token (1:10)

…though, now it's complaining from inside the babel plugin - but with the same error that came from the commonjs plugin.

[remy]

I just tried removing the babel plugin from my real project, but then it's complaining about the JSX in the project… again, I'm new to rollup, if there's a template for doing react with code splitting then that's all I'm really trying to achieve.

I think it's this: https://github.com/rollup/rollup-starter-code-splitting + react/jsx syntax.

[montogeek]

@remy Which plugin did you removed?

[remy]

@montogeek "transform-runtime" - but in fact I need this in the real project because it's transforming react and things like object spread etc. I just removed it from the test repo because it was failing to install and run.

[lukastaegert]

As I stated before, it is quite possible you need to teach babel to understand dynamic imports first before you can use them. This may be the plugin you need in your .babelrc: https://babeljs.io/docs/plugins/syntax-dynamic-import/

[remy]

Going to close. I suspect the problem isn't so much the commonjs plugin, but my pitiful attempt to get everything working using the exact right set of combinations and raindances!

Thanks all - @montogeek you're helping a tonne - thank you!