将@fluentui/react 与 webpack 捆绑在一起时导出错误

如何解决将@fluentui/react 与 webpack 捆绑在一起时导出错误

我在 6734 毫秒内编译 webpack 5.25.0 并带有 7 个警告，版本为 7.167.0 和 v8.10.1 我得到了 1513 它们都是相同的，类似这样，而不是 {{1}将会有另一个像 createElement 这样的反应函数，v8 在开发模式下需要 5 分钟，而 v7 需要 10 秒。

在 'react' 中找不到导出 'createElement'（导入为 'React'）

这里是 webpack 配置

webpack.common.ts

useEffect

webpack.dev.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;

pacakge.json

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);

至少在 v7 中它可以处理警告，而 v8 也存在 webpack 导出错误。

到目前为止我尝试过的

删除 tsconfig，所以它可以使用默认的。
允许合成默认导入
移除反应热加载器
检查具有相同版本的 CodeSand 框，一切正常，因此配置可能有问题。
降级到 React 16

此处示例

解决方法

不知何故，有多个 React 版本/实例，我认为只有当钩子正常工作时，使用“./node_modules/react”别名 react 为我解决了这个问题