fix(svgr): ?url query should work in bundle mode (#804)

Author: SoonIter

packages/core/src/asset/assetConfig.ts

@@ -117,10 +117,25 @@ const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
         });
         config.plugin(LibSvgrPatchPlugin.name).use(LibSvgrPatchPlugin, []);
       }
-      // 2. in bundleless, do not support queryImport
-      // remove issuer to make every svg asset is transformed by svgr-loader
-      if (!bundle) {
-        if (isUsingSvgr) {
+
+      if (isUsingSvgr) {
+        // 2. in bundle, ?url should also be set importMode to preserve
+        if (bundle) {
+          const rule = config.module
+            .rule(CHAIN_ID.RULE.SVG)
+            .oneOf(CHAIN_ID.ONE_OF.SVG_URL);
+          const originalGeneratorOptions = rule.get('generator');
+
+          const generatorOptions = isUserSetPublicPath
+            ? originalGeneratorOptions
+            : {
+                ...originalGeneratorOptions,
+                importMode: 'preserve',
+              };
+          rule.generator(generatorOptions);
+        } else {
+          // 3. in bundleless, do not support queryImport
+          // remove issuer to make every svg asset is transformed by svgr-loader
           const rule = config.module
             .rule(CHAIN_ID.RULE.SVG)
             .oneOf(CHAIN_ID.ONE_OF.SVG);

tests/integration/asset/__snapshots__/index.test.ts.snap

@@ -288,7 +288,9 @@ const SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_r
         })
     });
 const logoreact = SvgLogo;
+import logourl_namespaceObject from "./static/svg/logo.svg";
 console.log('queryImport', 'ReactComponent', logoreact);
+console.log('queryImport', 'Url', logourl_namespaceObject);
 const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 841.9 595.3",
@@ -312,7 +314,7 @@ const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_
     });
 const logo = __rslib_svgr_url__0__;
 console.log('namedImport', 'ReactComponent', logo_SvgLogo);
-console.log('default Import', 'reexport', logo);
+console.log('defaultImport', 'Url', logo);
 "
 `;
 
@@ -343,7 +345,9 @@ const SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg
         })
     });
 const logoreact = SvgLogo;
+const logourl_namespaceObject = require("./static/svg/logo.svg");
 console.log('queryImport', 'ReactComponent', logoreact);
+console.log('queryImport', 'Url', logourl_namespaceObject);
 const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 841.9 595.3",
@@ -367,7 +371,7 @@ const logo_SvgLogo = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)
     });
 const logo = require("./static/svg/logo.svg");
 console.log('namedImport', 'ReactComponent', logo_SvgLogo);
-console.log('default Import', 'reexport', logo);
+console.log('defaultImport', 'Url', logo);
 var __webpack_export_target__ = exports;
 for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
 if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {

tests/integration/asset/svgr/src/defaultImport.js

@@ -1,3 +1,3 @@
-import svgUrl from './assets/logo.svg';
+import Url from './assets/logo.svg';
 
-console.log('default Import', 'reexport', svgUrl);
+console.log('defaultImport', 'Url', Url);

tests/integration/asset/svgr/src/queryImport.js

@@ -1,3 +1,5 @@
 import ReactComponent from './assets/logo.svg?react';
+import Url from './assets/logo.svg?url';
 
 console.log('queryImport', 'ReactComponent', ReactComponent);
+console.log('queryImport', 'Url', Url);