Using sql.js with next js fails

[martonlanga]

Bug report

Describe the bug

Trying to use sql.js in a nextjs project throws an error, while trying to initialize the module.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. npx create-next-app next-sql.js
2. cd next-sql.js/
3. npm i sql.js
4. Inside pages/index.js:

import initSQL from "sql.js";

const Page = () => {
  console.log(initSQL);
  console.log(initSQL());
  initSQL().then(SQL => {
    console.log(SQL);
    const db = new SQL.Database();
    console.log(db);
  });

  return null;
};

export default Page;

5. npm run dev
6. See Error in Console

Expected behavior

Ability to import and use sql.js like in the example provided here.

Screenshots

Additional context

Also, without defining fs in next.config.js, sql-wasm.js throws a module not found error about the fs module.
My guess is that I should change my config settings to support wasm, but I'm not really familiar with that.

Issue in next.js repo.

[lovasoa]

This initialization function takes a configuration argument that should explain where to find the wasm file:

initSqlJs({
      locateFile: filename => `/path/to/your/assets/${filename}` 
}).then(...)

And the wasm file from the sql.js release assets should be accessible at /path/to/your/assets/

[martonlanga]

Hey, thanks for your reply!

I tried initializing with specifying locateFile, but then I'm getting this error:

I've also tried bundling the .wasm file with webpack, based on this nextjs-with-webassembly example. But then I'm getting this error:

Would this be a good approach, or importing only the sql-wasm.wasm file woudn't be enough?

[LeeRob97]

@martonlanga I noticed in your first screen shot, you had a warning about unsupported MIME type. I had to add "application/wasm" to my iis server in order for the .wasm file to be served correctly!

[martonlanga]

@LeeRob97 Yes, that was an issue but I've already added it since then.

[lovasoa]

I created a demonstration showing the usage of sql.js with an asset packer, that may be useful to people who end up here after a google search: https://github.com/sql-js/react-sqljs-demo

[subwaymatch]

Although the issue is closed, I created a working barebone example to use sql.js with Next.js v10.0.7. The example is largely based on @lovasoa 's awesome example. 👍

There are two differences compared to https://github.com/sql-js/react-sqljs-demo.

Trick 1: Webpack config (next.config.js)

My example doesn't utilize the copy-webpack-plugin to copy wasm file from /node_modules/sql.js/dist/sql-wasm.wasm. However, you do need to ignore fs module in npm when in browser context.

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    // If in client, don't use fs module in npm
    if (!isServer) {
      config.node = {
        fs: "empty",
      };
    }

    return config;
  },
};

Trick 2: Retrieve wasm file from CDN

The wasm file is retrieved from a CDN when initializing sql.js. This is to avoid having to use the copy-webpack-plugin.

// whichever component you're initializing sql.js
initSqlJs({
  // Fetch sql.js wasm file from CDN
  // This way, we don't need to deal with webpack
  locateFile: (file) =>
    `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.4.0/dist/${file}`,
})

🔥 Github Repo Link: https://github.com/subwaymatch/nextjs-with-sqljs-example
🔥 Demo Site: https://nextjs-with-sqljs-example.vercel.app/

Spend all day trying to figure out how to make it work. Even when copying said sql-wasm.wasm file outside of node_modules and directly specifying the path i.e. locateFile: () => "../assets/sql-wasm.wasm" it does not work as intended when running new SQL.Database(). When just importing from a CDN like locateFile: () => "https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.7.0/sql-wasm.wasm", it works perfectly. Could someone please point out what exactly am I missing here?