Using Material UI is causing invalid hook call warning

Question

I'm trying out create-react-library to bundle a reusable library. The idea I'm trying out is to create composable component libraries that we can use in our web app and our electron app.

In our package.json file we have the following requirements

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

When I import a Material UI component it results in an error

Hooks can only be called inside the body of a function component. https://reactjs.org/warnings/invalid-hook-call-warning.html

This is the full component (it's just the example from create-react-library that I was slowly expanding on)

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;

********************************** Edit **********************************

Changing the devDependencies for material ui and react and adding to the rollup.config.js file (to deal with an issue that this introduced) fixed the error

"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' ]
  }
})

Answer 1

In my case, I had a submodule installed with a node_modules folder, I was actually compiling react twice into a bundle.

Fixed by removing submodule's node_modules folder, could also potentially fix in webpack config:

   main
      node_modules
      submodules
          -> node_modules