@docusaurus/plugin-svgr 4.0.0-canary-6927 → 4.0.0-canary-6929

package/lib/svgrLoader.js

@@ -42,14 +42,16 @@ function createSVGRRule(params) {
     };
 }
 function enhanceConfig(config, params) {
-    const utils = (0, utils_1.getFileLoaderUtils)(params.isServer);
-    const rules = config?.module?.rules;
-    const existingSvgRule = (() => {
-        const rule = rules.find((r) => String(r.test) === String(utils.rules.svgs().test));
-        if (!rule) {
+    const utils = (0, utils_1.getAssetRuleUtils)(params.isServer);
+    const { parentRules, rule: existingSvgRule } = (() => {
+        const result = (0, utils_1.findAssetRule)({
+            rules: config?.module?.rules,
+            test: utils.rules.svgs().test,
+        });
+        if (!result) {
             throw new Error("Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.");
         }
-        return rule;
+        return result;
     })();
     const newSvgRule = {
         test: /\.svg$/i,
@@ -57,6 +59,8 @@ function enhanceConfig(config, params) {
         oneOf: [
             {
                 use: [createSVGRRule(params)],
+                // SVGR components are JS modules, not assets
+                type: 'javascript/auto',
                 // We don't want to use SVGR loader for non-React source code
                 // ie we don't want to use SVGR for CSS files...
                 issuer: {
@@ -70,6 +74,6 @@ function enhanceConfig(config, params) {
     // Adding another extra SVG rule (first or last) will not "override"
     // the default: both rules will be applied (from last to bottom) leading to
     // conflicting behavior.
-    const index = rules.indexOf(existingSvgRule);
-    rules[index] = newSvgRule;
+    const index = parentRules.indexOf(existingSvgRule);
+    parentRules[index] = newSvgRule;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-svgr",
-  "version": "4.0.0-canary-6927",
+  "version": "4.0.0-canary-6929",
   "description": "SVGR plugin for Docusaurus.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -14,17 +14,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "4.0.0-canary-6927",
-    "@docusaurus/types": "4.0.0-canary-6927",
-    "@docusaurus/utils": "4.0.0-canary-6927",
-    "@docusaurus/utils-validation": "4.0.0-canary-6927",
+    "@docusaurus/core": "4.0.0-canary-6929",
+    "@docusaurus/types": "4.0.0-canary-6929",
+    "@docusaurus/utils": "4.0.0-canary-6929",
+    "@docusaurus/utils-validation": "4.0.0-canary-6929",
     "@svgr/core": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "tslib": "^2.8.1",
     "webpack": "^5.111.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "4.0.0-canary-6927"
+    "@docusaurus/module-type-aliases": "4.0.0-canary-6929"
   },
   "peerDependencies": {
     "react": "^19.3.0",

package/src/svgrLoader.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {getFileLoaderUtils} from '@docusaurus/utils';
+import {getAssetRuleUtils, findAssetRule} from '@docusaurus/utils';
 
 import type {SVGRConfig, SVGOConfig} from './options';
 import type {Configuration, RuleSetRule} from 'webpack';
@@ -49,20 +49,19 @@ function createSVGRRule(params: Params): RuleSetRule {
 }
 
 export function enhanceConfig(config: Configuration, params: Params): void {
-  const utils = getFileLoaderUtils(params.isServer);
+  const utils = getAssetRuleUtils(params.isServer);
 
-  const rules = config?.module?.rules as RuleSetRule[];
-
-  const existingSvgRule: RuleSetRule = (() => {
-    const rule = rules.find(
-      (r) => String(r.test) === String(utils.rules.svgs().test),
-    );
-    if (!rule) {
+  const {parentRules, rule: existingSvgRule} = (() => {
+    const result = findAssetRule({
+      rules: config?.module?.rules as RuleSetRule[],
+      test: utils.rules.svgs().test,
+    });
+    if (!result) {
       throw new Error(
         "Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.",
       );
     }
-    return rule;
+    return result;
   })();
 
   const newSvgRule: RuleSetRule = {
@@ -71,6 +70,8 @@ export function enhanceConfig(config: Configuration, params: Params): void {
     oneOf: [
       {
         use: [createSVGRRule(params)],
+        // SVGR components are JS modules, not assets
+        type: 'javascript/auto',
         // We don't want to use SVGR loader for non-React source code
         // ie we don't want to use SVGR for CSS files...
         issuer: {
@@ -85,6 +86,6 @@ export function enhanceConfig(config: Configuration, params: Params): void {
   // Adding another extra SVG rule (first or last) will not "override"
   // the default: both rules will be applied (from last to bottom) leading to
   // conflicting behavior.
-  const index = rules.indexOf(existingSvgRule);
-  rules[index] = newSvgRule;
+  const index = parentRules.indexOf(existingSvgRule);
+  parentRules[index] = newSvgRule;
 }