使用 craco 的 React-hot-loader答案

【问题标题】：React-hot-loader using craco使用 craco 的 React-hot-loader
【发布时间】：2020-08-18 18:04:06
【问题描述】：

我一直在尝试让 react-hot-loader 在我的项目中工作，并根据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);

import 'react-hot-loader'; 在我的index.js 中排在第一位

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

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

有人知道缺少什么吗？

【问题讨论】：

标签： javascript reactjs babeljs react-hot-loader

【解决方案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,
                    }),
                ],
            },
        }),
    },
}

【讨论】：