material-ui hot reloading broken

[BerndWessels]

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

This is rendering material-ui pretty much useless for us at the moment since hot reloading is a must in most places.

See responses here

Current Behavior 😯

When hot reloading the console throws an error:

React-Hot-Loader: error occurred while comparing hook signature ReferenceError: useRippleHandler is not defined

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]

Little bit of background: useRippleHandler is declared inside the component like

function Component() {
  function useRippleHandler() {}
  useRippleHandler();
  useRippleHandler();
}

maybe that is causing an issue?

[theKashey]

Yes, that would cause the issue, however it's expected to be fixed ages ago.
Yep, here it is:

• 045a27f#diff-181211df7401345ec0edaaebd3833e7eR221
• [Fresh] Prevent local variables from being used in the hook signature facebook/react#16060

[theKashey]

Look like "the fix" was implemented a bit different in RHL and Fresh. I'll backport tests to ensume RHL is working correctly

[theKashey]

I was not able to reproduce this bug in "real" - all my examples do not refer to the "inner" hooks, however I've managed to get a clear failure within a test, prove that applied fix works.

So - it was not that bad all this time, it was working all this time for some cases.

• version 4.12.19 has been released

[BerndWessels]

@theKashey Awesome, this fixed the issue and the error has disappeared.

I had to wipe out the complete node_modules and reinstall everything again to make it work with 4.12.19, but that might be just my machine being weird.

Anyways, it works now (tested with this repo).

Thanks so much.

[theKashey]

Ping me a few months earlier next time 🤓, it was supposed to be fixed past winter.