这里的问题很简单,真的。
我目前正在开发一个应用程序,我想将部分拆分为组件。
我决定创建一个样板来使用 rollupJS 创建模块,以便使用 NPM 将这些模块导出到我的核心应用程序中。
在我的依赖项中使用 MaterialUI 以及使用模块中的 withStyles 和 ThemeProvider 时,我偶然发现了一个问题。
我目前尝试过:
消息本身是来自 react 的臭名昭著的 Invalid hook 调用
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 版本之间的冲突(还有 Material ui,但它似乎几乎没有影响)。我已经截断了 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'));
任何可以解决这个问题的帮助真的非常非常感谢!
最佳答案
对于任何想知道问题出在哪里的人,
Yarn 和 NPM,即使在控制台中列出 react 调用时,也没有列出链接模块使用的 react 版本。所以我认为只有一个 react 版本。使用 PeerDependencies 也没有解决问题。
使用 https://github.com/facebook/react/issues/13991#issuecomment-496383268我能够在我的主应用程序中使用别名,它正在解决模块中的重复 react 调用。
关于reactjs - 使用 rollupJs 构建 ES6 模块时 Material-UI ThemeProvider Invalid hook call,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56788551/