Cannot import @wordpress/interactivity-router

I’m trying to use the Interactivity API on my own website, following the official example at https://github.com/WordPress/wp-movies-demo/. My objective is to use the @wordpress/interactivity-router library to update a wp/query block when the user clicks on filters, which correspond to post categories. For example, if the user clicks on the “news” <input type="radio"> filter, the wp/query block should only show posts in the “news” category, without requiring a page reload.

Here’s the block.json:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "s11/filters",
	"version": "1.0.0",
	"title": "Filters",
	"description": "Show a list of filters.",
	"supports": {
		"align": [ "wide", "full" ],
		"interactivity": true,
		"html": false
	},
	"attributes": {
		"taxonomySlug": {
			"type": "string",
			"default": ""
		}
	},
	"textdomain": "s11-blocks",
	"editorScript": "file:index.js",
	"viewScriptModule": "file:view.js",
	"style": "s11-sites-frontend"
}

Here’s a portion of the render callback:

$wrapper_attributes = get_block_wrapper_attributes(
	array(
		'class' => $classes,
	)
);

wp_interactivity_state(
	's11-interactive-query',
	array(
		'searchValue' => get_query_var( $query_var ),
	),
);

?>
<div
	<?php echo wp_kses_post( $wrapper_attributes ); ?>
	data-wp-interactive="s11-interactive-query"
	data-query-var="<?php echo esc_attr( $query_var ); ?>">
	<?php foreach ( $terms as $the_term ) : ?>
		<div class="c-filters__item">
			<input
				class="c-filters__item-input js-filter-input"
				data-wp-on--change="actions.updateSearch"
				id="<?php echo esc_attr( $the_term->slug ); ?>"
				name="filters-block-<?php echo esc_attr( $block_id ); ?>"
				type="radio"
				value="<?php echo esc_attr( $the_term->slug ); ?>"
				>
			<label
				class="c-filters__item-label"
				for="<?php echo esc_attr( $the_term->slug ); ?>"
				>
				<?php echo esc_html( $the_term->name ); ?>
			</label>
		</div>
	<?php endforeach; ?>
</div>
<?php

And here’s the view.js script, a direct copy from the official example, with an added console.log:

/**
 * WordPress dependencies.
 */
import { getElement, store } from '@wordpress/interactivity';

const updateURL = async (value) => {
	const url = new URL(window.location);
	url.searchParams.set('category_name', value);
	const { actions } = await import('@wordpress/interactivity-router');
	console.log('actions', actions);
	await actions.navigate(/${url.search}${url.hash});
};

const { state } = store('s11-interactive-query', {
	actions: {
		*updateSearch() {
			const { ref } = getElement();
			const { value } = ref;

			// Don't navigate if the search didn't really change.
			if (value === state.searchValue) {
				return;
			}

			state.searchValue = value;

			if (value === '') {
				// If the search is empty, navigate to the home page.
				const { actions } = yield import(
					'@wordpress/interactivity-router'
				);
				yield actions.navigate('/');
			} else {
				// If not, navigate to the new URL.
				yield updateURL(value);
			}
		},
	},
});

When I first click on one of the filters (the HTML elements with data-wp-on--change="actions.updateSearch"), I always get the following error on the console:

bootstrap:19 Uncaught (in promise) TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__ (bootstrap:19:1)
    at async updateURL (view.js:9:22)
    at async debug.js?ver=d1aa3776a8a1b1588997:295:19
__webpack_require__ @ bootstrap:19
Promise.then
updateURL @ view.js:9
updateSearch @ view.js:35
(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:289
(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:1503
(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:1845
element.props.<computed> @ debug.js?ver=d1aa3776a8a1b1588997:1839
(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:2412

On successive clicks on different filters, I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'navigate')
    at updateURL (view.js:11:16)
    at async debug.js?ver=d1aa3776a8a1b1588997:295:19

I’m enqueuing both @wordpress/interactivity and @wordpress/interactivity-router as follows:

class Scripts {

	/**
	 * Hook in methods.
	 */
	public function __construct() {
		add_action( 'enqueue_block_assets', array( self::class, 'enqueue_block_assets' ) );
	}
	/**
	 * Queue styles and scripts for blocks.
	 *
	 * @return void
	 */
	public static function enqueue_block_assets() {
		wp_enqueue_script_module( '@wordpress/interactivity' );
		wp_enqueue_script_module( '@wordpress/interactivity-router' );
	}
}

And on the page’s HTML, I see the following:

<script type="importmap" id="wp-importmap">
{"imports":{"@wordpress\/interactivity":"https:\/\/ff.local\/wp-includes\/js\/dist\/script-modules\/interactivity\/debug.js?ver=d1aa3776a8a1b1588997","@wordpress\/a11y":"https:\/\/ff.local\/wp-includes\/js\/dist\/script-modules\/a11y\/index.js?ver=b3a7f46c0ef4f3484886","@wordpress\/interactivity-router":"https:\/\/ff.local\/wp-includes\/js\/dist\/script-modules\/interactivity-router\/index.js?ver=4b36f376cc3aab08acca"}}
</script>
<script type="module" src="https://ff.local/wp-includes/js/dist/script-modules/interactivity/debug.js?ver=d1aa3776a8a1b1588997" id="@wordpress/interactivity-js-module"></script>
<script type="module" src="https://ff.local/wp-includes/js/dist/script-modules/interactivity-router/index.js?ver=4b36f376cc3aab08acca" id="@wordpress/interactivity-router-js-module"></script>
<script type="module" src="https://ff.local/wp-includes/js/dist/script-modules/block-library/navigation/view.js?ver=9510985aedc1f8e088f3" id="@wordpress/block-library/navigation/view-js-module"></script>

My package.json that builds the scripts includes the following:

{
  "private": true,
  "engines": {
    "node": "^v20.10.0"
  },
  "browserslist": [
    "defaults",
    "not op_mini all"
  ],
  "scripts": {
    "dev:js": "wp-scripts start --config webpack.config.js --experimental-modules --webpack-src-dir=./blocks",
    "build:js": "wp-scripts build --config webpack.config.js --experimental-modules --webpack-src-dir=./blocks"
  },
  "dependencies": {
    "@wordpress/interactivity": "^6.22.0"
  }
}

And my webpack.config.js includes the following, among other entries in toExport:

const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');

const toExport = defaultConfig;

// Other build entries pushed to the toExport array...

module.exports = toExport;

Can you help me determine why my script is no being able to import @wordpress/interactivity-router correctly?