.wasm files are not served correctly and lead to a 404 error when invoked with a web-worker

[ghost]

Verify canary release

• 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 for more information).

In one of my pages (db.js) in the pages directory I currently try to implement the worker like this:

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:

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 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.

npm install sql.js

Second at a page under the page directory with the following code should be created:

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.