Broken State Detected

[theKashey]

React-Hot-Loader: broken state detected, please import React-Hot-Loader before react-dom

When

This message would be displayed when ReactDOM.render does not exists.

Reason

React-Dom will import React-Hot-Loader, which will import React-Dom, which is already in the loading state, so it would return "nothing".

Fix

1. Import react-hot-loader before. For example, prepend your entry with react-hot-loader/patch
2. Set noRegister option for webpack-loader, if you are using it to patch react-dom

{
        include: /node_modules\/react-dom/,
        test: /\.jsx?$/,
        use: {
          loader: 'react-hot-loader/webpack',
          options: {
            noRegister: true,
          }
        },
}

See also

• fix(gatsby): improve hot-reloading for hooks gatsbyjs/gatsby#16146