Can't resolve 'fs'

[rossjs]

I'm assuming this is an issue with Webpack decision to no longer include Node polyfills in v5, but I can no longer get the code to build.

I'm using @craco/craco (v7.0.0) in order to load the wasm and have tried manually adding polyfills to craco.config.js but fs continues to be an issue. I suppose that makes sense, since I don't know how you could polyfill that module for the browser, though apparently it was working previously with that in there?

Anyway, here's my current craco.config.js file

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  webpack: {
    plugins: [
      new NodePolyfillPlugin({
        includeAliases: ['path', 'crypto', 'stream', 'fs'],
      }),
    ],
    configure: {
      module: {
        rules: [{
          test: /\.wasm$/,
          type: 'javascript/auto',
        }],
      },
    },
  },
};

I've tried a few other workarounds but nothing's stuck. Any help would be greatly appreciated!

I'm on macOS Venture 13.2.1 and using Node.js v18.14.2

[profgarrett]

I had a similar issue. The problem is how you invoke the library.

Instead of doing,
const initSqlJs = require('sql.js');

Do the following:
// or if you are in a browser:
const initSqlJs = window.initSqlJs;

That solved my issue.

[oleghein]

@rossjs I'm facing the same problem. This will be a issue with every js bundler trying to resolve the module sql.js/dist/sql-wasm.js for a frontend application.

My current workaround is to keep the js file in index.html and out of the bundler 😞

<script src="/assets/sql-js/sql-wasm.js"></script>

in a typescript frontend application it could be used like this:

  (window as any).initSqlJs({
       // Required to load the wasm binary asynchronously.
       locateFile: () => '/assets/sql-js/sql-wasm.wasm'
  }).then((instance: any) => {
      (window as any).SQL = instance;
  });

Here is a open PR for this issue:
#539

[rossjs]

I actually ended up switching to use Vite as my bundler due to this issue and found that works. Still learning the differences between it and CRA, but it's been relatively painless so far. I'm also using the sql.js hosted wasm file for now.

import initSqlJs from 'sql.js';

const initDb = async () => {
  const SQL = await initSqlJs({ locateFile: (file) => `https://sql.js.org/dist/${file}` });
  return new SQL.Database();
};

// vite.config.js

import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    wasm(),
    react({
      // hot reload doesn't work without this ¯\_(ツ)_/¯
      include: '**/*.jsx',
    }),
    eslint(),
  ],
  // vite doesn't expose process.env and sql.js expects it
  define: {
    'process.env': {},
  },
});

[oleghein]

Thanks for sharing @rossjs ! vite.js looks really nice 👍 unfortunately, I can’t exchange the bundler in near future (and I think many developers are in the same situation) … so I keep having high hopes that this library will become compatible with webpack again some day :)

[lin-calvin]

Hey are you using esbuild? if yes, you can mark fs and path as external module(see https://esbuild.github.io/api/#external ),afterwards esbuild will ignore this error and that require will never run in a browser.

[AbdulRehman197]

you need to add fallback in resolve object in react script/config/webpack-config.js in node_module
fallback: {fs:false },

[rossjs]

It sounds like there's some some paths forward by updating the webpack config or switching to vite. It also seems like CRA is only getting the absolute bare minimum of support these days and isn't a great path forward long term so I'm going to go ahead and close out this issue. Feel free to open up a new one if you think it warrants it.

Thanks for all the suggestions everyone!