我正在尝试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;
****************************************编辑************* *********************
更改材料用户界面和反应的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' ]
}
})
就我而言,我安装了一个带有node_modules
文件夹的子模块,实际上我将React编译成一个包两次。
已通过删除子模块的node_modules修复]文件夹,也有可能在webpack配置中修复:
main
node_modules
submodules
-> node_modules