export error while bundling #fluentui/react with webpack - reactjs

Question

I am getting webpack 5.25.0 compiled with 7 warnings in 6734 ms with version 7.167.0 and with v8.10.1 I was getting 1513 they were all same and something like this, instead of createElement there will be another react function like useEffect, with v8 it was taking 5 minutes to bundle in dev mode though with v7 took 10 sec.
export 'createElement' (imported as 'React') was not found in 'react'
Here is the webpack config
webpack.common.ts
import path from "path";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
const isDevelopment = process.env.NODE_ENV !== "production";
const config = {
target: "web",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
modules: ["node_modules", "."],
alias: {
src: path.resolve(__dirname, "./src"),
// webpack was unable to understand the instance import
// and export, so we have explicitly tell it which comes
// from the node_modules
axios: path.resolve(__dirname, "./node_modules/axios"),
},
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new ForkTsCheckerWebpackPlugin(),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
// Include ts, tsx, js, and jsx files.
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
// ... other options
plugins: [
// ... other plugins
isDevelopment && require.resolve("react-refresh/babel"),
].filter(Boolean),
},
},
{
test: /\.svg($|\?)/,
use: [
{
loader: "file-loader",
options: {
limit: 65000,
mimetype: "image/svg+xml",
name: "[name].[ext]",
},
},
],
},
{
test: /\.(png|jpg|gif)($|\?)/,
loader: "url-loader",
options: {
limit: 8192,
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
};
module.exports = config;
webpack.dev.ts
const ReactRefreshWebpackPlugin = require("#pmmmwh/react-refresh-webpack-plugin");
import merge from "webpack-merge";
// #ts-ignore
import common from "./webpack.common";
const config = {
mode: "development",
output: {
publicPath: "/",
},
entry: ["./src/index"],
target: "web",
devtool: "eval-cheap-module-source-map",
plugins: [new ReactRefreshWebpackPlugin()],
devServer: {
clientLogLevel: "error",
port: 4444,
stats: "minimal",
hot: true,
historyApiFallback: true,
},
};
module.exports = merge(common, config);
pacakge.json
"dependencies": {
"#babel/core": "^7.13.10",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-typescript": "^7.13.0",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
"#babel/preset-typescript": "^7.13.0",
"#fluentui/react": "^7.167.0",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#reduxjs/toolkit": "^1.5.1",
"#testing-library/react-hooks": "^5.1.1",
"#types/jest": "^26.0.20",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.2",
"#types/react-redux": "^7.1.16",
"#types/react-router-dom": "^5.1.7",
"#types/redux-logger": "^3.0.8",
"#types/styled-components": "^5.1.9",
"#types/uglifyjs-webpack-plugin": "^1.1.1",
"#types/webpack-bundle-analyzer": "^4.4.0",
"#types/webpack-manifest-plugin": "^3.0.4",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.1.2",
"cypress": "^6.6.0",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.1.1",
"html-webpack-plugin": "^5.3.1",
"jest": "^26.6.3",
"lodash-es": "^4.17.21",
"normalize.css": "^8.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.3",
"react-refresh": "^0.9.0",
"react-router-dom": "^5.2.0",
"react-spring": "^9.0.0",
"redux-logger": "^3.0.6",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"styled-components": "^5.2.1",
"ts-node": "^9.1.1",
"type-fest": "^0.21.3",
"typescript": "^4.2.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^5.25.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.1.0",
"webpack-merge": "^5.7.3"
},
with v7 at least it is working with warnings and v8 there were webpack export errors too.
What I have tried so far
Removing the tsconfig, so it can use the default one.
allow synthetic default imports
removing react hot loader
Checked on CodeSand box with the same versions, everything working there so probably there is something's wrong with config.
Downgrading to React 16
Sample here

Answer 1

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