I have a problem using Zustand shared stores in my microfrontend project

Question

I have a problem when compiling my project, it is a microfrontend with Nx, Next.js, Module-federation and Zustand, which for some reason when I run my main site, it gives me the following message:

The error displayed by next.js

TypeError: Cannot read properties of undefined (reading 'call')
    at options.factory (http://localhost:3000/_next/static/chunks/webpack.js:1136:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js:270:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js:775:21)
    at eval (webpack-internal:///./pages/_app.tsx:5:79)
    at ./pages/_app.tsx (http://localhost:3000/_next/static/chunks/pages/_app.js:570:1)
    at options.factory (http://localhost:3000/_next/static/chunks/webpack.js:1136:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js:270:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js:775:21)
    at eval (webpack-internal:///../../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_app&page=%2F_app!:5:16)
    at eval (webpack-internal:///../../node_modules/next/dist/client/route-loader.js:218:51)

error image

I check the VsCode console and there is not much information.

portal-ncs-frontend on  main via  v22.11.0 
❯ npm run dev:all

> @portal-ncs-frontend/source@0.0.0 dev:all
> nx run-many --target=dev --parallel


 NX   Running target dev for 2 projects:

- management
- main

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

> nx run main:dev


> nx run management:dev

   ▲ Next.js 15.1.7
   ▲ Next.js 15.1.7
   - Local:        http://localhost:3000
   - Network:      http://172.25.128.1:3000
 ✓ Starting...
   - Local:        http://localhost:3001
   - Network:      http://172.25.128.1:3001
 ✓ Starting...
[ Module Federation Manifest Plugin ] Warn Manifest will use absolute path resolution via its host at runtime, reason: publicPath='auto'
[ Module Federation Manifest Plugin ] Warn Manifest will use absolute path resolution via its host at runtime, reason: publicPath='auto'
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json 
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json 
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
 ✓ Ready in 6.7s
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
 ○ Compiling / ...
 ✓ Ready in 7.8s
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
 ○ Compiling / ...
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
 ✓ Compiled / in 3.7s (621 modules)
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
 ✓ Compiled in 747ms (621 modules)
 GET / 200 in 4905ms
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
 ✓ Compiled / in 35.2s (679 modules)
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: /_next/mf-manifest.json
[ Module Federation Manifest Plugin ] Info Manifest Link: {auto}/static/chunks/mf-manifest.json
 ✓ Compiled in 591ms (679 modules)
forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?
 GET / 200 in 36686ms

vscode console image

The error displayed by browser console

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at options.factory (webpack.js:1136:31)
    at __webpack_require__ (webpack.js:270:33)
    at fn (webpack.js:775:21)
    at eval (_app.tsx:5:79)
    at ./pages/_app.tsx (_app.js:570:1)
    at options.factory (webpack.js:1136:31)
    at __webpack_require__ (webpack.js:270:33)
    at fn (webpack.js:775:21)
    at eval (next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_app&page=%2F_app!:5:16)
    at eval (route-loader.js:218:51)Understand this errorAI
webpack.js:1136 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at options.factory (webpack.js:1136:31)
    at __webpack_require__ (webpack.js:270:33)
    at __webpack_exec__ (_app.js:597:48)
    at _app.js:606:217
    at webpack.js:621:22Understand this errorAI

browser console error

Repository link attached

https://github.com/Kmazotz/microfrontends-nextjs

How to identify and correct the TypeError mentioned above?

Answer 1

try setting uniqueName in the webpack section of your two next.config.js files

   ...
   config.output.uniqueName = "management-app"; # "main-app" respectively
   return config;

uniqueName prevents that Webpack resolves name conflicts between multiple Next.js-Apps to the same fallback (being name in package.json).