使用Material UI会导致无效的挂接调用警告

Question

我正在尝试将create-react-library捆绑为可重用的库。我正在尝试的想法是创建可组合的组件库，以供我们在Web应用程序和电子应用程序中使用。

在我们的package.json文件中，我们具有以下要求

"peerDependencies": {
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
    "@material-ui/core": "^4.0.0-alpha.4",
    ....
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
}

导入Material UI组件时，将导致错误

挂钩只能在功能组件的主体内部调用。https://reactjs.org/warnings/invalid-hook-call-warning.html

这是完整的组件（这只是我慢慢扩展的create-react-library中的示例）

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { Button } from "@material-ui/core";

import styles from './styles.css'

class ExampleComponent extends Component {
  static propTypes = {
    text: PropTypes.string
  }

  render() {
    const { text } = this.props

    return (

        <div className="">
          <Button></Button>
          Example Component: {text}
        </div>
    )
  }
}

export default ExampleComponent;

**************************************编辑*************** *******************

更改材料ui的devDependencies并做出反应并添加到rollup.config.js文件（以解决此问题）解决了该错误

"devDependencies": {
    "@material-ui/core": "^3.9.0",
    ...
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
   }

rollup.config.js

commonjs({
  include: 'node_modules/**',
  namedExports: {
    'node_modules/@material-ui/core/styles/index.js': [
      'createGenerateClassName',
      'createMuiTheme',
      'createStyles',
      'jssPreset',
      'MuiThemeProvider',
      'withStyles',
      'withTheme'
    ],
    'node_modules/@material-ui/core/Modal/index.js': [ 'ModalManager' ]
  }
})

Answer 1

就我而言，我安装了一个带有node_modules文件夹的子模块，实际上我将 React 两次编译到一个包中。

通过删除子模块的 node_modules文件夹来修复，也可能在 webpack 配置中修复：

   main
      node_modules
      submodules
          -> node_modules