Issue with requiredVersion comparison when using Caret ^ or Tilde ~ in string when using Webpack

[RobinWest]

Describe the bug

Hey folks. I'm running into an issue where matching versions on my Producer and Consumer are resulting in (a large amount) of warnings about the version not being satisfied:

[ Federation Runtime ] Warn Version ^17.0.2 from [consumer] of shared singleton module react-dom does not satisfy the requirement of [producer] which needs ^17.0.2)

⚠️ As an aside, these warnings are filling the console. There are several hundred of these being printed out. Is this expected?

As you can see, those version strings match so I would expect this check to pass.

In the consumer webpack config, I am using requiredVersion: deps.react, where deps is from require("./package.json").dependencies;

This seems to match close enough to what the docs suggest is the default for requiredVersion anyway: require('project/package.json')[devDeps | dep]['depName']

I did a little bit of digging, and I suspect it is something to do with either satisfy(), extractComparator(), or the regex used within. As far as I could tell, this is the regex string being used for extractComparator:

^((?:<|>)?=?)\s*(v?(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][a-zA-Z0-9-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][a-zA-Z0-9-]*))*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?)$|^$

and we can see from this regex tester that Caret ^ and Tilde ~ are not being grabbed with that regex: https://regex101.com/r/a0d8H1/1

I don't think I have enough context on how this is supposed to work – whether the regex needs to be updated, or maybe we should just be stripping those chars out of the version before – but it feels like I shouldn't be getting this error, when both of the versions seem to match correctly.

Reproduction

https://github.com/RobinWest/module-federation-issue

Used Package Manager

npm

System Info

consumer-app-webpack

  System:
    OS: macOS 14.7
    CPU: (8) arm64 Apple M1
    Memory: 126.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
    pnpm: 9.12.1 - ~/.nvm/versions/node/v18.20.4/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.6

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

Supply repo please

[RobinWest]

Supply repo please

👍 working on it

[RobinWest]

OK updated. Reproduction repo is a bit slapped together but it shows the issue.

[ScriptedAlchemy]

@RobinWest try with all webpack/rspack - vite is not supported by the core team and we cannot assess any problems that it may cause. If the 3 apps using webpack/rspack mix have semver issue then its something we can address in this repo, if not then you need to file issue with module-federation/vite repo as it is not related to our runtime or compile plugins

[ScriptedAlchemy]

Also you should not use eager:true unless absolutely necessary