Title: Cannot import @wordpress/interactivity-router
Last modified: April 17, 2025

---

# Cannot import @wordpress/interactivity-router

 *  Resolved [goncalovieirafigueiredo](https://wordpress.org/support/users/goncalovieirafigueiredo/)
 * (@goncalovieirafigueiredo)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/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/](https://github.com/WordPress/wp-movies-demo/).
   My objective is to use the [@wordpress](https://wordpress.org/support/users/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:
 *     ```wp-block-code
       {	"$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:
 *     ```wp-block-code
       $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`:
 *     ```wp-block-code
       /** * 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:
 *     ```wp-block-code
       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:19Promise.thenupdateURL @ view.js:9updateSearch @ view.js:35(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:289(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:1503(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:1845element.props.<computed> @ debug.js?ver=d1aa3776a8a1b1588997:1839(anonymous) @ debug.js?ver=d1aa3776a8a1b1588997:2412
       ```
   
 * On successive clicks on different filters, I get the following error:
 *     ```wp-block-code
       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](https://wordpress.org/support/users/wordpress/)/
   interactivity and [@wordpress](https://wordpress.org/support/users/wordpress/)/
   interactivity-router as follows:
 *     ```wp-block-code
       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:
 *     ```wp-block-code
       <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:
 *     ```wp-block-code
       {  "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`:
 *     ```wp-block-code
       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](https://wordpress.org/support/users/wordpress/)/
   interactivity-router correctly?

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [lisaa1111](https://wordpress.org/support/users/lisaa1111/)
 * (@lisaa1111)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18425556)
 * Hey [@susansoaps](https://wordpress.org/support/users/susansoaps/),
   Ugh, that’s
   super frustrating — especially when it _looks_ perfect in the plugin preview 
   but then totally breaks on mobile after publishing 😩 Been there!
 * Sounds like the styling from the WPFunnel preview isn’t fully carrying over when
   the page actually goes live. Sometimes that happens if the template relies on
   plugin-specific styles that don’t apply outside the editor or if something in
   the theme overrides them.
 * One quick thing you could try: open the live page on mobile, inspect it (or just
   use responsive mode in Chrome dev tools), and check if any sections are overflowing
   or not wrapping right. You might be able to fix it with a bit of custom CSS. 
   Something like:
 * css
 * CopyEdit
 * `.wp-block-columns { flex-wrap: wrap !important; }`
 * Also — weird tip but sometimes caching plugins or minifiers can mess with layouts.
   If you’ve got anything like that running, maybe clear the cache or disable temporarily
   just to test.
 * Had a kinda similar issue when testing mobile layouts over on [woofapps.net](https://woofapps.net),
   and it turned out to be a combo of theme settings and missing mobile styles from
   the template.
 * Let me know if you want help tracking down the exact CSS — happy to take a look!
 *  Thread Starter [goncalovieirafigueiredo](https://wordpress.org/support/users/goncalovieirafigueiredo/)
 * (@goncalovieirafigueiredo)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18426269)
 * The message above doesn’t address my issue in the least.
 *  Thread Starter [goncalovieirafigueiredo](https://wordpress.org/support/users/goncalovieirafigueiredo/)
 * (@goncalovieirafigueiredo)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18426370)
 * More information that might be useful:
    - I tried both with and without the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/)
      activated, and I get the same error.
    - I tried having both `@wordpress/interactivity@^6.19.1` and `@wordpress/interactivity-
      router@^2.19.1` installed as “dependencies” in `package.json`, and having 
      only `@wordpress/interactivity@^6.22.0` installed as “dependencies”, and I
      get the same error.
    - I was testing this with WordPress 6.7.2. I’ve now updated WordPress to 6.8.0,
      and I get the same error.
 *  [luisherranz](https://wordpress.org/support/users/luisherranz/)
 * (@luisherranz)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18427087)
 * `wp-scripts` doesn’t support a custom config for webpack when using `--experimental-
   modules`. Could that be the problem?
    -  This reply was modified 11 months, 3 weeks ago by [luisherranz](https://wordpress.org/support/users/luisherranz/).
 *  Thread Starter [goncalovieirafigueiredo](https://wordpress.org/support/users/goncalovieirafigueiredo/)
 * (@goncalovieirafigueiredo)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18427295)
 * I tried removing `--config webpack.config.js` from the `wp-scripts start` command,
   but nothing changed. I think that flag was superfluous, since `wp-scripts` should
   by default use the `webpack.config.js` file in the same folder as `package.json`,
   right?
 * Either with or without `--config webpack.config.js`, I see the built block scripts
   being generated into the plugin’s `build/` folder.
 *  [luisherranz](https://wordpress.org/support/users/luisherranz/)
 * (@luisherranz)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18427365)
 * I meant removing `webpack.config.js` altogether.
 * It’s difficult to know what’s going on without having a way to reproduce it locally.
 *  Thread Starter [goncalovieirafigueiredo](https://wordpress.org/support/users/goncalovieirafigueiredo/)
 * (@goncalovieirafigueiredo)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18428203)
 * I was preparing code to share with you, stripping down our plugin to the bare
   essentials for you to test this in your local environment, when I found the issue.
   I removed all blocks except for the one that uses the Interactivity API and, 
   when I ran `npm run build`, I noticed the following error in the console:
 *     ```wp-block-code
       ERROR in external "@wordpress/interactivity-router"The target environment doesn't support 'import()' so it's not possible to use external type 'import'Error: The target environment doesn't support 'import()' so it's not possible to use external type 'import'
       ```
   
 * I hadn’t noticed the error in the middle of the output log of all our blocks 
   and other scripts.
 * This error me to discover that the issue was coming from the following property
   in `package.json`:
 *     ```wp-block-code
       {  "browserslist": [    "defaults",    "not op_mini all"  ]}
       ```
   
 * I decided to change it to:
 *     ```wp-block-code
       {  "browserslist": [    "last 2 Chrome versions",    "last 2 Firefox versions",    "last 2 Edge versions",    "last 2 Safari versions"  ]}
       ```
   
 * And now it works. Thank you for your help!
 *  [luisherranz](https://wordpress.org/support/users/luisherranz/)
 * (@luisherranz)
 * [11 months, 2 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18428716)
 * Awesome. I’m glad it’s working now 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Cannot import @wordpress/interactivity-router’ is closed to new replies.

## Tags

 * [interactivity](https://wordpress.org/support/topic-tag/interactivity/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 8 replies
 * 3 participants
 * Last reply from: [luisherranz](https://wordpress.org/support/users/luisherranz/)
 * Last activity: [11 months, 2 weeks ago](https://wordpress.org/support/topic/cannot-import-wordpress-interactivity-router/#post-18428716)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics