Блог

Я работаю над библиотекой компонентов, которая обертывает некоторые компоненты MaterialUI и реализует другие для использования в более крупном проекте. При настройке библиотеки мне пришлось настроить webpack, чтобы иметь возможность импортировать и объединять изображения и css-файлы в моей библиотеке.

Эта библиотека расположена вложенной в папку основного проекта, куда я добавляю ее в качестве зависимости npm i ./shared/path_to_library . это, кажется, работает нормально, так как машинопись работает правильно и 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 своей библиотеки. Экспорт компонентов ручной работы и их использование в основном проекте работает нормально, но использование любого компонента материала, обернутого моим собственным компонентом, а затем использование его в проекте приводит меня к этой ошибке. Я также попытался перейти с веб-пакета на накопительный пакет, но в итоге столкнулся с той же проблемой.

Вот мои файлы конфигурации для webpack и свертки:

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

У меня заканчиваются идеи 🙁

Я думаю, что вам нужно настроить свой .babelrc следующим образом:

 "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", "jest"],  "plugins": [  [  "babel-plugin-transform-imports",  {  "@material-ui/core": {  "transform": "@material-ui/core/${member}",  "preventFullImport": true  },  "@material-ui/icons": {  "transform": "@material-ui/icons/${member}",  "preventFullImport": true  }  }  ]  ]  

Вероятно, это происходит из-за загрузки нескольких экземпляров React. Вы можете проверить npm ls react , все пакеты react должны быть deduped

Краткосрочным решением является привязка реакции из библиотеки, т. е.

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

Однако вам придется повторно связывать это каждый раз, когда вы устанавливаете пакет npm.