Best practice for importing a package like motion as a module in a script module?

[silaskoehler]

What is the best way to use third party packages inside the view.js script modules of a custom block?
I tried to use "motion" as an script module but it doesn't work.
I use the '--experimental-modules' flag and the @wordpress/interactivity works.

This is my block:

// block.json
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
    // ...
	"supports": {
		"interactivity": true
	},
    // ...
	"render": "file:./render.php",
	"viewScriptModule": "file:./view.js"
}

// render.php
//...
wp_register_script_module(
	'motion',
	get_theme_file_uri( 'assets/vendor/motion/motion.min.js' ),
	[],
	'12.23.24',
	true
);
wp_enqueue_script_module( 'motion' );
//...

// view.js
import { store } from '@wordpress/interactivity';
import { animate } from 'motion';
//...

the script module is created correctly on the frontend...

<script type="module" src="https://xyz.local/wp-content/themes/xyz/assets/vendor/motion/motion.min.js?ver=12.23.24" id="motion-js-module"></script>

...but my module does not appear in the import map.

@wordpress/scripts give me this error:

ERROR in ./src/blocks/parallax-glider/view.js 3:0-33
Module not found: Error: Can't resolve 'motion' in '/Users/xyz/Local Sites/xyz/app/public/wp-content/themes/xyz/src/blocks/parallax-glider'

I tried to understand this article here ...
https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/
https://make.wordpress.org/core/2024/10/14/updates-to-script-modules-in-6-7/
... but unfortunately I can't get any further.

I also tried to override the DependencyExtractionWebpackPlugin in my webpack.config but that seemed too complicated to me just because I wanted to use a script module.

Is there a simple way to use a package like motion in multiple script modules (interactive blocks) without include it in every view.js file?

I'm super thankful for any help

[silaskoehler]

I'm not sure if a discussion is the right place for this question. If not, please let me know.

[luisherranz]

Indeed, the previous method would be to override the DependencyExtractionWebpackPlugin in your webpack.config.js, but I admit that it's quite complicated, especially with script modules that don't support a custom webpack.

@youknowriad is currently working on a v2 of wp-scripts (or rather @wordpress/build?) that should make this kind of configuration much simpler. He is also looking for external contributors to help him test it.

• WordPress Scripts: A vision for a v2 version #72032 (comment)

@silaskoehler, if you're still interested in making this work, please let us know and we'll try to put together a set of instructions here to make it work with wp-scripts v2.

[silaskoehler]

Sorry for the very late reply. There have been some changes in my work life and I haven't been able to follow up on this. Thank you for your help.