[error] export error while bundling @fluentui/react with webpack

[mukuljainx]

I have already posted this on StackOverflow, creating a thread so it reaches relevant people quickly, here is the stack overflow link: https://stackoverflow.com/questions/67116114/export-error-while-bundling-fluentui-react-with-webpack

In short, I am getting around 1500 warning with v8 all related to react imports, I am using react 17, I also tried using react 16 same results. I have posted all configs and dependencies on stackoverflow.

What I have tried so far

1. Removing the tsconfig, so it can use the default one.
2. allow synthetic default imports
3. removing react hot loader
4. Checked on the Code Sandbox with the same versions, everything working there so probably there is something's wrong with the config.
5. Downgrading React to 16

Sample error

[mukuljainx]

Somehow, there were multiple version/instance of React were in place, I assumed there is only as hooks were working correctly, aliasing the react with './node_modules/react' solved the issue for me.

[ecraig12345]

Glad you figured it out, and sorry nobody saw this sooner! Generally, to check if/why you might have multiple versions of a dependency installed, you can run (depending on your package manager) npm ls react or yarn why react. In this case it's worth checking react, react-dom, @types/react, and @types/react-dom.

If there are multiple versions of one or more of those, it's best to resolve at the source if possible, such as by updating other deps that are pulling in the unwanted version. Or if that's not possible, package managers usually have a way to force resolution of a dep to a particular version throughout the repo (for yarn it's the resolutions setting).