Scripts: svg is no longer able to be loaded as described in the docs

[jakeparis]

Description

As of @wordpress/scripts 32.2.0, this technique for using SVG in a block no longer works and throws an error at compile/build time.

import { ReactComponent as Explode } from './explode.svg';

return (
    <Explode />
);

This technique is described in the Using SVG section in the wp-scripts docs.

Instead of working, I get the following error:
ERROR in ./src/my-block/save.js 4:0-61
Module not found: Error: Can't resolve 'url-loader' in '/Users/jparis/projects/html/wp-content/plugins/my-plugin'

Step-by-step reproduction instructions

1. in your block main directory (next to block.json) add a svg file.
2. install @wordpress/scripts@^32.2
3. In your edit.js and/or save.js, add the code :

   import { ReactComponent as Explode } from './explode.svg';
     
     return (
         <Explode />
     );
   

4. run wp-scripts build (or wp-scripts start).
5. see the error

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 7.0
• @wordpress/scripts 32.2.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[jakeparis]

i think this is related to using pnpm.

[t-hamano]

Thanks for the report.

As of @wordpress/scripts 32.2.0, this technique for using SVG in a block no longer works and throws an error at compile/build time.

In version 32.2.0, only the version number was bumped.

git diff @wordpress/scripts@32.1.0..@wordpress/scripts@32.2.0 -- packages/scripts/ ':!packages/scripts/CHANGELOG.md' > test.log

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 351e28f8605..c04fd7e20c0 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
        "name": "@wordpress/scripts",
-       "version": "32.1.0",
+       "version": "32.2.0",
        "description": "Collection of reusable scripts for WordPress development.",
        "author": "The WordPress Contributors",
        "license": "GPL-2.0-or-later",

Therefore, I believe this bug existed much earlier.

i think this is related to using pnpm.

My prediction is that pnpm will cause an error because it does not hoist url-loader. I haven't tested it, but this issue might be resolved with the following fix.

diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index 5674c78f1f8..33cf73b582b 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -220,7 +220,10 @@ const baseConfig = {
                        {
                                test: /\.svg$/,
                                issuer: /\.(j|t)sx?$/,
-                               use: [ '@svgr/webpack', 'url-loader' ],
+                               use: [
+                                       require.resolve( '@svgr/webpack' ),
+                                       require.resolve( 'url-loader' ),
+                               ],
                                type: 'javascript/auto',
                        },
                        {

[USERSATOSHI]

@t-hamano Your prediction was spot on. I tested with pnpm, require.resolve() resolves loaders from the config file's location, which bypasses pnpm's non-hoisted structure and fixes the build.

[jakeparis]

Confirming @t-hamano 's change works for me as well. Thank you! 👏