Repository: create-react-app
Issue: Duplicate path segment error in dynamic imports in Web Worker (react-scripts 5, webpack 5)
Labels: needs triage,issue: bug report

<!--
    Please note that your issue will be fixed much faster if you spend about
    half an hour preparing it, including the exact reproduction steps and a demo.

    If you're in a hurry or don't feel confident, it's fine to report bugs with
    less details, but this makes it less likely they'll get fixed soon.

    In either case, please use this template and fill in as many fields below as you can.

    Note that we don't provide help for webpack questions after ejecting.
    You can find webpack docs at https://webpack.js.org/.
-->

### Describe the bug

When my app attempts to dynamically import something via a Web Worker, the request has the `static/js` part of the path repeated, resulting in a 404 error.

I can reproduce this with a clean install of the typescript template of create-react-app.

The two main factors required are:

1. A web worker (I'm using webpack 5's syntax with `import.meta.url`.)
2. A `homepage` attribute set in `package.json`. If the app is served directly via `localhost` it seems the faulty part of the resolution doesn't happen. Our production environment uses a subdomain, though, so I need the `homepage` attribute,

### Did you try recovering your dependencies?
I've reproduced this with a clean install. The dependencies are not an issue.

I'm using yarn 1.22.18. I believe the same problem would happen with npm.

```
$ yarn --version
1.22.18
```

### Which terms did you search for in User Guide?

* webpack 5
* web worker

### Environment

<!--
  To help identify if a problem is specific to a platform, browser, or module version, information about your environment is required.
  This enables the maintainers quickly reproduce the issue and give feedback.

  Run the following command in your React app's folder in terminal.
  Note: The result is copied to your clipboard directly.

  `npx create-react-app --info`

  Paste the output of the command in the section below.
-->

```
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
```

### Steps to reproduce

1. Add a Web Worker to your project, as described [in the webpack 5 docs](https://webpack.js.org/guides/web-workers/).
2. Within the Web Worker, use a dynamic `import()` statement to load something from elsewhere. It can be a local module or something from `node_modules`.
3. Consume the web worker somewhere.
4. You also need the `homepage` property set in `package.json` to reproduce this.

(I have fuller details below in the Reproducible demo section.)

### Expected behavior

The dynamic import should work.

### Actual behavior

The dynamic import fails with a 404 error. A network error is shown. The path includes `static/js/static/js`, where it should just be `static/js`.

### Reproducible demo

1. Make a new app using "create react app" with the TypeScript template:  
`yarn create react-app example-app --template typescript`
2. Edit the `package.json` file, adding these two lines:  
```
"type": "module",
"homepage": ".",
```
3. Add a new file called `src/OtherModule.ts` with the following content:
```
export const message = "Message from another module.";
```
4. Add a new file called `src/TestWorker.worker.ts` with the following content:
```
/* eslint no-restricted-globals: 0 */
const worker: Worker = self as any;

worker.addEventListener("message", async (event) => {
    const data = event.data;
    console.log("[Worker] Received:", data);
    // This dynamic import is put into a separate chunk by webpack.
    // In a production build, the loading of this module fails with a duplicate "static/js" in the path.
    const { message } = await import("./OtherModule");
    worker.postMessage(message);
});

export {};
```
5. Add the following code to `src/App.tsx`, just before the `return` statement:
```
  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");
  });
```
6. Add `useEffect` to the import from `'react'` in `src/App.tsx`:
```
import React, { useEffect } from 'react';
```
7. Build the app:
`yarn build`
8. Serve the `build` folder via a web server.
9. Visit the site and open the console.

**Expected behavior:**

The console should show log output of the App and the Worker receiving messages from each other.
```
[Worker] Received: abc
[App] Received: Message from another module.
```
**Actual behavior:**

A network error is shown. The path includes `static/js/static/js`, where it should just be `static/js`.

![image](https://user-images.githubusercontent.com/10090224/172224319-98cabb8b-fa64-424a-a1ac-2e5160944790.png)

```
[Worker] Received: abc
GET http://localhost/example-app/static/js/static/js/975.6b1d0bce.chunk.js
[HTTP/1.1 404 Not Found 0ms]
NetworkError: A network error occurred.
```