Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sql-wasm.wasm file is not getting loaded correctly when invoked as a web worker #521

Open
ghost opened this issue Jul 5, 2022 · 3 comments

Comments

@ghost
Copy link

ghost commented Jul 5, 2022

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!

@twoxfh
Copy link

twoxfh commented Jul 5, 2022

https://github.com/WebReflection/sqlite-worker uses sql.js under the hood and abstracts what you want to do in an easy api.

@ghost
Copy link
Author

ghost commented Jul 6, 2022

Thanks for the input, but I would like to avoid another layer of abstraction. The current worker of sql.js is (even though it's missing prepared SQL statements) definitely sufficient for what I am trying to achieve.

@sigridjineth
Copy link

hope this help you
#522

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants