1 year ago
#364619
w.brian
How can I dynamically import from an NPM package referencing source files directly?
I have an NPM package that includes the original source for the bundled module (henceforth referred to as the Feature Package), which is made up of typescript and react code. I have another package that depends on the feature package and contains all the webpack configuration, build/dev server scripts, etc.
Because I need fine-grained control over how sources from the FeaturePackage are transpiled/bundled, I don't import the module in the "standard" way (in which the actual files are resolved via the package.json's main
/module
fields). I reference files within the package source directly in the dynamic imports:
const featurePackage = () => { return import(/*webpackChunkName: "FeaturePackage", webpackMode: "lazy" */ 'feature-package/src/FeatureModule').then(m => m.FeatureModule); };
By all accounts, webpack is resolving the sources/imports and running babel against them (I know this because if I don't have typescript/react presets configured, I get build errors pointing at files in the feature package). However, the resulting artifact says the module can't be resolved:
const featurePackage = () => {
return Promise.resolve().then(function webpackMissingModule() { var e = new Error("Cannot find module 'feature-package/src/FeatureModule'"); e.code = 'MODULE_NOT_FOUND'; throw e; }).then(m => m.FeatureModule);
};
So, webpack is able to resolve the files within the FeaturePackage at compile time, and I will get build errors for files in the FeaturePackage if webpack isn't configured correctly, but the resulting module never gets bundled. Is there a way to overcome this issue?
webpack
webpack-4
0 Answers
Your Answer