Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doesn't work in browser (requires fs)

See original GitHub issue

Expected Behavior

This should function in the browser. It should function here: https://www.pika.dev/npm/jimp/repl

It should be possible to include the module with webpack.

Current Behavior

@jimp/core requires mkdirp which requires fs @jimp/gif requires fs

Setting process.browser has no effect here. I should be able to build with webpack, rollup, or snowpack.

Failure Information (for bugs)

A webpack build:

ERROR in ./node_modules/@jimp/core/node_modules/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in '/home/brandon/project/node_modules/@jimp/core/node_modules/mkdirp'
 @ ./node_modules/@jimp/core/node_modules/mkdirp/index.js 2:9-22
 @ ./node_modules/@jimp/core/es/index.js
 @ ./node_modules/@jimp/custom/es/index.js
 @ ./node_modules/jimp/es/index.js
 @ ./src/slides.ts
 @ ./src/index.ts

ERROR in ./node_modules/gifwrap/src/gifutil.js
Module not found: Error: Can't resolve 'fs' in '/home/brandon/project/node_modules/gifwrap/src'
 @ ./node_modules/gifwrap/src/gifutil.js 5:11-24
 @ ./node_modules/gifwrap/src/index.js
 @ ./node_modules/@jimp/gif/es/index.js
 @ ./node_modules/@jimp/types/es/index.js
 @ ./node_modules/jimp/es/index.js

Steps to Reproduce

Context

Jimp Version: 0.13.0
Operating System: linux
Node version: v12.18.0

Failure Logs

See above

Issue Analytics

State:
Created 3 years ago
Reactions:12
Comments:6

Top GitHub Comments

12reactions

MXXXXXScommented, Sep 5, 2021

If you are using Webpack 5, try this

Disable fs resolving

  resolve: {
    fallback: {
      fs: false,
    },
  }

Add polyfill using plugin node-polyfill-webpack-plugin

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

plugins: [
  new NodePolyfillPlugin()
]

It works for me

1reaction

WasabiThumbcommented, Jul 5, 2020

Also trying to get Jimp to work in browser. Using Node v12 on Windows and I get this: Error: Cannot find module '../helpers/typeof' from '<PROJECT FOLDER>\node_modules\jimp\browser\lib'

Top Results From Across the Web

Node JS fs module inside browser - javascript - Stack Overflow

The above works fine and will show an alert: 4. But when I try the same with the fs module it won't work....

Reading and writing files and directories with the browser-fs ...

All modern browsers can read local files and directories; however, true write access, that is, more than just downloading files, ...

package.json browser fs false | The Search Engine You Control

For libsodium, adding "browser": { "fs": false }, to packages.json seems to work, but this approach doesn't work for webtorrent, so its not...

Node.js File System Module - W3Schools

The Node.js file system module allows you to work with the file system on your computer. To include the File System module, use...

Porting fs to the browser via browserify - Google Groups

Initially though, this doesn't seem to be much of an issue. I've already ported fs.writeFile, which only required porting bindings.open, write and close....