SVGR not working

[cjnoname]

Error: Failed to execute 'createElement' on 'Document': The tag name provided ('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA2NCA2NCIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSIgYXJpYS1kZXNjcmliZWRieT0iZGVzYyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxjaXJjbGUKICAgICAgZGF0YS1uYW1lPSJsYXllcjIiCiAgICAgIGN4PSIzMiIKICAgICAgY3k9IjMyIgogICAgICByPSIzMCIKICAgICAgZmlsbD0ibm9uZSIKICAgICAgc3Ryb2tlPSIjMjAyMDIwIgogICAgICBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiCiAgICAgIHN0cm9rZS13aWR0aD0iMiIKICAgICAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogICAgPjwvY2lyY2xlPgogICAgPHBhdGgKICAgICAgZGF0YS1uYW1lPSJsYXllcjEiCiAgICAgIGZpbGw9Im5vbmUiCiAgICAgIHN0cm9rZT0iIzIwMjAyMCIKICAgICAgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIgogICAgICBzdHJva2Utd2lkdGg9IjIiCiAgICAgIGQ9Ik0yOCAyNmg0djIybS00IC4wMDhoOCIKICAgICAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogICAgPjwvcGF0aD4KICAgIDxjaXJjbGUKICAgICAgZGF0YS1uYW1lPSJsYXllcjEiCiAgICAgIGN4PSIzMSIKICAgICAgY3k9IjE5IgogICAgICByPSIyIgogICAgICBmaWxsPSJub25lIgogICAgICBzdHJva2U9IiMyMDIwMjAiCiAgICAgIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIKICAgICAgc3Ryb2tlLXdpZHRoPSIyIgogICAgICBzdHJva2UtbGluZWpvaW49InJvdW5kIgogICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICA+PC9jaXJjbGU+CiAgPC9zdmc+') is not a valid name. at createElement (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:23327:34) at createInstance (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:24484:20) at completeWork (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:35764:28) at completeUnitOfWork (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:40173:16) at performUnitOfWork (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:40145:5) at workLoopSync (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:40043:5) at renderRootSync (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:40011:7) at recoverFromConcurrentError (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:39427:20) at performConcurrentWorkOnRoot (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:39327:22) at workLoop (http://localhost:6006/static/js/vendors-node_modules_mui_icons-material_esm_Close_js-node_modules_mui_material_CssBaseline_Cs-2e0e16.iframe.bundle.js:50512:34)

I tried setup SVGR on both side (rspack config - module, rsbuild plugin), but still got this error. Please help

Thanks, CJ

[cjnoname]

We use default export (same as webpack)

config.plugins = [ pluginSvgr({ svgrOptions: { exportType: "default" } }) ];

After I added this settings, it started to proces. However, another error occurred:

× × Expected '>', got 'xmlns' │ │ ╭─[/Users/chengjia/Projects/apra-amcos-ui-library/public/images/svg/vote_star_48x48_icn.svg:2:1] │ │ 1 │ import * as React from "react"; │ │ 2 │ const SvgVoteStar48X48Icn = props => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} viewBox="0 0 48 48" {...props}>; │ │ · ───── │ │ 3 │ export default SvgVoteStar48X48Icn;

[cjnoname]

Ideally I want to share the same rspack config file between storybook and my project. It works for other loadeds, but svgr/webpack loader does not work as expected, that's why I started to look into the svgr rsbuild plugin, but again, the same settings in svgr/website should work against the storybook setup.

[fi3ework]

This is Rsbuild powered Storybook, so it's better to use Rsbuild's svgr plugin first (Rspack plugin also works though). Pleasese provide a minimal reproduction for addressing the issue. Thanks.

[cjnoname]

@fi3ework

We want to share the same Rspack configuration file across all our projects, including Storybook. Currently, the swc-loader is functioning as expected, and images/fonts are being loaded without any issues. However, the @svgr/webpack plugin is not working as intended.

Below is a minimal reproduction to demonstrate the issue. Please review it.

https://github.com/cjnoname/rsbuild-storybook

[fi3ework]

tl;dr

This will make it work.

-   config.tools!.rspack = sharedRspackConfig;

+   config.tools!.rspack = (config, { mergeConfig }) => {
+     config!.module!.rules = config!.module!.rules!.filter(rule => {
+       const svgRule = rule.test instanceof RegExp && rule.test.source.includes("svg");
+       return !svgRule;
+     });
+
+     return mergeConfig(config, sharedRspackConfig);
+   };

Why

You need to remove the built-in Rsbuild loader for .svg to make your own take effects. tools.rspack = ... will perform an merge process with Rsbuild's internal Rspack config, Rsbuild's internal svg loader will still take effect in ahead.

[fi3ework]

But this issue also makes me think: should it support Rspack projects in some simple way or make Storybook's webpack builder support Rspack as well?

[cjnoname]

But this issue also makes me think: should it support Rspack projects in some simple way or make Storybook's webpack builder support Rspack as well?

Thank you for your help and it's working fine now.

You got my point mate. I discovered this project through the Rspack website. However, I realized I needed to introduce a new package—RsBuild—to make it work, which makes me a bit confused.

At the moment, RsBuild isn't as mature as Rspack, and it would be great to offer support for Rspack users with their existing configurations, as Rspack and RsBuild are entirely different tools.

[fi3ework]

Rsbuild is absolutely mature, thousands of projects in company is built on top of Rsbuild in ByteDance even including hybrid apps.

Making a good configuration of a web app is hard even with Rspack, Rsbuild provide the best-class level app config of Rspack, and we build Storybook build for it.

[cjnoname]

Rsbuild is absolutely mature, thousands of projects in company is built on top of Rsbuild in ByteDance even including hybrid apps.

Making a good configuration of a web app is hard even with Rspack, Rsbuild provide the best-class level app config of Rspack, and we build Storybook build for it.

Actually, you all did a great job sharing these fantastic products with the public. I'm curious about the purpose behind this initiative and who made the decision to invest resources and money into developing and maintaining these products.

[fi3ework]

You could check https://rspack.dev/blog/announcing-0-1.