React + Webpack + Material UI 样式在生产中被打破

Question

我正在尝试使用 Material UI 创建一个可重用的 React 组件，并将npm link其用于不同的应用程序。组件和应用程序正在使用 webpack 进行捆绑。该应用程序在开发中呈现组件良好，但是当我捆绑应用程序时，该组件开始破坏 material-ui 样式。

我尝试过的一些解决方案包括：

• https://material-ui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds
• https://reactjs.org/warnings/invalid-hook-call-warning.html

我认为@material/core在 中定义peerDependencies会解决它，但是每次我使用 Material-UI 组件时，应用程序都会抛出Invalid Hook Call Warning。

好像什么都没用？？

---

组件的 package.json：

{
  "name": "component",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack --watch",
    "build": "webpack --optimize-minimize -p",
    "dist": "npm run build"
  },
  "peerDependencies": {
    "@material-ui/core": "^3.2.0 || ^4.0.0",
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^4.9.0",
    "@material-ui/icons": "^3.0.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-runtime": "^6.26.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.1.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.7.0",
    "faker": "^4.1.0",
    "husky": "^1.3.1",
    "jest": "^23.6.0",
    "jest-styled-components": "^6.3.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "sinon": "^7.2.2",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  },
  "dependencies": {
    "clsx": "^1.0.4",
    "prop-types": "^15.6.2"
  }
}

组件的 webpack.config.js

{
  "name": "component",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack --watch",
    "build": "webpack --optimize-minimize -p",
    "dist": "npm run build"
  },
  "peerDependencies": {
    "@material-ui/core": "^3.2.0 || ^4.0.0",
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^4.9.0",
    "@material-ui/icons": "^3.0.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-runtime": "^6.26.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.1.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.7.0",
    "faker": "^4.1.0",
    "husky": "^1.3.1",
    "jest": "^23.6.0",
    "jest-styled-components": "^6.3.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "sinon": "^7.2.2",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  },
  "dependencies": {
    "clsx": "^1.0.4",
    "prop-types": "^15.6.2"
  }
}

任何帮助将非常感激！提前致谢。

Answer 1

如果您查看以下文档，这实际上是非常有意义的npm link：

首先，包文件夹中的 npm link 将在全局文件夹 {prefix}/lib/node_modules/ 中创建一个符号链接，该符号链接链接到执行 npm link 命令的包。

请注意，该命令仅在本地创建符号链接，因此当您构建/部署时，它在逻辑上会遵循无法找到的包。

我的建议是为您的自定义组件创建一个范围包。创建一个 npm 帐户，上传您的包，然后将其添加到您的项目中，如下所示：

npm install @brettoberg/reusable-component

现在，webpack 和任何其他系统应该能够找到它，因为它已经发布了。