Unable to Use @wordpress/icons in Sage 11 with Vite – Always Externalized, Causes Import Errors

sage
,
1

Hi all,

I’m building a theme with Sage 11 and Vite (using @roots/vite-plugin), and running into a persistent problem with the @wordpress/icons package.

Whenever I import icons like this:

import { sidesBottom } from '@wordpress/icons';

…the resulting build still contains:

import { sidesBottom as nv } from "@wordpress/icons";

Which breaks in the browser (in the editor) with:

Uncaught TypeError: Failed to resolve module specifier "@wordpress/icons". Relative references must start with either "/", "./", or "../".

From what I understand, this happens because @roots/vite-plugin always externalizes all @wordpress/* packages by default, following WordPress plugin/block development conventions.
However, this makes it impossible to actually use @wordpress/icons in a theme, since wp-icons is never enqueued as a script by WordPress for themes (and is not on window.wp either). The result is that you simply cannot use @wordpress/icons with Vite in a theme context out of the box.

Has anyone else run into this issue?
Were you able to find a solution or reliable workaround for using @wordpress/icons?
Any advice would be appreciated!

Thanks!

2

What versions of Sage and Acorn?

What version of the Vite plugin?

Where does the code you provided live?

3
  • Sage - 11
  • Acorn - 5.0
  • Vite - 6.3.5
  • @roots/vite-plugin - 1.0.6The code I provided is added locally to the resources/js/editor.jsCurrently, as workaround, I added `@wordpress/icons as dependency and modified the wordpressPlugin (where I skip the @wordpress/icons ), but I’m not sure if this is a correct way
export function wordpressPlugin() {
    return {
        name: 'wordpress-rollup-plugin',
        options(opts) {
            opts.external = (id) => id.startsWith('@wordpress/') && id !== '@wordpress/icons'; //
            opts.output = opts.output || {};
            opts.output.globals = (id) => {
                if (id.startsWith('@wordpress/')) {
                    const packageName = id.replace('@wordpress/', '');

                    return `wp.${packageName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())}`;
                }
            };

            return opts;
        },
    };
}
4

Hi there,

Ran into the same issue and opened a PR Add @wordpress/icons as exempt package by YvetteNikolov · Pull Request #22 · roots/vite-plugin · GitHub

My workaround for now is copying the raw icon SVG HTML from https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

1 Like