reactjs - 使用 rollupJs 构建 ES6 模块时 Material-UI ThemeProvider Invalid hook call

Question

这里的问题很简单，真的。
我目前正在开发一个应用程序，我想将部分拆分为组件。
我决定创建一个样板来使用 rollupJS 创建模块，以便使用 NPM 将这些模块导出到我的核心应用程序中。

在我的依赖项中使用 MaterialUI 以及使用模块中的 withStyles 和 ThemeProvider 时，我偶然发现了一个问题。

我目前尝试过:

将模块构建为 cjs (commonJS) 而不是 es6 模块，不起作用，

将 material-ui 作为 smthg 传递，而不是 peerDependencies，几乎没有影响，

使用汇总运行不同的场景(更改订单，使用 externalPeerDependencies 插件等)，但我不太了解汇总，所以这对我来说是一个死胡同，我需要这方面的指导，

删除 ThemeProvider 和/或 withStyles 键可以解决问题，所以至少我知道这里有问题。 (并且我的主应用程序上的错误消息直接指向我的模块/node_modules 中的函数，在使用来自 material-ui 的 useContext() 的函数上)

使用 MuiThemeProvider 代替 ThemeProvider 并不能解决问题

在这种情况下，使用早期版本的 Material UI 和/或 ReactJS 是不可行的

消息本身是来自 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'));

任何可以解决这个问题的帮助真的非常非常感谢!

Answer 1

对于任何想知道问题出在哪里的人，
Yarn 和 NPM，即使在控制台中列出 react 调用时，也没有列出链接模块使用的 react 版本。所以我认为只有一个 react 版本。使用 PeerDependencies 也没有解决问题。

使用 https://github.com/facebook/react/issues/13991#issuecomment-496383268我能够在我的主应用程序中使用别名，它正在解决模块中的重复 react 调用。