setup wasm-vips for next.js/react about wasm-vips HOT 3 CLOSED

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) => {
        // Disable evaluating of `import.meta.*` syntax
        // https://webpack.js.org/configuration/module/#moduleparserjavascriptimportmeta
        config.module.parser.javascript.importMeta = false;

        // Disable parsing of `new URL()` syntax
        // https://webpack.js.org/configuration/module/#moduleparserjavascripturl
        config.module.parser.javascript.url = false;

        // Alternatively, to bundle the CommonJS module:
        // Ensure "require" has a higher priority when matching export conditions.
        // https://webpack.js.org/configuration/resolve/#resolveconditionnames
        //config.resolve.conditionNames = ['require'];

        return config;
    }
}

module.exports = nextConfig;

/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
        return [
            {
                source: '/:path*',
                headers: [
                    {
                        key: 'Cross-Origin-Embedder-Policy',
                        value: 'require-corp'
                    },
                    {
                        key: 'Cross-Origin-Opener-Policy',
                        value: 'same-origin'
                    }
                ]
            }
        ]
    },
    webpack: (config) => {
        // Ensure "require" has a higher priority when matching export conditions.
        // https://webpack.js.org/configuration/resolve/#resolveconditionnames
        config.resolve.conditionNames = ['require'];

        return config;
    }
}

module.exports = nextConfig;

'use client';
import { useEffect } from 'react';
import Vips from 'wasm-vips';

export default function Home() {
  useEffect(() => {
    Vips({
      // Disable dynamic modules
      dynamicLibraries: [],
      // Workers needs to import the unbundled version of `vips.js`
      mainScriptUrlOrBlob: './vips.js',
      // wasm-vips is served from the public directory
      locateFile: (fileName, scriptDirectory) => fileName,
    }).then((vips) => {
      console.log('libvips version:', vips.version());
    });
  }, []);

  return (<h1>Hello wasm-vips!</h1>)
}