Material-ui: Hot Reloading Broken - useRippleHandler

[BerndWessels]

Using material-ui with react-hot-loader is broken when using material components that use the ripple effect like Button.

• [x ] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When hot reloading the console throws an error:

React-Hot-Loader: error occurred while comparing hook signature ReferenceError: useRippleHandler is not defined
    at Object.getCustomHooks (ButtonBase.js:65)
    at haveEqualSignatures (react-hot-loader.development.js:2560)
    at areSignaturesCompatible (react-hot-loader.development.js:2585)
    at compareRegistered (react-hot-loader.development.js:2593)
    at compareComponents (react-hot-loader.development.js:2634)
    at hotComponentCompare (react-hot-loader.development.js:2725)
    at reconcileSingleElement (react-dom.development.js:15478)
    at reconcileChildFibers (react-dom.development.js:15566)
    at reconcileChildren (react-dom.development.js:18076)
    at updateForwardRef (react-dom.development.js:18142)
    at beginWork$1 (react-dom.development.js:20185)
    at beginWork$$1 (react-dom.development.js:25713)
    at performUnitOfWork (react-dom.development.js:24661)
    at workLoopSync (react-dom.development.js:24637)
    at performSyncWorkOnRoot (react-dom.development.js:24236)
    at react-dom.development.js:12181
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12131)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12176)
    at flushSyncCallbackQueue (react-dom.development.js:12164)
    at Object.batchedUpdates$1 [as unstable_batchedUpdates] (react-dom.development.js:24358)
    at react-hot-loader.development.js:3045
    at react-hot-loader.development.js:3004 
    in WithStyles(ForwardRef(ButtonBase)) (created by Button)
    in Button (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at root.js:63)
    in Root (created by HotExportedRoot)
    in HotExportedRoot (at src/​index.js:13)
console.<computed> @ index.js:1
r @ backend.js:6
error @ react-hot-loader.development.js:294
haveEqualSignatures @ react-hot-loader.development.js:2572
areSignaturesCompatible @ react-hot-loader.development.js:2585
compareRegistered @ react-hot-loader.development.js:2593
compareComponents @ react-hot-loader.development.js:2634
hotComponentCompare @ react-hot-loader.development.js:2725
reconcileSingleElement @ react-dom.development.js:15478
reconcileChildFibers @ react-dom.development.js:15566
reconcileChildren @ react-dom.development.js:18076
updateForwardRef @ react-dom.development.js:18142
beginWork$1 @ react-dom.development.js:20185
beginWork$$1 @ react-dom.development.js:25713
performUnitOfWork @ react-dom.development.js:24661
workLoopSync @ react-dom.development.js:24637
performSyncWorkOnRoot @ react-dom.development.js:24236
(anonymous) @ react-dom.development.js:12181
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12131
flushSyncCallbackQueueImpl @ react-dom.development.js:12176
flushSyncCallbackQueue @ react-dom.development.js:12164
batchedUpdates$1 @ react-dom.development.js:24358
(anonymous) @ react-hot-loader.development.js:3045
(anonymous) @ react-hot-loader.development.js:3004
Promise.then (async)
add @ react-hot-loader.development.js:3003
deepUpdate @ react-hot-loader.development.js:3061
Promise.then (async)
updateInstances @ react-hot-loader.development.js:3099
(anonymous) @ react-hot-loader.development.js:3113
hotSetStatus @ bootstrap:267
hotApply @ bootstrap:652
(anonymous) @ bootstrap:363
Promise.then (async)
hotUpdateDownloaded @ bootstrap:362
hotAddUpdateChunk @ bootstrap:338
webpackHotUpdateCallback @ bootstrap:57
(anonymous) @ main.8412d1476c90ae4f6932.hot-update.js:1

Expected Behavior 🤔

There should be no error in the console when hot reloading

Steps to Reproduce 🕹

// Dependencies
import React from "react";
import { hot } from "react-hot-loader/root";
import Button from "@material-ui/core/Button";
import DeleteIcon from "@material-ui/icons/Delete";

const Root = () => {
    return (<div>
        <Button variant="contained" startIcon={<DeleteIcon />}>
            Just change this text and save and hot reloading will throw the error!!!
        </Button>
    </div>);
};

export default hot(Root);

Your Environment 🌎

{
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 explorer version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      "last 1 chrome version",
      "last 1 explorer version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "@testing-library/jest-dom": "^5.0.0",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.3",
    "ramda": "^0.26.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-intl": "^3.11.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "name": "material",
  "private": true,
  "scripts": {
    "build": "craco build",
    "eject": "craco eject",
    "start": "craco start",
    "test": "craco test"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@craco/craco": "^5.6.3",
    "@hot-loader/react-dom": "^16.11.0",
    "handlebars": "^4.7.2",
    "react-hot-loader": "^4.12.18"
  }
}

[eps1lon]

We don't have the bandwidth to debug issues with react-hot-loader. Could you open an issue in react-hot-loader? I think they have more insights into the cause. Knowing what the issue is would help a lot.

[BerndWessels]

@eps1lon Yes will do, but hope somebody reading this issue here can find a solution.

material-ui like basically every other react library is pretty much useless and a no go without hot reloading.

I will have a bit of debugging too but am not an expert in the guts of material-ui ;)

[theKashey]

The problem is definitely bound to React-Hot-Loader babel plugin, which references useRippleHandler, which is not in the _scope_ by a some reason.
We need to find that reason.

[eps1lon]

Handing this of to react-hot-loader. Seems not actionable for us. Thanks @theKashey looking into this so quickly.