module-federation-examples issue with makeSerializable

this is my package.json file

{
	"name": "remote-app",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 3001",
		"build": "next telemetry disable && cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build",
		"start": "next start -p 3001",
		"lint": "next lint"
	},
	"dependencies": {
		"@module-federation/nextjs-mf": "^8.1.7",
		"next": "13.5.6",
		"react": "18.2.0",
		"react-dom": "18.2.0",
		"webpack": "5.89.0"
	},
	"devDependencies": {
		"autoprefixer": "^10",
		"cross-env": "^7.0.3",
		"postcss": "^8",
		"tailwindcss": "^3"
	}
}

this is my next.config file

/** @type {import('next').NextConfig} */
// remote/next.config.js
const { NextFederationPlugin } = require("@module-federation/nextjs-mf");

const nextConfig = {
	reactStrictMode: true,
	webpack(config, { isServer }) {
		config.plugins.push(
			new NextFederationPlugin({
				name: "remote",
				filename: "static/chunks/remoteEntry.js",
				exposes: {
					// specify exposed pages and components
					"./Button": "./components/Button.js",
				},
				shared: {
					// specify shared dependencies
					// read more in Shared Dependencies section
				},
			})
		);

		return config;
	},
};

module.exports = nextConfig;

when im trying to run in dev or build im getting this error

Build error occurred
Error: Cannot find module 'F:\Work\Module-Federation\remote-app\node_modules\next\dist\compiled\lib\util\makeSerializable'        
Require stack:
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js    
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\enhanced\dist\src\index.js
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\nextjs-mf\dist\src\internal.js
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js   
- F:\Work\Module-Federation\remote-app\node_modules\@module-federation\nextjs-mf\dist\src\index.js
- F:\Work\Module-Federation\remote-app\next.config.js
   at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
   at F:\Work\Module-Federation\remote-app\node_modules\next\dist\server\require-hook.js:54:36
   at Module._load (node:internal/modules/cjs/loader:985:27)    
   at Module.require (node:internal/modules/cjs/loader:1235:19) 
   at mod.require (F:\Work\Module-Federation\remote-app\node_modules\next\dist\server\require-hook.js:64:28)
   at require (node:internal/modules/helpers:176:18)
   at Object.<anonymous> (F:\Work\Module-Federation\remote-app\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js:8:26)
   at Module._compile (node:internal/modules/cjs/loader:1376:14)
   at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
   at Module.load (node:internal/modules/cjs/loader:1207:32) {  
 code: 'MODULE_NOT_FOUND',
 requireStack: [
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\ContainerExposedDependency.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\ContainerEntryModule.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\enhanced\\dist\\src\\lib\\container\\HoistContainerReferencesPlugin.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\enhanced\\dist\\src\\wrapper\\HoistContainerReferencesPlugin.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\enhanced\\dist\\src\\index.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\internal.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\plugins\\NextFederationPlugin\\next-fragments.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-fedle-federation\\nextjs-mf\\dist\\src\\plugins\\NextFederationPlugin\\index.js',
   'F:\\Work\\Module-Federation\\remote-app\\node_modules\\@module-federation\\nextjs-mf\\dist\\src\\index.js',
   'F:\\Work\\Module-Federation\\remote-app\\next.config.js'
 ]
}

Jan 31 '24 05:01 sumantrpdev

@ScriptedAlchemy please help me

Jan 31 '24 06:01 sumantrpdev

I am also facing the same issue after upgrading nextjs-mf , next js to the latest version.

Cannot find module 'C:\Users\Documents\MFE-nextjs\header\node_modules\next\dist\compiled\lib\util\makeSerializable' Require stack:

C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\enhanced\dist\src\index.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\nextjs-mf\dist\src\internal.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js
C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\nextjs-mf\dist\src\index.js
C:\Users\Documents\MFE-nextjs\header\next.config.js at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15) at C:\Users\Documents\MFE-nextjs\header\node_modules\next\dist\server\require-hook.js:55:36 at Module._load (node:internal/modules/cjs/loader:922:27) at Module.require (node:internal/modules/cjs/loader:1143:19) at mod.require (C:\Users\Documents\MFE-nextjs\header\node_modules\next\dist\server\require-hook.js:65:28) at require (node:internal/modules/cjs/helpers:110:18) at Object. (C:\Users\Documents\MFE-nextjs\header\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js:8:26) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js', 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js',
'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js', 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js', 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\enhanced\dist\src\index.js', 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\nextjs-mf\dist\src\internal.js', 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js', 'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js',
'C:\Users\Documents\MFE-nextjs\header\node_modules\@module-federation\nextjs-mf\dist\src\index.js', 'C:\Users\Documents\MFE-nextjs\header\next.config.js' ] }

package.json

{ "name": "header", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev -p 3001", "build": "next build", "start": "next start -p 3001", "lint": "next lint" }, "dependencies": { "@module-federation/nextjs-mf": "^8.1.8", "@module-federation/utilities": "^3.0.5", "@types/node": "20.11.10", "@types/react-dom": "18.2.18", "eslint": "^8.56.0", "eslint-config-next": "^14.1.0", "next": "^14.1.0", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.3.3" }, "devDependencies": { "webpack": "^5.76.2", "@types/react": "18.2.48" } }

Please help on this issue @ScriptedAlchemy

Feb 04 '24 18:02 sathishkumar555

There’s a pr open. It’s a issue with path and windows

Feb 05 '24 19:02 ScriptedAlchemy

There’s a pr open. It’s a issue with path and windows

Iam facing this issue on the new version too lol , i made a .env file but still it drops the : "

Error: Cannot find module

'C:\Users\userrName\Desktop\projects\nextjsssr\checkout\node_modules\next\dist\compiled\lib\util\makeSerializable'

Feb 15 '24 18:02 ilyasTraikia

There’s a pr open. It’s a issue with path and windows

Are there any workarounds?

Feb 15 '24 21:02 jynzo94

@jynzo94 i couldn't find any. That's why had to use react instead of Next. Please let me know if you find any.

Feb 16 '24 04:02 sumantrpdev

@jynzo94 i couldn't find any. That's why had to use react instead of Next. Please let me know if you find any.

@suman7rocky I actually found the solution. I'm using windows.

"scripts": { "dev": "dotenv -e .env next dev", }, "dependencies": { "@module-federation/nextjs-mf": "^8.0.5", "@stitches/react": "^1.2.8", "dotenv": "^16.4.4", "next": "^13.0.7", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "eslint": "8.56.0", "eslint-config-next": "13.5.6", "webpack": "5.89.0", "webpack-cli": "5.1.4", "webpack-dev-server": "4.15.1" } I also created .env file in root dir that contains NEXT_PRIVATE_LOCAL_WEBPACK=true .

Now it should work

Feb 16 '24 07:02 jynzo94

@jynzo94 i couldn't find any. That's why had to use react instead of Next. Please let me know if you find any.

@suman7rocky I actually found the solution. I'm using windows.

"scripts": { "dev": "dotenv -e .env next dev", }, "dependencies": { "@module-federation/nextjs-mf": "^8.0.5", "@stitches/react": "^1.2.8", "dotenv": "^16.4.4", "next": "^13.0.7", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "eslint": "8.56.0", "eslint-config-next": "13.5.6", "webpack": "5.89.0", "webpack-cli": "5.1.4", "webpack-dev-server": "4.15.1" } I also created .env file in root dir that contains NEXT_PRIVATE_LOCAL_WEBPACK=true .

Now it should work

it works on next 13.0.7 but not on 14.1.0 and 13.5.6 in my case. but still ,on 13.0.7, now i got "The loadShareSync function was unable to load react. The react could not be found in main." error. do you have that error too?

Feb 16 '24 08:02 IanIqbal

Same errors with next v14

Mar 04 '24 14:03 OscarJVD

https://github.com/module-federation/universe/issues/1530

You need to set the env vars or whatever makes this go true: https://github.com/vercel/next.js/blob/473ef817a77c1103e034cb3dcb1c8b10c1bc9e9d/packages/next/src/compiled/webpack/webpack.js#L6

This is how vercel does is:

"name": "bench-nested-deps",

3 | "scripts": { 4 | "prepare-bench": "rimraf components && fuzzponent -d 2 -s 206 -o components", 5 | "dev-application": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=1 next dev", 6 | "build-application": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=1 next build", 7 | "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=1 next start", 8 | "dev-nocache": "rimraf .next && pnpm dev-application",

https://github.com/vercel/next.js/blob/473ef817a77c1103e034cb3dcb1c8b10c1bc9e9d/bench/nested-deps/package.json#L5

If the error says ir includes \next\dist\compiled\lib then the env var is not set / not set in time.

You cant use nexts bundled copy of webpack, we need to use the normal webpack instance.

Mar 05 '24 06:03 ScriptedAlchemy

For webpack 5 the env var should be NEXT_PRIVATE_LOCAL_WEBPACK5

May 03 '24 06:05 karishma-mhatre

There is nowhere in nextjs source that I see webpack5 variable. It's just the one I specified in the issue. Can you link to the source in next that references this env variable?

May 04 '24 08:05 ScriptedAlchemy

`

Build error occurred Error: Cannot find module 'D:\infoviz\Front-desk\node_modules\next\dist\compiled\lib\util\makeSerializable' Require stack:

D:\infoviz\Front-desk\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js
D:\infoviz\Front-desk\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js
D:\infoviz\Front-desk\node_modules@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js
D:\infoviz\Front-desk\node_modules@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js
D:\infoviz\Front-desk\node_modules@module-federation\enhanced\dist\src\index.js
D:\infoviz\Front-desk\node_modules@module-federation\nextjs-mf\dist\src\internal.js
D:\infoviz\Front-desk\node_modules@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js
D:\infoviz\Front-desk\node_modules@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js
D:\infoviz\Front-desk\node_modules@module-federation\nextjs-mf\dist\src\index.js
D:\infoviz\Front-desk\next.config.js at Module._resolveFilename (node:internal/modules/cjs/loader:1143:15) at D:\infoviz\Front-desk\node_modules\next\dist\server\require-hook.js:55:36 at Module._load (node:internal/modules/cjs/loader:984:27) at Module.require (node:internal/modules/cjs/loader:1231:19) at mod.require (D:\infoviz\Front-desk\node_modules\next\dist\server\require-hook.js:65:28) at require (node:internal/modules/helpers:179:18) at Object. (D:\infoviz\Front-desk\node_modules@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js:8:26) at Module._compile (node:internal/modules/cjs/loader:1369:14) at Module._extensions..js (node:internal/modules/cjs/loader:1427:10) at Module.load (node:internal/modules/cjs/loader:1206:32) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\infoviz\Front-desk\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerExposedDependency.js', 'D:\infoviz\Front-desk\node_modules\@module-federation\enhanced\dist\src\lib\container\ContainerEntryModule.js',
'D:\infoviz\Front-desk\node_modules\@module-federation\enhanced\dist\src\lib\container\HoistContainerReferencesPlugin.js', 'D:\infoviz\Front-desk\node_modules\@module-federation\enhanced\dist\src\wrapper\HoistContainerReferencesPlugin.js',
'D:\infoviz\Front-desk\node_modules\@module-federation\enhanced\dist\src\index.js', 'D:\infoviz\Front-desk\node_modules\@module-federation\nextjs-mf\dist\src\internal.js', 'D:\infoviz\Front-desk\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\next-fragments.js', 'D:\infoviz\Front-desk\node_modules\@module-federation\nextjs-mf\dist\src\plugins\NextFederationPlugin\index.js',
'D:\infoviz\Front-desk\node_modules\@module-federation\nextjs-mf\dist\src\index.js', 'D:\infoviz\Front-desk\next.config.js' ] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

please help me to solve this issue

Jun 13 '24 12:06 manoranjaninfoviz