javascript - 无法在带有 webpack/rollup/react 的外部库中使用 Material UI

Question

我正在开发一个组件库，它包装了一些 MaterialUI 组件并实现了其他组件以用于更大的项目。在设置库时，我必须设置 webpack 以便能够在我的库中导入和捆绑图像和 css 文件。

这个库嵌套在主项目的文件夹中，我将它添加为依赖项 npm i ./shared/path_to_library。这似乎工作正常，因为 typescript 工作正常并且 npm start 没有给我任何错误。然后，当我在浏览器中打开它时，出现以下错误页面:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

但只有当我尝试在我的库中使用来自 @mui/material 的任何组件时才会发生此错误。导出手工组件并在主项目中使用它们工作正常，但是使用我自己的组件包装的任何 Material 组件然后在项目中使用它会给我带来这个错误。我也尝试从 webpack 转移到汇总，但我最终遇到了同样的问题。

这是我的 webpack 和 rollup 配置文件:

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

const pkg = require("./package.json");

const config = [
  {
    input: "src/index.ts",
    output: [
      { file: pkg.main, format: "cjs", sourcemap: true },
      { file: pkg.module, format: "esm", sourcemap: true },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
    ],
  },
  {
    input: "lib/esm/types/index.d.ts",
    output: [{ file: "lib/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

export default config;

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "lib"),
    filename: "[name].js",
    libraryTarget: "umd",
    library: "my-core-library",
    umdNamedDefine: true,
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css?$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.tsx?$/,
        use: ["babel-loader", "ts-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: ["file-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  externals: [
    {
      react: "react",
      "react-dom": "react-dom",
      "@mui/material": "@mui/material",
      "@emotion/react": "@emotion/react",
      "@emotion/styled": "@emotion/styled",
      "@mui/lab": "@mui/lab",
    },
  ],
};

我的想法已经用完了:(

Answer 1

这可能是因为加载了多个 React 实例。你可以用 npm ls react 检查，所有的 react 包都应该被 deduped

短期解决方案是从库链接 react ，即

npm link ../shared/path_to_library/node_modules/react

但是，每次安装 npm 包时都必须重新链接。