1 files changed, 45 insertions, 28 deletions

diff --git a/src/plugins/responsiveLoaderPlugin.ts b/src/plugins/responsiveLoaderPlugin.ts
index 6334c4c..6975124 100644
--- a/src/plugins/responsiveLoaderPlugin.ts
+++ b/src/plugins/responsiveLoaderPlugin.ts
@@ -12,34 +12,51 @@ import sharp from 'responsive-loader/sharp';
 export default function responsiveLoaderPlugin(): Plugin {
   return {
     name: 'marussy-responsive-loader-plugin',
-    configureWebpack: (_config, isServer) => ({
-      mergeStrategy: {
-        'module.rules': 'prepend',
-      },
-      // Configuration based on
-      // https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
-      module: {
-        rules: [
-          {
-            test: /\.(png|jpe?g)$/,
-            resourceQuery: /[?&]rl$/,
-            use: [
-              {
-                loader: 'responsive-loader',
-                options: {
-                  adapter: sharp,
-                  format: 'webp',
-                  // See
-                  // https://github.com/facebook/docusaurus/blob/c745021b01a8b88d34e1d772278d7171ad8acdf5/packages/docusaurus-plugin-ideal-image/src/index.ts#L62-L66
-                  emitFile: !isServer,
-                  name: 'assets/images/[name].[hash:hex:7].[width].[ext]',
+    configureWebpack: (config, isServer) => {
+      const rules = config.module?.rules ?? [];
+      rules.forEach((rule) => {
+        if (
+          typeof rule === 'object' &&
+          'test' in rule &&
+          rule.test instanceof RegExp &&
+          rule.test.test('.svg') &&
+          typeof rule.oneOf?.[0] === 'object' &&
+          'use' in rule.oneOf[0]
+        ) {
+          // Skip SVGR when importing SVG files with ?url.
+          rule.oneOf[0].resourceQuery = { not: /[?&]url$/ };
+        }
+      });
+      return {
+        mergeStrategy: {
+          'module.rules': 'replace',
+        },
+        // Configuration based on
+        // https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
+        module: {
+          rules: [
+            {
+              test: /\.(png|jpe?g)$/,
+              resourceQuery: /[?&]rl$/,
+              use: [
+                {
+                  loader: 'responsive-loader',
+                  options: {
+                    adapter: sharp,
+                    format: 'webp',
+                    // See
+                    // https://github.com/facebook/docusaurus/blob/c745021b01a8b88d34e1d772278d7171ad8acdf5/packages/docusaurus-plugin-ideal-image/src/index.ts#L62-L66
+                    emitFile: !isServer,
+                    name: 'assets/images/[name].[hash:hex:7].[width].[ext]',
+                  },
                 },
-              },
-            ],
-            type: 'javascript/auto',
-          },
-        ],
-      },
-    }),
+              ],
+              type: 'javascript/auto',
+            },
+            ...rules,
+          ],
+        },
+      };
+    },
   };
 }