Fix SVG imports failing under square-bracket directories

Use URL-safe base64 encoding for image paths in virtual module IDs
to avoid issues with special characters like square brackets being
decoded by Vite's decodeURI function.

Co-authored-by: valentinpalkovic <[email protected]>

Author: Copilot

src/plugins/next-image/plugin.ts

@@ -1,6 +1,5 @@
 import fs from "node:fs";
 import { createRequire } from "node:module";
-import { decode, encode } from "node:querystring";
 import { type FilterPattern, createFilter } from "@rollup/pluginutils";
 import { imageSize } from "image-size";
 import type { NextConfigComplete } from "next/dist/server/config-shared.js";
@@ -21,10 +20,29 @@ const warnOnce = (message: string) => {
 const includePattern = /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/;
 const excludeImporterPattern = /\.(css|scss|sass)$/;
 
+// Use null byte prefix for virtual module IDs
+// Use URL-safe base64 to encode the image path to avoid issues with special characters
+// like square brackets that are decoded by decodeURI
+const virtualImagePrefix = "\0virtual:next-image:";
 const virtualImage = "virtual:next-image";
 const virtualNextImage = "virtual:next/image";
 const virtualNextLegacyImage = "virtual:next/legacy/image";
 
+// URL-safe base64 encoding/decoding functions
+function encodeBase64Url(str: string): string {
+  const base64 = Buffer.from(str).toString("base64");
+  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+function decodeBase64Url(str: string): string {
+  // Add back padding if needed
+  const padding = (4 - (str.length % 4)) % 4;
+  const withPadding = str + "=".repeat(padding);
+  // Convert URL-safe base64 back to standard base64
+  const base64 = withPadding.replace(/-/g, "+").replace(/_/g, "/");
+  return Buffer.from(base64, "base64").toString();
+}
+
 const require = createRequire(import.meta.url);
 
 export type NextImagePluginOptions = {
@@ -104,7 +122,7 @@ export function vitePluginNextImage(
       if (
         includePattern.test(source) &&
         !excludeImporterPattern.test(importer ?? "") &&
-        !importer?.startsWith(virtualImage)
+        !importer?.startsWith(virtualImagePrefix)
       ) {
         const isAbsolute = path.isAbsolute(id);
         const imagePath = importer
@@ -119,7 +137,10 @@ export function vitePluginNextImage(
           return null;
         }
 
-        return `${virtualImage}?${encode({ imagePath })}`;
+        // Use null byte prefix to embed the image path in the virtual module ID
+        // Use URL-safe base64 encoding to avoid issues with special characters like
+        // square brackets that get decoded by Vite's decodeURI
+        return `${virtualImagePrefix}${encodeBase64Url(imagePath)}`;
       }
 
       if (id === "next/image" && importer !== virtualNextImage) {
@@ -153,10 +174,10 @@ export function vitePluginNextImage(
         ).toString("utf-8");
       }
 
-      const [source, query] = id.split("?");
-
-      if (virtualImage === source) {
-        const imagePath = decode(query).imagePath as string;
+      // Handle virtual image modules with null byte prefix
+      if (id.startsWith(virtualImagePrefix)) {
+        // Decode the URL-safe base64 encoded image path
+        const imagePath = decodeBase64Url(id.slice(virtualImagePrefix.length));
 
         const nextConfig = await nextConfigResolver.promise;