Использование пользовательского интерфейса материала вызывает недопустимое предупреждение о вызове ловушки

Question

Я пытаюсь создать-реагировать-библиотеку , чтобы связать повторно используемую библиотеку.Идея, которую я пробую, состоит в том, чтобы создать библиотеки компонуемых компонентов, которые мы можем использовать в нашем веб-приложении и электронном приложении.

В нашем файле package.json у нас есть следующие требования

"peerDependencies": {
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
    "@material-ui/core": "^4.0.0-alpha.4",
    ....
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
}

При импорте компонента Material UI это приводит к ошибке

Хуки могут вызываться только внутри тела функционального компонента.https://reactjs.org/warnings/invalid-hook-call-warning.html

Это полный компонент (это просто пример из библиотеки create-реагировать на библиотеку, который я медленно расширял)

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { Button } from "@material-ui/core";

import styles from './styles.css'

class ExampleComponent extends Component {
  static propTypes = {
    text: PropTypes.string
  }

  render() {
    const { text } = this.props

    return (

        <div className="">
          <Button></Button>
          Example Component: {text}
        </div>
    )
  }
}

export default ExampleComponent;

********************************** Редактировать **********************************

Изменение devDependencies для пользовательского интерфейса материала и реакции, а также добавление в файл rollup.config.js (для решения этой проблемы) исправило ошибку

"devDependencies": {
    "@material-ui/core": "^3.9.0",
    ...
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
   }

rollup.config.js

commonjs({
  include: 'node_modules/**',
  namedExports: {
    'node_modules/@material-ui/core/styles/index.js': [
      'createGenerateClassName',
      'createMuiTheme',
      'createStyles',
      'jssPreset',
      'MuiThemeProvider',
      'withStyles',
      'withTheme'
    ],
    'node_modules/@material-ui/core/Modal/index.js': [ 'ModalManager' ]
  }
})