Hot update blows up when adding/removing hooks in React file

Hi,

I’m working on a legacy project and trying to hack modern React dev tool chain into the environment. I’m using webpack-hot-middleware and following the setup in this example. The basic HMR works well and I could see my changes reflected in the browser.

And my test React file looks like this:

const HelloWorld = () => {
    const [count, setCount] = React.useState(0);
    return (
        <div>
            <button onClick={() => setCount(count+1)} >plus</button>
            <div>{count}</div>
        </div>
    );
};

export default HelloWorld;

However hot update blows up when I add a hook to the react file:

const HelloWorld = () => {
    const [count, setCount] = React.useState(0);
    const [text, _] = React.useState("");
    return (
        <div>
            <button onClick={() => setCount(count+1)} >plus</button>
            <div>{count}</div>
            <div>{text}</div>
        </div>
    );
};

If I make the change and save then it will pop up this hooks error:

I’m clear of the rule of hooks and why this error would pop up in normal development. However I don’t understand why it would show up for HMR in this case. and I don’t see the error when in your example or in any other HMR repos.

It would be hard for me to duplicate my environment because of the complexity and I do apologize for that. But here is what I could tell how it’s different from the other runtime

1. React package is marked as “external” in webpack config and loaded during runtime
2. The react part runs in an Iframe.

Now that I have no clue of why I’m getting the hooks error. Do you by any chance have any clue why this is happening?

Thanks!

[pmmmwh]

I’ve been looking at this but do not have any progress yet. I believe it is likely still related to injection order and Babel processing being incorrect.

[rockcs1992]

@gaearon @pmmmwh Please take a look at the minimal example ^