Using "react-hot-loader/babel" throws invariant warning

[Akuukis]

Moved from #15508

Material-ui component Grid throws invariant warning when hot reloading.

keyword: alpha, hooks, hmr, rhl, react, component, grid, v4, invariant

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I expect to hot-reload material-ui components just fine at all newest versions.

Current Behavior 😯

RHL looks like working, although throws Invariant Violation: "Invalid hook call... warning.

Steps to Reproduce 🕹

I can't make codesandbox.io example, because this is related to RHL. Code below:

// test.tsx
import * as React from 'react'  // v16.8.6
import { hot } from 'react-hot-loader/root'  // v4.8.4
import { Grid } from '@material-ui/core'  // v4.0.0-alpha.8

export default hot<React.FC<IProps>>((props) => (<Grid>change me</Grid>)

// index.tsx
import * as React from 'react'  // v16.8.6
import { render } from 'react-dom'  // v16.8.6, aliased to @hot-loader/react-dom@16.8.6

render(<Test />, document.getElementById('root'))

Steps:

1. webpack-dev-server --mode development --hot
2. in browser check console and see no warnings yet
3. in test.tsx file edit "change me"
4. check console that RHL managed to put update, but throws Invariant Violation: "Invalid hook call... warning. Also,

   [HMR] Updated modules: log.js:24
   [HMR]  - ./src/test.tsx log.js:24
   [HMR]  - ../../node_modules/@material-ui/core/esm/index.js log.js:24

5. in test.tsx file change "Grid" to "div"
6. check console that RHL managed to put update, but throws Invariant Violation: "Invalid hook call... warning. Also

   [HMR] Updated modules: log.js:24
   [HMR]  - ./src/test.tsx log.js:24

7. in test.tsx file change text again and leave it to "div"
8. check console that RHL managed to put update, and no warnings anymore. Weird.

Context 🔦

I'm trying to setup Material-UI React hook-only app in Typescript.

Your Environment 🌎

Using webpack@4.30.0 with @babel/core@7.4.3 and @babel/preset-typescript@7.3.3 . I'm using only babel to transpile TS code.

[Akuukis]

It turned out that by removing "react-hot-loader/babel" plugin from webpack config file, the hot from import { hot } from 'react-hot-loader/root' started to work as expected. It now reloads only the last component, maintains state, and doesn't throw any warnings about material-ui components.

The readme suggests that if I'm using babel then I should be using the plugin. Also, the aliasing doesn't seem to have any effect - it can't see a difference, nor see the warning about "react-hot-dom" missing.

[theKashey]

Strange. babel plugin should not work this way. It should not affect anything, especially in this simple case.