React-hot-loader using craco

Question

I've been trying to get react-hot-loader to work in my project and have got it setup according to the instructions in the package readme. The main difference is that I'm using craco in this project and so step 1 means I have added

    babel: {
      plugins: ["react-hot-loader/babel"],
    },

to my craco.config.js.

My root component is marked as hot-exported:

// ...
import { hot } from 'react-hot-loader/root';
// ...

function App() {
  return (
    <div>
      <Suspense fallback={loadingFB()}>
        <Provider store={userStore}>
          <ProvideAuth>
            <Router />
          </ProvideAuth>
        </Provider>
      </Suspense>
    </div>
  );
}

export default hot(App);

I've got import 'react-hot-loader'; first in my index.js

And finally I've installed @hot-loader/react-dom using the following yarn command: yarn add react-dom@npm:@hot-loader/react-dom

I am currently not getting any warning/errors on compile or in the browser console. But when I refresh the page or manually try to go to any subpage by writing it's url I loose all state.

Anyone got any idea what's missing?

Answer 1

You also need craco-plugin-react-hot-reload on devDependencies and a bit more plugin, resolve config on craco.config.js, here mine.

const TerserPlugin = require('terser-webpack-plugin')
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload')

module.exports = {
    plugins: [{
        plugin: reactHotReloadPlugin
    }],
    eslint: {
        enable: true
    },
    babel: {
        presets: [],
        plugins: [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
            ["@babel/plugin-proposal-class-properties", { "loose": true }],
            ["babel-plugin-styled-components", { "displayName": true }]
        ],
        loaderOptions: {},
        loaderOptions: (babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; }
    },
    webpack: {
        configure: webpackConfig => ({
            ...webpackConfig,
            resolve: {
                alias: {
                    'react-dom': '@hot-loader/react-dom'
                }
            },
            optimization: {
                ...webpackConfig.optimization, 
                minimize: false,
                minimizer: [
                    new TerserPlugin({
                        terserOptions: {
                            parse: {
                                ecma: 8,
                            },
                            compress: {
                                ecma: 5,
                                warnings: false,
                                comparisons: false,
                                inline: 2,
                                drop_console: false,
                            },
                            mangle: {
                                safari10: true,
                            },
                            output: {
                                ecma: 5,
                                comments: false,
                                ascii_only: true,
                            },
                        },
                        parallel: 2,
                        cache: false,
                        sourceMap: true,
                        extractComments: false,
                    }),
                ],
            },
        }),
    },
}