• • bounty将在6天后过期**。回答此问题可获得+50声望奖励。Ankur Akvaliya希望引起更多人关注此问题。

我正在尝试创建一个简单的react包，可以在react应用程序中使用。我正在使用这些主要的库：React（18.2.0）、网络包（5.4.0）、多界面/材料（5.11.2）、 typescript （4.9.4）。
我正在使用本地依赖项将此包添加到我的react应用程序中（"packagename"："文件：../包"）。
没有mui也能正常工作，但是当我添加了mui后，它在包中构建的很好，但是在react应用程序中使用包时会出现错误。
以下是软件包的Webpack配置。

const path = require("path");
const webpack = require("webpack");

module.exports = (env) => ({
  mode: env.NODE_ENV,
  watch: env.NODE_ENV === "development",
  entry: {
    app: path.join(__dirname, "src", "index.tsx"),
  },
  output: {
    libraryTarget: "umd",
    library: "libname",
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: "/node_modules/",
        options: {
          configFile: path.resolve(__dirname, "tsconfig.json"),
        },
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                auto: true,
                localIdentName:
                  env.NODE_ENV === "development"
                    ? "[local]__[hash:base64:5]"
                    : "[hash:base64:5]",
              },
            },
          },
        ],
        include: /\.module\.css$/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /\.module\.css$/,
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "@svgr/webpack",
            options: {
              svgoConfig: {
                plugins: [{ removeViewBox: false }],
              },
            },
          },
          {
            loader: "svg-url-loader",
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "url-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: "url-loader",
        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.STAGE": JSON.stringify(env.STAGE),
    }),
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
  ],
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
      root: "React",
    },
    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "react-dom",
      root: "ReactDOM",
    },
  },
});

这是package.config。

"dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.2"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.4.0",
    "@types/node": "^12.12.42",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "css-loader": "^4.3.0",
    "style-loader": "^1.3.0",
    "svg-url-loader": "^6.0.0",
    "ts-loader": "^8.0.7",
    "typescript": "^4.9.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-node-externals": "^3.0.0"
  },
  "files": [
    "dist/index.js",
    "dist/index.d.ts",
    "dist/*.png",
    "dist/*.jpg"
  ],
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

下面是tsconfig.json

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "downlevelIteration": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react",
    "allowJs": true,
    "declaration": true,
    "outDir": "./dist"
  },

我在react应用程序中得到以下错误，其中包被使用。该到达应用程序是使用create-react-app和使用最新的react v18创建的。

我试着研究，并尝试改变几个选项，在webpack配置以及。但我不能弄清楚这一点。
任何帮助都很感激。