magick-wasm exports invalid module-type file

[iambumblehead]

magick-wasm version

0.0.24

Description

ReferenceError [Error]: require is not defined
      at file:///[...]/@imagemagick/magick-wasm/dist/index.mjs:22:18
      at file:///[...]/@imagemagick/magick-wasm/dist/index.mjs:7298:7

index.mjs has this...

var Ut = require("fs"), jt = require("path");
pe ? ae = jt.dirname(ae) + "/" : ae = __dirname + "/", et = (t, r) => (t = St(t) ? new URL(t) : jt.normalize(t), Ut.readFileSync(t, r ? void 0 : "utf8")), dt = (t) => {

Steps to Reproduce

1. import then initialize magick-wasm from within a module-type file initializeImageMagick('@imagemagick/magick-wasm')
2. see error ReferenceError [Error]: require is not defined

Images

No response

[dlemstra]

I don't understand how you are using this project. This error must be related to how you are using this project.

[dlemstra]

Your patch feels incorrect since the ./dist/index.mjs no longer seems to be used. Maybe @Peeterush can shed some light on this since he made these changes to the build setup.

[iambumblehead]

I have contributed to this "discussion" (which should be a bug) in a helpful way. Your evasive and grouchy responses aren't great.

[dlemstra]

You consider this a bug but I would first like to hear from Peeterush why they set it up this way. And maybe you should read this discussion again to check who is writing grouchy responses?

[Peeterush]

I think most modern tools can overcome having require() in an ESM, which is probably why nobody ran into this before. But it is not right indeed.

Just giving up on ESM and removing it out right is not a very good approach of course, so I've done some more research.

The require() calls come from the Emscripten output of @dlemstra/magick-native. I've set up up Vite to ignore them, following the example of Armster15/imagemagick-wasm-builds. But now it turns out that that just keeps the require() calls in the ESM output.

While playing around with some build options to solve this, I found that Vite 4 (and up) plays differently both with build in modules as well as ws (also consuming; ws now needs to be present in your own project). I found that not ignoring them still results in a functional build with Vite 4, and properly gets rid of the require() statements!

In #121 I propose just that: not to ignore the dependencies in question. This should solve both the require() in ESM issue, as well as the need to install ws into your own project when using Vite 4.

[dlemstra]

Thanks for the research and PR @Peeterush. I will merge this and publish a new release that hopefully resolves @iambumblehead their issues.

[dlemstra]

Do you need a new release to test this @iambumblehead or do you have other methods to test this?

[dlemstra]

I will publish the release once the connectedComponents PR has been merged. But I will first give the user some some time to work on this instead of merging it and making the changes myself.

[iambumblehead]

@dlemstra thanks for letting me know the plan. I will be ready try it out whenever it may become ready in the future.

[dlemstra]

Just realized that you could do an npm run build and copy the output from the dist folder to the node_modules folder of a project where you use this library?

[iambumblehead]

@nekowinston did build the latest sources and encountered new errors #119 (comment)

[nekowinston]

Yeah, I built it locally with npm ci && npm run build && npm pack, then simply did yarn add -D path_to.tgz in my other project. NPM should be able to also add local paths to package.json.

[nekowinston]

I just ran into a similar issue when trying to use import with tsx:

file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:22
        var Ut = require("fs"), jt = require("path");
                 ^

ReferenceError: require is not defined in ES module scope, you can use import instead
    at <anonymous> (/Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:8072:980)
    at <anonymous> (/Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:8072:980)
    at new Promise (<anonymous>)
    at f.loader (/Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:8072:980)
    at f._initialize (/Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:8072:980)
    at Qu (/Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:8072:980)
    at <anonymous> (/Users/winston/Code/catppuccin/vscode-icons/scripts/catwalk.ts:14:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v18.18.2

I pulled the latest main with #121 applied, built it myself, now I'm getting past the import/require, but I run into __dirname being not defined:

file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:56
        pe ? ie = $t.dirname(ie) + "/" : ie = __dirname + "/", et = (t, r) => (t = St(t) ? new URL(t) : $t.normalize(t), jt.readFileSync(t, r ? void 0 : "utf8")), dt = (t) => {
                                              ^

ReferenceError: __dirname is not defined in ES module scope
    at file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:56:47
    at file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:7347:7
    at new Promise (<anonymous>)
    at f.loader (file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:7341:26)
    at f._initialize (file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:7363:16)
    at no (file:///Users/winston/Code/catppuccin/vscode-icons/node_modules/@imagemagick/magick-wasm/dist/index.mjs:7400:12)
    at <anonymous> (/Users/winston/Code/catppuccin/vscode-icons/scripts/catwalk.ts:14:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v18.18.2

Code to reproduce:
catwalk.ts

import { initializeImageMagick } from "@imagemagick/magick-wasm";
await initializeImageMagick();

package.json, with a local path@ e679d6d

{
  "type": "module",
  "devDependencies": {
    "@imagemagick/magick-wasm": "/Users/winston/Code/magick-wasm/imagemagick-magick-wasm-0.0.24.tgz",
    "tsx": "^3.12.7"
  }
}

$ tsx ./catwalk.ts
> results in error above

[Peeterush]

I've made a new pull request (#123), using @rollup/plugin-esm-shim. But indeed, if magick-native can export its code as ESM natively, there's no more need for back and forth conversion.

[iambumblehead]

It would be great if at least one hello-world-style unit-test would import the esm-version of magick-wasm. Changes in the previous PR failed because they had not been tested or verified by anyone.

[dlemstra]

I just published a new release that includes the patches made by Peeterush.

[iambumblehead]

locally verified: magick-wasm can be imported and the bytes file loaded using esm.

I wanted to report back several months ago but things came up and timing was not good.

[iambumblehead]

all is working well here. thank you :)