使用craco的React-hot-loader

Question

我一直在尝试让react- have在我的项目中工作，并根据package readme中的说明进行了设置。主要的区别是我在这个项目中使用了craco，所以步骤1意味着我已经添加了

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

到我的craco.config.js。

我的根组件被标记为热导出：

// ...
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);

我的index.js中有import 'react-hot-loader'; first

最后，我使用以下yarn命令安装了@hot-loader/react-dom：yarn add react-dom@npm:@hot-loader/react-dom

我目前在编译或浏览器控制台中没有收到任何警告/错误。但是，当我刷新页面或手动尝试通过写入url转到任何子页面时，我会丢失所有状态。

有人知道丢了什么吗？

Answer 1

你还需要devDependencies上的craco-plugin-react-hot-reload和更多的插件，解析craco.config.js上的配置，这里是我的。

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,
                    }),
                ],
            },
        }),
    },
}