Skip to content

/ sql.js

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

Jump to bottom

Using sql.js with next js fails #309

Closed
martonlanga opened this issue Nov 20, 2019 · 5 comments
Closed

Using sql.js with next js fails #309

martonlanga opened this issue Nov 20, 2019 · 5 comments

Comments

@martonlanga
Copy link

@martonlanga martonlanga commented Nov 20, 2019 •
edited by lovasoa

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;
  1. npm run dev
  2. See Error in Console

Expected behavior

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

Screenshots

Mozilla-Console
Chrome-Console

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
Copy link
Member

@lovasoa lovasoa commented Nov 20, 2019

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
Copy link
Author

@martonlanga martonlanga commented Nov 26, 2019

Hey, thanks for your reply!

I tried initializing with specifying locateFile, but then I'm getting this error:
LocateFile 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:
Import Error
Would this be a good approach, or importing only the sql-wasm.wasm file woudn't be enough?
@martonlanga martonlanga mentioned this issue Nov 26, 2019
Closed
@LeeRob97
Copy link

@LeeRob97 LeeRob97 commented Nov 26, 2019

@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
Copy link
Author

@martonlanga martonlanga commented Nov 26, 2019

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

@lovasoa lovasoa commented Mar 11, 2020

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
@lovasoa @martonlanga @LeeRob97