webpack: Uncaught TypeError: Cannot read properties of undefined (reading 'call')
Bug report
What is the current behavior? Can’t have same package.json name on host and remote. Getting error at some point using module federation, guessing when splitChunks kicks in.
If the current behavior is a bug, please provide the steps to reproduce. Set host’s and remote’s name in package.json to same value. Try to load a remote page large enough to trigger splitting chunks (again guessing).
What is the expected behavior? Should not result in error, or, provides a better error message
Other relevant information:
-
Similar experience as @ydmitry in issue 12964 where there is a point that adding a single line of code to a React component’s render method results in the error, and removing the line clears the error. Line was a simple MUI <Typography> which already appears multiple times in the component.
-
Same as @ydmitry setting splitChunks = false on remote resolved the error
-
Ran across another report of the error https://discourse.aurelia.io/t/aurelia-1-and-webpack-module-federation-plugin-different-package-json-names/4398 which suggested the error occurred when the package.json names were different and setting them to the same name resolved the error.
-
On checking my package names, found they were the same. Removed splitChunks = false, verified error was present again, changed package names to be different, and error was gone.
I’m fine for now. Hope this helps someone else struggling with this error.
webpack version:
Node.js version:
Operating System:
Additional tools:
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 5
- Comments: 36 (7 by maintainers)
Just to give some context – I’m currently developing a proof of concept related to microfrontends utilising webpack module federation. I’m also using NX (https://nx.dev/) to handle the different microfrontends. NX has this notion of only having a single
package.json(root) instead of having apackage.jsonper individual microfrontend/app.Solution
Now, webpack assumes that you have defined a “unique”
nameinside yourpackage.jsonfile per microfrontend in order for it to work. Since I’m using NX, the solution I encountered is to modify theuniqueNameattribute in webpack config so it doesn’t rely on thenameattribute frompackage.json.Source: https://webpack.js.org/configuration/
After I’ve added
uniqueNameper webpack config (one for each microfrontend/app) then it worked as expected and this error went away.I’m also getting the same issue. It seems that the host/container is getting confused between
installedModulesand__webpack_modules__webpack_modules
webpack/container/reference/marketing
installedModules
webpack/container/remote/marketing/MarketingApp
So now when the code reaches
__webpack_modules__[moduleId]it returns undefined becausemoduleIdiswebpack/container/remote/marketing/MarketingAppcoming frominstalledModulesMy host configuration looks
My App.tsx looks:
Which returns an error
I got the same error as @BarrMan, tried everything aforementioned, but nothing solved the issue. Does anyone know how to fix this??
Excelent @jponc , I dont use NX, but effectively my diferent packages.json did not have the name property set. Adding it to all packages.json fixed it. Thanks
Was having this issue and tried the fixes above. Nothing worked. My issue was that I had multiple project named “ClientApp” and they all had the same project name in the angular.json file. Changing the name of the project in the angular.json file to unique one solved it for me.
(“@angular-architects/module-federation”: “^14.3.10”)
Hey all this seems to work for me.
https://stackoverflow.com/a/72746448
The problem is about asynchronous load of the app
I have exactly the same issue. please help.
I have exactly the same issue. please help.