fiatjaf / jq-web

jq in the browser with emscripten.

Home Page:https://jq.alhur.es/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This dependency was not found: fs

zombor opened this issue · comments

Hello-

I'm trying to use this in my Vue.js app, but when I import like:

import jq from 'jq-web';

I get this error:

ERROR  Failed to compile with 1 errors

This dependency was not found:

* fs in ./node_modules/jq-web/jq.min.js

To install it, you can run: npm install --save fs

I think this is because fs is not available in a browser window. I already have fs in my package.json file and saved to node_modules.

Should I be doing something else instead? The same thing happens if I use require.

Adding:

node: {
  fs: 'empty'
},

to my webpack config seems to make the error go away.

I believe the emscripten runtime will try requireing fs but if it is not there then it will use the in-memory filesystem. On Browserify I believe there's a default empty fs, so I've never saw that error.

Thank you for solving the problem for Webpack users. I should add this to the usage instructions.


Ok, I've added a note about it, but I don't actually know anything about Webpack, so I've linked to this issue: aaf5996 (if you think this should be improved somehow, please let me know or send a PR).

For anyone else, like me, hitting this error from inside NextJS (which uses Webpack 5 by default), I was able to fix it by following this comment, and putting the relevent configuration in my next.config.js: vercel/next.js#7755 (comment)

Thanks! :)

On webpack 5, this package tries to load a few node dependencies:

  • crypto
  • path
  • fs

Do you know whether excluding crypto, for example, could cause issues?

For people that use CRA (create react app), resulting in a v5 React project that uses react-scripts to run and build your app - the lack of polyfilled fs and path modules will cause issues for you.

To get around this, you can use react-app-rewired to run and build your project, which will allow you to create a config-overrides.js file, and supply fallback configuration like so:

module.exports = function override (config, env) {
    let loaders = config.resolve
    loaders.fallback = {
        "fs": false,
        "path": require.resolve("path-browserify"),
    }
    return config
}

And then when running you're app, just replace the original react-scripts reference:

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}