Fail to build jimp with webpack@5 + ts-loader

[quanglam2807]

It looks like #1149 (CC @hipstersmoothie) prevents jimp to be built with webpack@5 + ts-loader. Probably, it's because jimp now supports both ESM and CJS but something is misconfigured, preventing webpack or Typescript from handling import.

Expected Behavior

Build successfully

Current Behavior

Build fails with

App threw an error during load
Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./node_modules/@jimp/core/es/index.js
    at Object.set [as exports] (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:12556:21)
    at eval (webpack-internal:///./node_modules/@jimp/core/es/index.js:1063:18)
    at Module../node_modules/@jimp/core/es/index.js (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:568:1)
    at __webpack_require__ (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:12511:42)
    at eval (webpack-internal:///./node_modules/@jimp/custom/es/index.js:5:68)
    at Module../node_modules/@jimp/custom/es/index.js (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:642:1)
    at __webpack_require__ (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:12511:42)
    at eval (webpack-internal:///./node_modules/jimp/es/index.js:5:70)
    at Module../node_modules/jimp/es/index.js (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:5255:1)
    at __webpack_require__ (/Users/quanglam2807/Documents/GitHub/photon/build/electron.js:12511:42)

Failure Information (for bugs)

It seems like #1149 confuses ts-loader on how to handle Jimp. Downgrading to https://github.com/jimp-dev/jimp/releases/tag/v0.20.2 fixes the issue.

Steps to Reproduce

Upgrading to https://github.com/jimp-dev/jimp/releases/tag/v0.21.0

Webpack config

 const config: Configuration = {
    mode,
    node: {
      global: false,
      __filename: false,
      __dirname: false,
    },
    externals,
    entry: {
      electron: path.join(electronMainSrcPath, 'index.ts'),
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: {
            // Disable type checking in dev to improve speed build by up to 10x
            transpileOnly: mode === 'development',
            compilerOptions: {
              noEmit: false,
            },
          },
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      alias: {
        '@': path.join(projectPath, 'src'),
      },
      extensions: ['.tsx', '.ts', '.js'],
    },
    target: 'electron-main',
    output: {
      path: path.join(projectPath, 'build'),
      filename: '[name].js',
    },
    devtool:
      process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'source-map',
    plugins,
  };

Usage in TS code

import Jimp from 'jimp';

const img = await Jimp.read(iconPath);

Context

• Jimp Version: 0.21.0
• Operating System: macOS & Ubuntu
• Node version: 16

[hipstersmoothie]

Oh we have a Babel plugin that adds the module exports. We should probably not do that for esm. If you want to test that that works I'll get the or merged asap

[quanglam2807]

Thanks so much, @hipstersmoothie! I can't promise but I'll try to test the change in 12-24 hours after it is available.

[marvinruder]

I am having a similar issue with the browser file, it tells me ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 1482 in the console when opening e.g. example2.html. Adding the plugin

      ["@babel/plugin-transform-modules-commonjs", {
        loose: true,
      }],

to the babel plugins helps with that problem, but since it transforms everything into CommonJS, it is probably not the right way to handle the ESM issue.

I also tried switching add-module-exports on and off as well as adding sourceType: "unambiguous", but it had no effect on the browser jimp.js (checksum was identical).

Not sure whether any of this helps with the issue in the ESM version of Jimp, just wanted to leave my findings here so that the browser version can be fixed as well soon.

[hipstersmoothie]

I'll probably fix this later today

[hipstersmoothie]

If you could provide a reproduction repo that would be great though

[marvinruder]

Sure!

[nopeless]

@hipstersmoothie next version should use vite

[hipstersmoothie]

Vite isn't actually a bundler so it doesn't really fit here. Vite uses rollup for bundling but I'm far better versed in webpack.

---

Anyways this issue should be fixed with #1153 feel free to reopen if it isn't fixed