Material-UI ThemeProvider 在使用 rollupJs 构建 ES6 模块时无效的 hook 调用

Question

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

我在依赖项中使用 MaterialUI 以及使用模块中的 withStyles 和 ThemeProvider 时遇到了问题。

我目前尝试过：

bui将模块作为 cjs (commonJS) 而不是 es6 模块，不工作，
将 material-ui 作为 smthg 传递，而不是 peerDependencies，几乎没有 none 影响，
运行使用汇总的不同场景（更改订单、使用 externalPeerDependencies 插件等），但我不太了解汇总，所以这对我来说是死胡同，我想要 gui在那跳舞，
删除 ThemeProvider and/or withStyles 键正在解决问题，所以至少我知道这里有问题。（我的主应用程序上的错误消息直接指向我的 module/node_modules 中的一个函数，该函数使用来自 material-ui 的 useContext()）
用MuiThemeProvider代替ThemeProvider并不能解决问题
使用早期版本的 Material UI and/or ReactJS 在这种情况下是不行的

消息本身就是来自 react

的臭名昭著的 Invalid hook call

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 也是如此，但它似乎对 none 影响不大）。我截断了 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，即使在控制台中列出反应调用时，也没有列出链接模块使用的反应版本。所以我认为只有一个反应版本。使用PeerDependencies也没有解决问题。

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

Material-UI ThemeProvider 在使用 rollupJs 构建 ES6 模块时无效的 hook 调用

Material-UI ThemeProvider Invalid hook call when building an ES6 module using rollupJs

module

ecmascript-6

reactjs

material-ui

rollupjs