使用rollupJs构建ES6模块时的资料-UI ES6无效钩子调用

Question

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

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

我现在试过：

• 将模块构建为cjs (commonJS)而不是es6模块，不工作，
• 传递材料-ui比peerDependencies更小，几乎没有效果，
• 使用rollup运行不同的场景(更改订单、使用externalPeerDependencies插件等等)，但是我不太理解汇总，所以这对我来说是死胡同，我想在这方面提供指导，
• 擦除ThemeProvider和/或withStyles键可以解决这个问题，所以至少我知道这里有一个问题。(我的主应用程序上的错误消息直接指向我的模块/节点_模块中的一个函数，该函数使用material中的useContext() )
• 使用MuiThemeProvider代替ThemeProvider并不能解决这个问题
• 在本例中，使用较早版本的资料用户界面和/或ReactJS是不可行的。

消息本身就是来自react的臭名昭著的无效钩子调用。

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"
  }

我把我的依赖关系作为对等体，以避免反应版本之间的冲突(以及物质ui，但它似乎没有什么效果)。为了避免这里的完整列表，我已经截断了devDependencies。

我的rollup配置：

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版本。所以我以为只有一个反应版本。使用PeerDependencies也不能解决这个问题。

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