next@12.3.1 @module-federation/nextjs-mf@8.8.21 error

[Capricair]

"dependencies": {
  "@module-federation/nextjs-mf": "8.8.21",
  "@module-federation/runtime": "0.11.2",
  "axios": "1.7.7",
  "next": "12.3.1",
  "prop-types": "15.8.1",
  "react": "17.0.2",
  "react-dom": "17.0.2"
}

// next.config.js
const NextFederationPlugin = require("@module-federation/nextjs-mf");

module.exports = {
  reactStrictMode: true,
  poweredByHeader: false,
  webpack: (config, options) => {
    config.plugins.push(
      new NextFederationPlugin({
        name: "federation",
        filename: "static/chunks/remoteEntry.js",
        exposes: {
          "./test": "./components/test/index.js",
        },
        // remotes: remotes(options.isServer),
        // shared: {},
        // extraOptions: {
        //   exposePages: true,
        // },
      })
    );
    return config;
  },
};

npm run dev

webpack-internal:///node_modules/@module-federation/sdk/dist/index.cjs.js

npm run build

[Capricair]

@ScriptedAlchemy Hello, can you help me?

[ScriptedAlchemy]

Repo?

[Capricair]

Repo?

https://stackblitz.com/edit/stackblitz-starters-dbm25yxu?file=next.config.js

@ScriptedAlchemy Here is the code, I commented out the module federation plugin, remove comment and run npm run dev

[ScriptedAlchemy]

example does not run - provide a actual repo i can clone onto my computer

[Capricair]

example does not run - provide a actual repo i can clone onto my computer

@ScriptedAlchemy https://github.com/Capricair/next-ssr-mf/tree/master

[ScriptedAlchemy]

Much love, ill take a look - however next 12 is very old and may be that characteristics in the build are different vs in newer versions like next 14

[ScriptedAlchemy]

use "@module-federation/nextjs-mf": "8.6.0" - this version seems to work.

[Capricair]

Much love, ill take a look - however next 12 is very old and may be that characteristics in the build are different vs in newer versions like next 14

Next12 is realy old, but we have a big app still use next12, it is a very important app to us.

[ScriptedAlchemy]

8.6.0 is last working version. I'm not sure why it stops working beyond that but you can pin there for time being

[Capricair]

@ScriptedAlchemy Thank you very much!

[Capricair]

@ScriptedAlchemy Hello, I tried 8.6.0 and it didn't work. I want to fetch remoteEntry.js to get the component myself. I don't know what to do next, can you help me?

const url = `http://localhost:3010/_next/static/ssr/remoteEntry.js`;
const code = await axios.get(url, { responseType: "text" }).then((res) => res.data);
const script = new vm.Script(code);
const module = { exports: {} };
const context = vm.createContext({ module });
await script.runInContext(context);
await module.exports.remote.init();
const Test = await module.exports.remote.get("./test");
console.log(Test.toString());  // () => ((__webpack_require__(9798)))

[ScriptedAlchemy]

Try with the new version. We switched to esm by default now. So it may fix this

[Capricair]

@ScriptedAlchemy I tried the latest version 8.8.24 it throw error when building

PS E:\temp\next-ssr-mf> npm run build

> next-ssr-mf@1.0.0 build
> cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build

info  - Linting and checking validity of types
[ Module Federation Manifest Plugin ] Manifest will use absolute path resolution via its host at runtime, reason: publicPath='auto'
info  - Creating an optimized production build
warn  - Compiled with warnings

./node_modules/.federation/entry.bb58465517efebf1caac396b6c57f9b5.js
Attempted import error: 'E:/temp/next-ssr-mf/node_modules/@module-federation/webpack-bundler-runtime/dist/index.esm.js' does not contain a default export (imported as 'federation').

./node_modules/.federation/entry.bb58465517efebf1caac396b6c57f9b5.js
Attempted import error: 'E:/temp/next-ssr-mf/node_modules/@module-federation/webpack-bundler-runtime/dist/index.esm.js' does not contain a default export (imported as 'federation').

./node_modules/.federation/entry.dc341b61df4bda2c13fd1b347fc215b1.js
Attempted import error: 'E:/temp/next-ssr-mf/node_modules/@module-federation/webpack-bundler-runtime/dist/index.esm.js' does not contain a default export (imported as 'federation').

./node_modules/.federation/entry.dc341b61df4bda2c13fd1b347fc215b1.js
Attempted import error: 'E:/temp/next-ssr-mf/node_modules/@module-federation/webpack-bundler-runtime/dist/index.esm.js' does not contain a default export (imported as 'federation').

info  - Collecting page data ...Error: Cannot find module './constant.esm.js'
Require stack:
- E:\temp\next-ssr-mf\.next\server\webpack-runtime.js
- E:\temp\next-ssr-mf\.next\server\pages\_document.js
- E:\temp\next-ssr-mf\node_modules\next\dist\server\require.js
- E:\temp\next-ssr-mf\node_modules\next\dist\server\load-components.js
- E:\temp\next-ssr-mf\node_modules\next\dist\export\worker.js
- E:\temp\next-ssr-mf\node_modules\next\dist\build\worker.js
- E:\temp\next-ssr-mf\node_modules\next\dist\compiled\jest-worker\processChild.js
    at Function.<anonymous> (node:internal/modules/cjs/loader:1225:15)
    at mod._resolveFilename (E:\temp\next-ssr-mf\node_modules\next\dist\build\webpack\require-hook.js:27:32)
    at mod._resolveFilename (E:\temp\next-ssr-mf\node_modules\next\dist\build\webpack\require-hook.js:27:32)
    at Function._load (node:internal/modules/cjs/loader:1055:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (node:internal/modules/helpers:136:16)
    at 8446 (E:\temp\next-ssr-mf\.next\server\webpack-runtime.js:69:24)
    at __webpack_require__ (E:\temp\next-ssr-mf\.next\server\webpack-runtime.js:937:33) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\temp\\next-ssr-mf\\.next\\server\\webpack-runtime.js',
    'E:\\temp\\next-ssr-mf\\.next\\server\\pages\\_document.js',
    'E:\\temp\\next-ssr-mf\\node_modules\\next\\dist\\server\\require.js',
    'E:\\temp\\next-ssr-mf\\node_modules\\next\\dist\\server\\load-components.js',
    'E:\\temp\\next-ssr-mf\\node_modules\\next\\dist\\export\\worker.js',
    'E:\\temp\\next-ssr-mf\\node_modules\\next\\dist\\build\\worker.js',
    'E:\\temp\\next-ssr-mf\\node_modules\\next\\dist\\compiled\\jest-worker\\processChild.js'
  ]
}

> Build error occurred
Error: Failed to collect page data for /
    at E:\temp\next-ssr-mf\node_modules\next\dist\build\utils.js:916:15
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  type: 'Error'
}

[Capricair]

@ScriptedAlchemy Hello, is there any new progress? If it's too troublesome, can you tell me how to render the component after load remoteEntry.js server side?