How to load @imagemagic/magick-wasm dist/mjs module in a Next.js app?

[lancejpollard]

I am getting this on v0.28 of magick-wasm:

./node_modules/.pnpm/@[email protected]/node_modules/@imagemagick/magick-wasm/dist/magick.wasm_.loader.mjs:1:0
Module not found: Can't resolve 'a'
> 1 | import { a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, _, $, aa, ba, ca, da, ea, fa, ga, ha, ia, ja, ka, la, ma, na, oa, pa, qa, ra, sa, ta, ua, va, wa, xa, ya, za, Aa, Ba, Ca, Da, Ea, Fa, Ga, Ha, Ia, Ja, Ka } from "a";

Is there a way we could bundle a lower-level .js file instead of the mjs in the dist? Something without import and export statements? I also had this problem with the pdfjs library. I'm not sure yet how to get Next.js to compile/transpile mjs files from external packages, so will reach out to them as well. But if you have any thoughts here, I'm all ears, would really like to see this running again.

[lancejpollard]

I forgot I can't try and figure out how to build it myself :(

npm ERR! code E401
npm ERR! 401 Unauthorized - GET https://npm.pkg.github.com/download/@dlemstra/magick-native/0.202401.211644/e0461179a3b8940cc63cdde6fac732304f125bc2 - authentication token not provided

npm ERR! A complete log of this run can be found in: /Users/lancepollard/.npm/_logs/2024-02-02T15_45_18_476Z-debug-0.log

Can you make that package available so I can try and create a new build por favor? :)

[dlemstra]

You will need to add a GITHUB_TOKEN to your npmrc because that package is stored in GitHUb packages.

[gregbenz]

@dlemstra Do you have an example of how to set that up properly? I'm struggling to find documentation and the following approach is throwing permission errors:

• git clone https://github.com/dlemstra/magick-wasm
• cd magick-wasm
• Generate a "Fine-grained personal access tokens" via https://github.com/settings/tokens?type=beta using "Public Repositories (read-only)" (no other account permissions set)
• edit the downloaded .npmrc file to add a new top line:
  //npm.pkg.github.com/:_authToken=github_pat_11APP.....
@dlemstra:registry=https://npm.pkg.github.com
• npm install

Terminal errors after the npm install command:

npm ERR! code E403
npm ERR! 403 403 Forbidden - GET https://npm.pkg.github.com/download/@dlemstra/magick-native/2024.1006.2012/94ccf31c417d1b15a70d51d9f30f54b58601e5ad - Permission permission_denied: The token provided does not match expected scopes.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

[dlemstra]

The instructions are written here: https://github.com/dlemstra/magick-wasm/blob/main/CONTRIBUTING.md

[gregbenz]

@dlemstra Thank you! Using a classic token (https://github.com/settings/tokens) with read:packages scope worked.