sql-wasm.wasm file is not getting loaded correctly when invoked as a web worker
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.7k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
Overview
The responding sql-wasm.wasm file requested by worker.sql-wasm.js doesn't get served correctly and thus leads to a 404 error. I am not sure if that is a bug which is native to next.js though and thus opened an issue there as well. I spend the last two to three days looking into lots of similar issues on github, but none seems to be a viable solution.
Description
I try to invoke a web-worker in one of my pages like this:
/** Add your relevant code here for the issue to reproduce */
export default function Home() {
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>
</>
);
}
(Please see my reproduction of the problem at Stackblitz)
When doing so I get served a 404 error as the sql-wasm.wasm file can't be find inside the build directory i.e. http://localhost:3000/_next/static/chunks/sql-wasm.wasm.
Question
Is this error due to the nature of the locateFile() function of emscripten or due to a mistake in how I configured the corresponding next.config.js file?
/** @type {import("next").NextConfig} */
const config = {
reactStrictMode: true,
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
if (!isServer) {
config.resolve.fallback.fs = false;
}
return config;
},
};
module.exports = config;
ANY help is much appreciated!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the StackBlitz reproduction and inspect worker.sql-wasm.js, next.config.js, and the reported Next.js issue. Trace the request for sql-wasm.wasm when the web worker starts; done means the worker loads the WASM file without the reported 404.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, sqlite, wasm
- Domain
- database, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100