reactjs - 使用 rollupJs 构建 ES6 模块时 Material-UI ThemeProvider 的挂钩调用无效

问题描述

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

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

我目前尝试过：

将模块构建为 cjs (commonJS) 而不是 es6 模块，不起作用，
除了 peerDependencies 之外，将 material-ui 作为 smthg 传递，几乎没有影响，
使用汇总（更改订单，使用 externalPeerDependencies 插件等）运行不同的场景，但我不太了解汇总，所以这对我来说是一个死胡同，我想要这方面的指导，
擦除 ThemeProvider 和/或 withStyles 键正在解决问题，所以至少我知道这里有问题。（并且我的主应用程序上的错误消息直接指向我的模块/node_modules 中的一个函数，在一个使用来自 material-ui 的 useContext() 的函数上）
使用 MuiThemeProvider 代替 ThemeProvider 并不能解决问题
在这种情况下，使用早期版本的 Material UI 和/或 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 版本之间的冲突（以及材料 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'));

任何可以解决此问题的帮助都非常非常感谢！

标签： reactjsecmascript-6modulematerial-uirollupjs

reactjs - 使用 rollupJs 构建 ES6 模块时 Material-UI ThemeProvider 的挂钩调用无效

问题描述

解决方案

推荐阅读