Doesn't work in browser (requires fs)

[brandonkal]

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

[WasabiThumb]

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'

[taskbox-joe]

This is annoying as it is supposed to work for browser builds. There is a workaround for this I think when using webpack - just add an alias for fs in your webpack config that points to an empty file. I have only just built this though - I haven't tested it within the browser yet.

[TheRealFlyingCoder]

Is there any update on this bug? Same issue occurs for me as well.

The workaround suggested by @taskbox-joe doesn't work for me either... Even with FS installed as a dependency in the project.

Edit: The real workaround is adding this to your webpack.config:

node: {
    fs: "empty"
},

[MXXXXXS]

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

[kyle-jorve]

Bump. Trying to use this with a NextJS project and finding out it doesn't work client-side which is a real bummer.

[hirad]

@kyle-jorve I just got this working on NextJS client-side using @MXXXXXS's suggestion by making this change in next.config.js:

const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    if (options.isServer) {
      return config
    }
    else {
      config.resolve.fallback.fs = false
      return config
    }
  }
}

[hipstersmoothie]

With the new webpack browser bundle #1140 this should be fine now