I created a micro front end project using Next @module-federation/nextjs-mf
. When I run my project locally, I only receive "No ModuleFederationPlugin(s) found". However, my code works without a problem.
When I push my project, I receive an error on pipeline
Dependencies:
"dependencies": {
"start-server-and-test": "1.14.0",
"webpack": "5.75.0",
"@module-federation/nextjs-mf": "6.0.4",
"@auth0/nextjs-auth0": "1.9.2",
"@chamaeleonidae/chmln": "1.0.1",
"@d1.cx/components": "3.10.0",
"@d1.cx/icons": "1.16.0",
"@d1.cx/permissions": "1.14.0",
"@mailupinc/bee-plugin": "1.6.3",
"@testing-library/jest-dom": "5.11.9",
"@testing-library/react": "11.2.5",
"@testing-library/react-hooks": "5.0.3",
"@testing-library/user-event": "13.5.0",
"@types/express": "4.17.9",
"@types/node": "14.14.16",
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0",
"@types/react-redux": "7.1.14",
"@types/styled-components": "5.1.7",
"@types/uuid": "8.3.0",
"axios": "0.21.1",
"babel-jest": "26.6.3",
"babel-plugin-istanbul": "6.1.1",
"babel-plugin-styled-components": "1.12.0",
"bee-plugin": "1.3.0",
"chart.js": "3.7.0",
"cookie-parser": "1.4.5",
"cypress": "10.4.0",
"d1-tokens": "1.0.1",
"date-fns": "2.16.1",
"express": "4.17.1",
"firebase": "9.6.3",
"highcharts": "8.2.2",
"highcharts-react-official": "3.0.0",
"i18next": "21.10.0",
"i18next-browser-languagedetector": "6.1.8",
"jest": "26.6.3",
"jest-styled-components": "7.0.3",
"js-cookie": "2.2.1",
"jsplumbtoolkit": "file:./lib/jsplumbtoolkit.tgz",
"jsplumbtoolkit-drop": "file:./lib/jsplumbtoolkit-drop.tgz",
"jsplumbtoolkit-react": "file:./lib/jsplumbtoolkit-react.tgz",
"jsplumbtoolkit-react-drop": "file:./lib/jsplumbtoolkit-react-drop.tgz",
"jsplumbtoolkit-undo-redo": "file:./lib/jsplumbtoolkit-undo-redo.tgz",
"next": "12.1.0",
"react": "16.14.0",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "4.0.1",
"react-copy-to-clipboard": "5.0.2",
"react-dom": "16.14.0",
"react-gtm-module": "2.0.11",
"react-hook-form": "7.16.2",
"react-hotjar": "4.0.0",
"react-i18next": "11.18.6",
"react-input-mask": "2.0.4",
"react-redux": "7.2.2",
"react-tooltip": "4.2.21",
"redux": "4.0.5",
"redux-devtools-extension": "2.13.9",
"redux-saga": "1.1.3",
"reselect": "4.0.0",
"rxjs": "6.6.3",
"styled-components": "5.2.1",
"ts-node": "9.1.1",
"typesafe-actions": "5.1.0",
"typescript": "4.4.4",
"use-context-selector": "1.3.7",
"uuid": "8.3.2",
"zustand": "4.0.0-rc.1"
},
Next config:
const MICRO_FRONT_END = '/journey';
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack(config, options) {
const { isServer } = options;
function getEnv() {
const env = process.env.API;
if (env === 'production') {
return 'https://app.prod';
}
if (env === 'stage') {
return 'https://app.stg';
}
return 'https://app.dev';
}
config.plugins.push(
new NextFederationPlugin({
name: 'analysisMF',
remotes: {
menuSideMf: `menuSideMf@${getEnv()}/main-components/_next/static/${
isServer ? 'ssr' : 'chunks'
}/remoteEntry.js`,
},
filename: 'static/chunks/remoteEntry.js',
})
);
return config;
},
};
module.exports = {
...nextConfig,
basePath: process.env.LOCALHOST ? '' : MICRO_FRONT_END,
env: {
API: process.env.API,
LOCALHOST: process.env.LOCALHOST,
},
}
I tried removing ...nextConfig
on tests but nothing work because I need module federation to run other modules.