Try vips package as esm module

inc/functions.php

@@ -494,22 +494,29 @@ function enqueue_block_editor_assets(): void {
 	$asset['dependencies'] = $asset['dependencies'] ?? [];
 	$asset['version']      = $asset['version'] ?? '';
 
+//	wp_register_script_module(
+//		'media-experiments-vips',
+//		plugins_url( 'build/vips.js', __DIR__ ),
+//		[],
+//		$asset['version']
+//	);
+
 	wp_enqueue_script(
 		'media-experiments',
 		plugins_url( 'build/media-experiments.js', __DIR__ ),
 		$asset['dependencies'],
 		$asset['version'],
-		array(
+		[
 			'strategy' => 'defer',
-		)
+		]
 	);
 
 	wp_set_script_translations( 'media-experiments', 'media-experiments' );
 
 	wp_enqueue_style(
 		'media-experiments-editor',
 		plugins_url( 'build/media-experiments.css', __DIR__ ),
-		array( 'wp-components' ),
+		[ 'wp-components' ],
 		$asset['version']
 	);
 

packages/vips/package.json

@@ -22,7 +22,9 @@
 	"engines": {
 		"node": ">=20"
 	},
+	"type": "module",
 	"main": "dist/index.js",
+	"module": "dist/index.js",
 	"types": "dist-types/index.d.ts",
 	"source": "src/index.ts",
 	"exports": {

packages/vips/src/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import Vips from 'wasm-vips';
+import type Vips from 'wasm-vips';
 
 // @ts-expect-error
 // eslint-disable-next-line import/no-unresolved
@@ -60,6 +60,10 @@ async function getVips(): Promise< typeof Vips > {
 		return vipsInstance;
 	}
 
+	const { default: Vips } = await import(
+		/* webpackChunkName: "chunk-wasm-vips" */ 'wasm-vips'
+	);
+
 	vipsInstance = await Vips( {
 		locateFile: ( fileName: string ) => {
 			if ( fileName.endsWith( 'vips.wasm' ) ) {

webpack.config.js

@@ -6,11 +6,13 @@ const { resolve, dirname, basename } = require( 'node:path' );
 const { DefinePlugin } = require( 'webpack' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
 const { WebWorkerPlugin } = require( '@shopify/web-worker/webpack' );
+
 /**
  * WordPress dependencies
  */
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 const { hasBabelConfig, hasArgInCLI } = require( '@wordpress/scripts/utils' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 
 const isProduction = process.env.NODE_ENV === 'production';
 const hasReactFastRefresh = hasArgInCLI( '--hot' ) && ! isProduction;
@@ -30,7 +32,7 @@ const mediapipeCdnUrl = `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmenta
 const pdfJsCdnUrl = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${ pdfJsVersion }/build/pdf.worker.mjs`;
 const ffmpegCdnUrl = `https://cdn.jsdelivr.net/npm/@ffmpeg/core@${ ffmpegVersion }/dist/ffmpeg-core.js`;
 
-module.exports = {
+const regular = {
 	...defaultConfig,
 	entry: {
 		'media-experiments': resolve(
@@ -50,10 +52,6 @@ module.exports = {
 		globalObject: 'self', // This is the default, but required for @shopify/web-worker.
 	},
 	resolve: {
-		// Ensure "require" has a higher priority when matching export conditions.
-		// https://webpack.js.org/configuration/resolve/#resolveconditionnames
-		// https://github.com/kleisauke/wasm-vips/issues/50#issuecomment-1664118137
-		conditionNames: [ 'require', 'import' ],
 		extensions: [ '.jsx', '.ts', '.tsx', '...' ],
 		fallback: {
 			crypto: false,
@@ -119,8 +117,17 @@ module.exports = {
 	},
 	plugins: [
 		...defaultConfig.plugins.filter(
-			( plugin ) => ! ( plugin instanceof MiniCSSExtractPlugin )
+			( plugin ) =>
+				! ( plugin instanceof MiniCSSExtractPlugin ) &&
+				! ( plugin instanceof DependencyExtractionWebpackPlugin )
 		),
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternal( request ) {
+				if ( request === '@mexp/vips' ) {
+					return `import ${ request }`;
+				}
+			},
+		} ),
 		new WebWorkerPlugin(),
 		new MiniCSSExtractPlugin( {
 			filename: '[name].css',
@@ -178,3 +185,34 @@ module.exports = {
 		},
 	},
 };
+
+const modules = {
+	...regular,
+	entry: {
+		vips: resolve( __dirname, 'packages/vips/src/index.ts' ),
+	},
+	output: {
+		...regular.output,
+		module: true,
+	},
+	experiments: { outputModule: true },
+	plugins: [
+		...regular.plugins.filter(
+			( plugin ) =>
+				! [
+					'DependencyExtractionWebpackPlugin',
+					'WebWorkerPlugin',
+				].includes( plugin.constructor.name )
+		),
+		new DependencyExtractionWebpackPlugin( {
+			// With modules, use `requestToExternalModule`:
+			requestToExternalModule( request ) {
+				if ( request === '@mexp/vips' ) {
+					return request;
+				}
+			},
+		} ),
+	],
+};
+
+module.exports = [ regular ];