Plugin Doesn't Work With babel-plugin-module-resolver

[machineghost]

I recently discovered that when you try to use this plug-in with another Babel plug-in, module-resolver, it breaks. That plug-in re-writes the paths of import statements, for instance transforming "~/src/foo" to "projectRoot/src/foo".

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 this plug-in somehow bypasses the module-resolver plug-in. While this may well be module-resolver's fault, it could also be this library's, so I figured I'd try submitting the issue here first.

Ultimately it would be nice if these two great plug-ins could work together. Thanks.

[ljharb]

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.

[machineghost]

Thanks. I tried creating https://github.com/tleunen/babel-plugin-module-resolver/issues/268 over there.

[tomatau]

edit: moved to https://github.com/airbnb/babel-plugin-dynamic-import-webpack/issues/42

[ljharb]

@tomatau your issue seems unrelated; could you file a new one instead and delete the comment here?

[tomatau]

Good point @ljharb I thought it was related at first but then realised my module resolver setup is only used in SSR! The issue I have is more specific to webpack with a custom resolve configuration and most likely unrelated to this setting.