Repository: next.js
Issue: .wasm files are not served correctly and lead to a 404 error when invoked with a web-worker
Labels: bug,linear: next

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```
    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 20.6.0: Wed Jan 12 22:22:42 PST 2022; root:xnu-7195.141.19~2/RELEASE_X86_64
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.2.1-canary.2
      eslint-config-next: 12.1.6
      react: 18.1.0
      react-dom: 18.1.0
```

### What browser are you using? (if relevant)

Version 1.40.107 Chromium: 103.0.5060.53 (Official Build) (x86_64)

### How are you deploying your application? (if relevant)

Just tested in development yet.

### Describe the Bug

Right now I try work with the _sql.js_-library and implement a web-worker that creates a SqLite database in the browser. The library itself consists of ```.wasm``` files. Right now these files are in the ```public``` directory under a custom ```assets``` folder (i.e. ```sql-wasm.wasm``` and ```worker-sql-wasm.js``` (please see their [documentation](https://sql.js.org/#/?id=use-as-web-worker) for more information). 

In one of my pages (```db.js```) in the ```pages``` directory I currently try to implement the worker like this:
```js
const createDb = () => {
    const worker = new Worker(
        new URL("../public/assets/worker.sql-wasm.js", import.meta.url)
    );
    worker.onerror = (e) => console.log("Worker error: ", e);
};
```
When calling that function I receive following errors:
<img width="646" alt="image" src="https://user-images.githubusercontent.com/59572969/177043687-bebb7416-f548-43e6-b031-18676a93275b.png">

As the following error

```worker.sql-wasm.js:2343 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0```
 
indicates not a ```.wasm``` file, but a plain html file was served (As ```3c 21 44 4f``` reconcile to ```<DOC``` (see [this](https://github.com/WebAssembly/spec/issues/1031#issuecomment-498314525) similar issue for reference).

The file itself got served under the following url ```http://localhost:3000/_next/static/chunks/sql-wasm.wasm```.

### Expected Behavior

As both the ```.wasm``` file itself and its corresponding ```.js``` file are in the public directory I would expect the correct files to be served.

### Link to reproduction

https://stackblitz.com/edit/vercel-next-js-mmcohj?file=pages%2Findex.tsx,tsconfig.json,next.config.js

### To Reproduce

First the ```sql.js``` library needs to be installed as explained [here](https://github.com/sql-js/sql.js/#use-from-nodejs). 

```npm install sql.js```

Second at a page under the page directory with the following code should be created: 
```js
import { React } from "react";

export default function SqlJsPage() {
    const createDb = () => {
        const worker = new Worker(
            new URL("../public/assets/worker.sql-wasm.js", import.meta.url)
        );
        worker.onerror = (e) => console.log("Worker error: ", e);
    };
    return (
        <>
            <h1>Test</h1>
            <br />
            <button
                onClick={() => {
                    createDb();
                }}
            >
                Create DB
            </button>
        </>
    );
}
```
To reproduce the bug simply invoke the ```onClick()``` function.

### Update 04.07.2022

Apparently the issue just seems to be that the ```sql-wasm.wasm``` file can not be found in the chunks directory. I confirmed this through manually copying the file in there after running ```npm run dev```. If the web-worker is invoked than it is working correctly.