使用 linaria 后 H5 dev 编译报错 EvalError: $RefreshReg$ is not defined in

[Howie126313]

相关平台

H5

浏览器版本: Chrome 106
使用框架: React

复现步骤

const aliasConfig = require('./aliasConfig');

const isDev = process.env.NODE_ENV === 'development';
let outputRoot = `dist/${process.env.TARO_ENV}`;
if (process.env.PKG === 'true') {
    outputRoot = 'lib/wenzhen';
}

const config = {
    projectName: 'wenzhenV5',
    date: '2022-9-29',
    designWidth: 1242,
    deviceRatio: {
        640: 2.34 / 2,
        750: 1,
        828: 1.81 / 2,
        1242: 750 / 1242
    },
    alias: aliasConfig.resolve.alias,
    sourceRoot: 'src',
    outputRoot,
    plugins: [],
    // js 压缩考虑兼容性不使用 esbuild，最低仅支持到 es6
    // jsMinimizer: 'esbuild',
    // esbuild: {
    //     minify: {
    //         enable: true,
    //         config: {
    //             // 配置项同 https://github.com/privatenumber/esbuild-loader#minifyplugin
    //             target: 'es5' // target 默认值为 es5
    //         }
    //     }
    // },
    defineConstants: {},
    copy: {
        patterns: [],
        options: {}
    },
    framework: 'react',
    compiler: {
        type: 'webpack5',
        prebundle: {
            enable: false,
            timings: true,
            exclude: [
                '@baidu/wz-taro-tools-core',
                '@searchfe/user-agent',
                '@tarojs/taro', 
               '@linaria/react',
                '@tarojs/plugin-framework-react/dist/runtime'
            ]
        }
    },
    cache: {
        enable: true // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
    },
    mini: {
        postcss: {
            pxtransform: {
                enable: true,
                config: {}
            },
            url: {
                enable: true,
                config: {
                    limit: 10240 // 设定转换尺寸上限
                }
            },
            cssModules: {
                enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
                config: {
                    namingPattern: 'module', // 转换模式，取值为 global/module
                    generateScopedName: '[name]__[local]___[hash:base64:5]'
                }
            }
        },
        miniCssExtractPluginOption: {
            ignoreOrder: true
        },
        webpackChain(chain) {
            chain.module
                .rule('script')
                .use('linariaLoader')
                .loader('@linaria/webpack-loader')
                .options({
                    sourceMap: process.env.NODE_ENV !== 'production'
                });
            chain.merge({
                output: {
                    chunkLoadingGlobal: 'webpackJsonpInWenzhen'
                }
            });
        }
    },
    h5: {
        publicPath: '/',
        staticDirectory: 'static',
        postcss: {
            autoprefixer: {
                enable: true,
                config: {}
            },
            cssModules: {
                enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
                config: {
                    namingPattern: 'module', // 转换模式，取值为 global/module
                    generateScopedName: '[name]__[local]___[hash:base64:5]'
                }
            }
        },
        esnextModules: ['@baidu/med-styles', '@baidu/wz-taro-tools-core', '@baidu/health-ui'],
        router: {
            mode: 'browser',
            basename: '/wenzhen'
        },
        webpackChain(chain) {
            chain.module
                .rule('script')
                .use('linariaLoader')
                .loader('@linaria/webpack-loader')
                .options({
                    sourceMap: process.env.NODE_ENV !== 'production'
                });
        },
        enableSourceMap: true, // 默认为 dev 为 true build 为 false
        sourceMapType: 'hidden-source-map' // 默认为: cheap-module-source-map
    }
};

module.exports = function (merge) {
    if (isDev) {
        return merge({}, config, require('./dev'));
    }

    return merge({}, config, require('./prod'));
};

$ yarn dev:h5
在手白小程序中没有问题

期望结果

解决报错正常使用

实际结果

h5 环境报错无法编译成功，百度小程序正常

环境信息

taro info
👽 Taro v3.5.6


  Taro CLI 3.5.6 environment info:
    System:
      OS: macOS 12.6
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
      npm: 8.19.2 - ~/.nvm/versions/node/v16.17.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.5.7 => 3.5.7 
      @tarojs/components: 3.5.7 => 3.5.7 
      @tarojs/helper: 3.5.7 => 3.5.7 
      @tarojs/plugin-framework-react: 3.5.7 => 3.5.7 
      @tarojs/plugin-platform-alipay: 3.5.7 => 3.5.7 
      @tarojs/plugin-platform-jd: 3.5.7 => 3.5.7 
      @tarojs/plugin-platform-qq: 3.5.7 => 3.5.7 
      @tarojs/plugin-platform-swan: 3.5.7 => 3.5.7 
      @tarojs/plugin-platform-tt: 3.5.7 => 3.5.7 
      @tarojs/plugin-platform-weapp: 3.5.7 => 3.5.7 
      @tarojs/react: 3.5.7 => 3.5.7 
      @tarojs/router: 3.5.7 => 3.5.7 
      @tarojs/runtime: 3.5.7 => 3.5.7 
      @tarojs/shared: 3.5.7 => 3.5.7 
      @tarojs/taro: 3.5.7 => 3.5.7 
      @tarojs/taro-h5: 3.5.7 => 3.5.7 
      @tarojs/webpack5-runner: 3.5.7 => 3.5.7 
      babel-preset-taro: 3.5.7 => 3.5.7 
      eslint-config-taro: 3.5.7 => 3.5.7 
      react: ^18.2.0 => 18.2.0 

[ZakaryCode]

Duplicate of #12685

[Howie126313]

#12685

跟 RefreshSig 不是一个问题，版本回退到 3.5.6 也会有这个问题。。。。

[SidneyLann]

3.6.13还是有这个问题.

Module build failed (from ./node_modules/@linaria/webpack5-loader/lib/index.js):
EvalError: $RefreshReg$ is not defined in

[SidneyLann]

  hot: false, 加这个才行

[mzvast]

  hot: false, 加这个才行

请问这个加哪里？加了之后解决了吗？

[mzvast]

加在babel.config.js里，如下：

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
     hot:false // +++++++
    }],
    '@linaria', // 添加到 babel-preset
  ]
}