Working NextJS example?

[ralphilius]

Hello,

I'm trying to run this on my NextJS project, but I got this error message:

../../node_modules/.pnpm/@[email protected]/node_modules/@imagemagick/magick-wasm/dist/magick.wasm
Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)

This is how I was trying to load the wasm:

import { initializeImageMagick } from "@imagemagick/magick-wasm";
import { useEffect, useState } from "react";

// @ts-ignore
import magickWasm from '@imagemagick/magick-wasm/magick.wasm';

export default function useImageMagick() {
  useEffect(() => {
    const init = async () => {
      await initializeImageMagick(magickWasm);
    };
    init();
  }, []);

  return {
    status
  }
}

I tried with other examples:

import { initializeImageMagick } from "@imagemagick/magick-wasm";
import magickWasm from '@imagemagick/magick-wasm/magick.wasm';
import { useEffect, useState } from "react";

export default function useImageMagick() {
  const [status, setStatus] = useState<"loading" | "ready">("loading");
  useEffect(() => {
    initializeImageMagick(new URL(magickWasm, import.meta.url)).then(() => {
      setStatus("ready");
    });
  }, []);

  return {
    status
  }
}

I've also tried to add below into my next.config.js

    config.experiments = { 
      ...config.experiments, 
      asyncWebAssembly: true,
      layers: true,  
    };

    config.module.rules.push({
      test: /\.wasm$/,
      type: "webassembly/async",
      use: ['wasm-loader'], 
    });

None of the above approaches were successful.

[dlemstra]

I have never used NextJS so I cannot help you with this. Let's hope someone who has used this library in NextJS finds this discussion and helps you.