sql-js / sql-js/sql.js

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

オープン
#521 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
JavaScript
スター
13.7k
フォーク
1.1k
PR マージ指標
30日以内にマージされた PR はありません

説明

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!

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, next.js, sqlite, wasm
領域
database, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。