Closed konclave closed 1 year ago
I also did a deep dive into this problem. It seems that __webpack_require__.l
function gets removed with the production build.
This is __webpack_require__
in dev mode:
This is __webpack_require__
after the build:
Using ts-loader
with "default" TS and webpack config to build the Typescript code.
do you have any dynamic imports in the application? require.l is the chunk loading mechanics of webpack, if its not loading any chunks - it would remove require.l
You can try adding something like my AddRuntimeRequirementsToPromiseExternal plugin which inject loadScript as a requirement of webpack runtime (so its not shaken out)
@ScriptedAlchemy thanks! That worked. I've added a plugin based on yours to keep loadScript
in the runtime and it works perfectly.
Boom!
I'm still having this issue. I'm using importRemote
and I also tried to pull in AddRuntimeRequirementToPromiseExternal to my repo, but it's never entering the module.externalType === 'promise'
block when the plugin executes. Any advice?
@eraffel-MDSol I suggest removing that condition.
Here's the plugin I created just to keep loadScript
in the bundle:
class AddRuntimeRequirement {
apply(compiler) {
compiler.hooks.compilation.tap('AddRuntimeRequirement', (compilation) => {
const { RuntimeGlobals } = compiler.webpack;
compilation.hooks.additionalModuleRuntimeRequirements.tap('AddRuntimeRequirement', (module, set) => {
set.add(RuntimeGlobals.loadScript);
});
});
}
}
~@konclave Thanks, that worked, although now the issue I have is that it's trying to load the shared bundles from the host server rather than the same server as the remoteEntry.js
. Any thoughts?~
nvm
@eraffel-MDSol seems like that is not related to issue topic already.
I'm using
importRemote
from@module-federation/utilities
for dynamic load of the modules inside the web component:And it works in development environment, but when I build the code with
ts
compiler and webpack, it thenimportRemote
call fails with the error:t.l
iswebpackRequire.l
call, which is literally__webpack_require__.l
call.When I log the
__webpack_require__
object inside theimportRemote
call, I see that it has onlyI,S,c,g,m,o
methods, but notl
.webpack configs for dev and prod are the same except
devServer
,ESLintPlugin
andmode: develoment
in dev config. Seems like thisl
method is not provided in webpack runtime which was created after build. What did I miss in usingimportRemote
? Should I provide any additional details?