使用 webpack 捆绑 @fluentui/react 时出现导出错误

Question

我得到的 webpack 5.25.0 在 6734 毫秒内编译了 7 个警告，版本 7.167.0 和 v8.10.1 我得到 1513 它们都是一样的，像这样，而不是 createElement 会有另一个像 useEffect 这样的反应函数，v8 在开发模式下需要 5 分钟才能捆绑，而 v7 需要 10 秒。

在 'react'

中找不到

导出 'createElement'（导入为 'React'）

这是 webpack 配置

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"
  },

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

到目前为止我尝试了什么

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

示例在这里

Answer 1

不知何故，有多个 version/instance 的 React，我假设只有当挂钩正常工作时，将 react 别名为 './node_modules/react' 解决了我的问题

使用 webpack 捆绑 @fluentui/react 时出现导出错误

export error while bundling @fluentui/react with webpack

reactjs

webpack

office-ui-fabric

fluent-ui

fluentui-react