ReferenceError: $RefreshReg$ 未定义

如何解决ReferenceError: $RefreshReg$ 未定义

在基于 CRA 的 React 应用程序中，当我导入也由普通应用程序代码（普通 === 非工人）导入的文件并使用调试模式下的 babel 开发服务器。

搜索此错误将我带到各种特定于模块的问题报告/解决方案，但是我无法使用这些报告/解决方案。但很明显，这是一个 React 热重载问题，我想知道如何解决它，因为它使我无法在网络工作者中也使用我的应用程序代码。

我的开发依赖项是：

    "devDependencies": {
        "@babel/core": "^7.12.10","@babel/preset-env": "^7.11.11","@babel/preset-typescript": "^7.12.7","@testing-library/react": "^11.2.3","@types/classnames": "^2.2.11","@types/color": "^3.0.1","@types/d3": "^6.2.0","@types/history": "4.7.8","@types/jest": "^26.0.20","@types/lodash": "^4.14.168","@types/node": "^14.14.22","@types/react": "^17.0.0","@types/react-dom": "^17.0.0","@types/react-test-renderer": "^17.0.0","@types/react-window": "^1.8.2","@types/resize-observer-browser": "^0.1.5","@types/selenium-webdriver": "^4.0.11","@types/topojson": "^3.2.2","@types/uuid": "^8.3.0","@types/ws": "^7.4.0","@typescript-eslint/eslint-plugin-tslint": "^4.14.0","acorn": "^8.0.5","antlr4ts-cli": "^0.5.0-alpha.4","eslint": "^7.18.0","eslint-plugin-flowtype": "^5.2.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsdoc": "^31.3.3","eslint-plugin-jsx-a11y": "^6.4.1","eslint-plugin-prefer-arrow": "^1.2.2","eslint-plugin-react": "^7.22.0","eslint-plugin-react-hooks": "^4.2.0","identity-obj-proxy": "^3.0.0","jest": "26.6.0","jest-transform-stub": "^2.0.0","jest-websocket-mock": "^2.2.0","mock-socket": "^9.0.3","monaco-editor-webpack-plugin": "^1.9.1","monaco-typescript": "^4.2.0","raw-loader": "^4.0.2","react-app-rewired": "^2.1.8","react-scripts": "^4.0.3","react-test-renderer": "^17.0.1","selenium-webdriver": "^4.0.0-beta.1","ts-jest": "^26.5.2","tslint": "^6.1.3","typescript": "^4.1.3","typescript-eslint-parser": "22.0.0","webdriver-manager": "^12.1.8","webpack": "4.44.2","webpack-bundle-analyzer": "^4.4.0","worker-loader": "^3.0.8","ws": "^7.4.3"
    },

我也可以应用的唯一有希望的解决方案是：https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213，但它没有帮助。我仍然遇到同样的错误。我的网络工作者代码是：

/* eslint-disable no-restricted-globals */
/* eslint-disable no-eval */
/* eslint-disable @typescript-eslint/no-unused-vars */

(window as any).$RefreshReg$ = () => {/**/};
(window as any).$RefreshSig$ = () => () => {/**/};

import { ShellInterfacesqlEditor } from "../../supplement/ShellInterface";
import { PrivateWorker,ExecutionResultType,IConsoleWorkerData } from "./console.worker-types";

const backend = new ShellInterfacesqlEditor();
const ctx: PrivateWorker = self as any;

不幸的是，关于更改 babel 加载器配置的进一步讨论超出了我的范围，因为我自己没有配置（但是，我使用的是 react-app-rewired 来配置一些自定义加载器）。>

我还能尝试解决什么问题？

解决方法

您可以尝试使用 worker-plugin 代替 worker-loader。在尝试 worker-plugin 之前，我已经遇到同样的问题很长时间了。

,

我也在 CRA 项目中偶然发现了这个问题

我没有为 Web Worker 使用打字稿，但添加它有助于修复错误。 （顺便说一句，由于您的问题，我才找到它。谢谢！）

web.worker.js

if (process.env.NODE_ENV != 'production') {
  global.$RefreshReg$ = () => {};
  global.$RefreshSig$ = () => () => {};
}

也许如果您尝试(global as any)，它会起作用吗？

我正在做的另一件事是我只在顶部添加 import 库，并且 main 和 worker 使用的任何代码都在使用前添加了 require

例如

web.worker.js

const generateSingle = async (client) => {
  const mark = `generate for: ${client.id}`;
  performance.mark(mark);
  const { BillingReportDocument } = require('../pdf/PdfBillingReport');
  /* ... */
}

否则我会收到一个不同的错误，比如“浏览器未定义”，它与该文件中使用的 emotion/react 相关