描述bug

当我的应用尝试通过Web Worker动态导入某些内容时，请求的路径中static/js部分被重复，导致404错误。
我可以在干净安装create-react-app的typescript模板的情况下重现这个问题。
需要满足的两个主要因素是：

1. 一个web worker(我正在使用webpack 5的语法和import.meta.url)。
2. 在package.json中设置一个homepage属性。如果应用程序直接通过localhost提供服务，似乎错误的解析部分不会发生。我们的生产环境使用子域名，所以我需要homepage属性。

你是否尝试恢复依赖项？

我在干净的安装中重现了这个问题。依赖项不是问题所在。
我使用的是yarn 1.22.18。我相信使用npm也会出现同样的问题。

$ yarn --version
1.22.18

你在用户指南中搜索了哪些术语？

• webpack 5
• web worker

环境

Environment Info:

  current version of create-react-app: 5.0.1
  running from C:\Users\<my-user-name>\AppData\Local\Yarn\Data\global\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz    
  Binaries:
    Node: 14.19.0 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD        
    npm: 6.14.16 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.52)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    react-scripts: 5.0.1 => 5.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

重现问题的步骤

1. 将Web Worker添加到你的项目中，如in the webpack 5 docs所述。
2. 在Web Worker内部，使用动态import()语句从其他地方加载内容。它可以是本地模块或来自node_modules的内容。
3. 在某个地方消费web worker。
4. 你还需要在package.json中设置homepage属性才能重现这个问题。(我在可复现演示部分有更详细的信息。)

预期行为

动态导入应该有效。

实际行为

动态导入失败，出现404错误。显示网络错误。路径包括static/js/static/js,而应该是static/js。

可复现演示

1. 使用“create react app”和TypeScript模板创建一个新应用：
   yarn create react-app example-app --template typescript
2. 编辑package.json文件，添加以下两行代码：

"type": "module",
"homepage": ".",

3. 添加一个名为src/OtherModule.ts的新文件，并添加以下内容：

export const message = "Message from another module.";

4. 在src/App.tsx语句之前添加以下代码：

useEffect(() => {
    const worker = new Worker(new URL("./TestWorker.worker.ts", import.meta.url));
    worker.onmessage = (event: MessageEvent<any>) => {
        console.log(`[App] Received:`, event.data);
    };
    // The expected behaviour is for the worker to send a message in response to this one.
    // In reality, there's an error loading one of the chunks.
    worker.postMessage("abc");
  });

5. 在src/App.tsx中的从build导入的static/js/static/js中添加：

import React, { useEffect } from 'react';

6. 构建应用程序：
   static/js
7. 通过网络服务器提供x2m25n1x文件夹。
8. 访问网站并打开控制台。

预期行为：

控制台应显示App和Worker之间互相接收消息的日志输出。
x2m26n1x

实际行为：

显示网络错误。路径包括x2m27n1x,而应该是x2m28n1x。