Разрыв в производстве React + Webpack + Material UI - PullRequest
Новая
       5

Разрыв в производстве React + Webpack + Material UI

3 голосов
/ 23 января 2020

Я пытаюсь создать повторно используемый компонент React с пользовательским интерфейсом Material и npm link для другого приложения. Компонент и приложение объединяются с помощью веб-пакета. Приложение хорошо отрабатывает компонент в процессе разработки, но когда я связываю приложение, компонент начинает нарушать стилистику Material-UI.

Вот некоторые из решений, которые я пробовал:

Я думал определение @material/core в peerDependencies решило бы это, но каждый раз, когда я использую компонент Material-UI, приложение выдает Предупреждение о недействительном вызове хука .

Кажется, ничего не работает ☹️

пакет компонента. 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

const path = require('path');

module.exports = {
  entry: './src/index.jsx',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/env'],
          },
        },
      },
    ],
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  externals: {
    react: 'react',
  },
  optimization: {
    minimize: true,
  },
};

Любая помощь будет принята с благодарностью! Заранее спасибо.

1 Ответ

1 голос
/ 10 февраля 2020

Это действительно имеет смысл, если вы посмотрите документы по npm link:

Сначала ссылка npm в папке пакета создаст символическую ссылку в глобальная папка {префикс} / lib / node_modules /, которая ссылается на пакет, в котором была выполнена команда npm link.

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

Мой совет будет создать пакет с областью действия для вашего пользовательского компонента. Создайте учетную запись npm, загрузите пакет и добавьте его в свой проект следующим образом:

npm install @brettoberg/reusable-component

Теперь веб-пакет и любая другая система должны найти его, потому что он опубликован.

...