I can't use @module-federation/nextjs-mf with cypress on pipeline

378 Views Asked by At

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

enter image description here

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.

0

There are 0 best solutions below