Material-UI ThemeProvider Неверный вызов ловушки при сборке модуля ES6 с использованием rollupJs - PullRequest
Новая
       47

Material-UI ThemeProvider Неверный вызов ловушки при сборке модуля ES6 с использованием rollupJs

0 голосов
/ 27 июня 2019

проблема здесь довольно проста, правда.В настоящее время я работаю над приложением, которое я хочу разделить на части.Я решил создать шаблон для создания модулей, используя rollupJS, чтобы экспортировать эти модули в мое основное приложение, используя NPM.

Я столкнулся с проблемой при использовании MaterialUI в моих зависимостях и при использовании withStyles и ThemeProvider из модуля.

В настоящее время я пытался:

  • buildingмодуль как cjs (commonJS) вместо модуля es6, не работает,
  • передает материал-пользовательский интерфейс как что-то другое, кроме peerDependencies, эффекты практически не учитываются,
  • запускал другой сценарий с использованием свертывания (изменение порядка, используя плагин externalPeerDependencies и т. д.), но я не очень разбираюсь в накопительном пакете, так что это тупик для меня, и я хотел бы получить руководство по этому вопросу,
  • Стирание ключей ThemeProvider и / или withStylesрешение проблемы, так что, по крайней мере, я знаю, что здесь есть проблема.(и сообщение об ошибке в моем главном приложении указывает на функцию прямо в моем модуле / node_modules, на функции, использующей useContext () из material-ui)
  • Использование MuiThemeProvider вместо ThemeProvider не решает проблему
  • Использование более ранней версии Material UI и / или ReactJS в этом случае не допускается

Само сообщение является печально известным неверным вызовом ловушки от реакции 

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
See blabla for tips about how to debug and fix this problem.

Как вы можете видеть здесь в коде: 

  "devDependencies": {
    ...
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.5.1",
    "sass-loader": "^7.1.0",
    "@material-ui/core": "^4.0.0",
    "style-loader": "^0.23.1"
  },
  "dependencies": {
    "babel-core": "^7.0.0-bridge.0",
    "prop-types": "^15.7.2"
  },
  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-proptypes": "^1.0.0",
    "@material-ui/core": "^4.0.0"
  }

Я поместил свои зависимости как одноранговые, чтобы избежать конфликтов между версиями React (и пользовательским интерфейсом тоже, но, похоже, что эффект практически отсутствует).Я обрезал devDependencies, чтобы избежать полного списка здесь.

моя конфигурация накопительного пакета: 

export default {
  input: 'src/index.js',
  output: [{
    file: pkg.main,
    format: 'es'
  }],
  // All the used libs needs to be here
  external: [
    'react', 
    'react-dom',
    'react-proptypes',
    '@material-ui/core',
    '@material-ui/styles',
    'prop-types'
  ],
  plugins: [
    resolve({ preferBuiltins: false }),
    postcss({
      plugins: [
        postcssModules({
          getJSON (id, exportTokens) {
            cssExportMap[id] = exportTokens;
          }
        })
      ],
      getExportNamed: false,
      getExport (id) {
        return cssExportMap[id];
      },
      extract: 'dist/styles.css',
    }),
    json({
      'include': 'node_modules/**'
    }),
    babel({
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties",  "@babel/plugin-proposal-export-default-from"],
      exclude: [
        'node_modules/**'
      ],
    }),
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        'node_modules/react-is/index.js': ['ForwardRef', 'isValidElementType']
      }
    })
  ]
}

и мой код, который, если я подавляю ThemeProvider, у меня нет ошибки: 

import { render } from 'react-dom'
import React, { Component } from 'react'
import { MuiThemeProvider } from '@material-ui/core/styles'

const props = {}

class Boilerplate extends Component {
  render() {
    return (<div className='title'>Hello world</div>)
  }
}

render(<MuiThemeProvider><Boilerplate /></MuiThemeProvider>, document.getElementById('app'));

Любая помощь, которая может решить эту проблему, очень, очень ценится!

1 Ответ

0 голосов
/ 03 июля 2019

Для тех, кто интересуется, в чем проблема, Yarn и NPM, даже при отображении списка реагирующих вызовов в консоли, где нет списка версии реагирования, используемой связанным модулем. Поэтому я думал, что была только одна версия реакции. Использование PeerDependencies также не решило проблему.

с использованием https://github.com/facebook/react/issues/13991#issuecomment-496383268 Я смог использовать псевдоним в своем основном приложении, и он решает двойной ответный вызов в модуле.

...