Doesn't Work With Dynamic Import Plug-In

[machineghost]

I recently discovered that when you try to use this plug-in with https://github.com/airbnb/babel-plugin-dynamic-import-webpack (which enables the import operator/import(somePath) syntax), it doesn't work. For instance:

 // a.js
 export const foo = 1;

 // b.js
 import {foo} from '~/a';

 // c.js
 import('./b');

results in:

ERROR in ./c.js Module not found: Error: Can't resolve '~/a' in ...

Presumably this is happening because when c imports b the dynamic import plug-in somehow bypasses this plug-in. Since I wasn't sure which library was responsible I tried submitting a ticket to the dynamic import plugin first (https://github.com/airbnb/babel-plugin-dynamic-import-webpack/issues/40) and got:

Transform orderings are tricky; since this plugin changes to require, the proper fix is probably for module-resolver to be able to transform both ESM and CJS import paths.

It would be great if there's any way to do the above, or otherwise make these two plug-ins work together somehow.

[tleunen]

@machineghost Are you saying dynamic-import-webpack would replace the import statement in b.js with require('~/a')?

Because if this is the case, module-resolve also supports reading CJS.

Not sure why module-resolver wouldn't replace the path in your case if the code still has a require or import statement.

Could you see what the output of the file is after the first transformation?

[loganfsmyth]

That module injects calls to Webpack's require.ensure, https://github.com/airbnb/babel-plugin-dynamic-import-webpack/blob/master/test/fixtures/basic-import/expected.js#L2, so maybe it is support for that that should be considered? Otherwise yeah this seems like an ordering issue.

[ljharb]

Ah yes, that’s true - does this plugin support require.ensure as well?

[tleunen]

I don't see a direct issue with dynamic-import-webpack (see #278). And we support transforming path in require as well. But it seems the new require statement is not even read by the plugin.