Lot's of Warnings when using Webpack Module Federation

[marc-polizzi]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

In our project, we're using Webpack Module Federation with the following share:

    new ModuleFederationPlugin({

        shared: {
            ...deps,

            "@mui/private-theming": {singleton: true},
            "@mui/material/styles": {singleton: true},
            "@mui/styles": {singleton: true},

            "react": {singleton: true},
            "react-dom": {singleton: true},

When building our project we've a lot of warnings like the following:

WARNING in shared module @mui/material/styles
No required version specified and unable to automatically determine one. Unable to find required version for "@mui/material" in description file (/home/mpo/icCube/gh/icCubeReportingMF/ic3-reporting/node_modules/@mui/lab/CalendarPicker/package.json). It need to be in dependencies, devDependencies or peerDependencies.

It seems the CalendarPicker/package.json file is missing the following:

  "peerDependencies": {
    "@mui/material": "^5.0.0"
  }

With this peerDependencies the warning disappear. There's a lot as well with 'react' dependency missing..

Does anybody experience the same issue? Am I missing something with my setup?

If not would it be possible to update the package.json in the MUI project?

Let me know if you need more info.

Expected behavior 🤔

No such warnings.

Steps to reproduce 🕹

Steps:

1. Build a project with Webpack Module Federation as shown in the description of this issue.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[mnajdova]

Would be best if you can share a repository with the minimum setup that fails.

[marc-polizzi]

Here a small Git repository with an IntelliJ project ready to go; you can check the README.md for some details.

https://github.com/marc-polizzi/wmf

Let me know if this is fine.

[marc-polizzi]

@mnajdova the status is still incomplete? is anything wrong w/ the provide project?

[mnajdova]

I didn't have a chance to look into the repository, but you are correct, I am removing the status: incomplete label.

[mnajdova]

@marc-polizzi do you have some updates on this? I am sorry, I don't think I will have much time to look into it, but we can wait and see if someone from the community would have some comments.

BTW, the @mui/lab already has the @mui/material in it's peer dependencies. See https://github.com/mui-org/material-ui/blob/master/packages/mui-lab/package.json#L44

Should you maybe declare the @mui/material as a singleton too?

[marc-polizzi]

@mnajdova still several warnings w/ latest (5.2.3)... we've done a small script to add "missing" dependencies for all files triggering a warning in our node_modules/

[mnajdova]

Just checking up, @marc-polizzi are there some actions we could do on our side to improve this? Has there been some problems with how we define peer dependencies?

[marc-polizzi]

@mnajdova nothing new since the reporting of that issue and my latest comment. still running a script to remove those warnings.

[atakangktepe]

We are currently using MUI version 5.7.0 and have encountered the same issue. Wondering if there have been any updates or planned fixes in the MUI 5.* series?

[bobbydams]

This script solved the problem for me. I run it just after npm ci.

const fs = require('fs');
const path = require('path');

// Specify the path to the node_modules directory
const nodeModulesPath = path.join(__dirname, 'node_modules');

// Specify the missing dependencies
const missingDependencies = {
  "@mui/material": "^5.15.15"
};

// Recursively add missing dependencies to package.json files
function addMissingDependencies(dir) {
  const files = fs.readdirSync(dir);

  for (const file of files) {
    const filePath = path.join(dir, file);

    if (fs.statSync(filePath).isDirectory()) {
      addMissingDependencies(filePath);
    } else if (file === 'package.json') {
      let packageJson;

      try {
        packageJson = require(filePath);
      } catch (error) {
        // If the package.json file doesn't exist, create a new one
        packageJson = {};
      }

      // Add missing dependencies
      packageJson.dependencies = {
        ...packageJson.dependencies,
        ...missingDependencies
      };

      // Add version if not exists
      if (!packageJson.version) {
        packageJson.version = "1.0.0";
      }

      // Write the updated package.json back to the file
      fs.writeFileSync(filePath, JSON.stringify(packageJson, null, 2));
    }
  }
}

addMissingDependencies(nodeModulesPath);