issue with makeSerializable about module-federation-examples HOT 10 OPEN

@ScriptedAlchemy please help me

from module-federation-examples.

@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

from module-federation-examples.

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

from module-federation-examples.

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

from module-federation-examples.

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'

from module-federation-examples.

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

Are there any workarounds?

from module-federation-examples.

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

from module-federation-examples.

@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?

from module-federation-examples.

Same errors with next v14

from module-federation-examples.

module-federation/universe#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.

from module-federation-examples.