reactjs - 引用错误 : $RefreshReg$ is not defined

Question

在基于 CRA 的 React 应用程序中，当我导入也由普通应用程序代码(普通 === 非 worker )导入的文件并使用 babel dev 运行应用程序时，我在 webworker 文件(所有代码都使用 Typescript)中收到此错误服务器处于 Debug模式。
搜索此错误使我看到了各种特定于模块的问题报告/解决方案，但是我无法使用这些报告/解决方案。但很明显，这是一个 React 热重载问题，我想知道如何解决它，因为它使我无法在网络 worker 中使用我的应用程序代码。
我的开发依赖项是:

    "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 ，但这没有帮助。我仍然遇到同样的错误。我的网络 worker 代码是:

/* 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 来配置一些自定义加载器)。
我还能尝试解决什么问题？

Answer 1

你可以试试worker-plugin而不是 worker 装载机。在尝试之前，我已经遇到同样的问题很长时间 worker-plugin .