{"record":{"id":"6e2b4649f76def18","repo":"facebook/docusaurus","slug":"docusaurus-built-in-svg-rule-couldn-t-be-found-th","errorCode":null,"errorMessage":"Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.","messagePattern":"Docusaurus built-in SVG rule couldn't be found\\. The SVGR plugin can't enhance it\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/docusaurus-plugin-svgr/src/svgrLoader.ts","lineNumber":61,"sourceCode":"    ...params.svgrConfig,\n  };\n  return {\n    loader: require.resolve('@svgr/webpack'),\n    options,\n  };\n}\n\nexport function enhanceConfig(config: Configuration, params: Params): void {\n  const utils = getFileLoaderUtils(params.isServer);\n\n  const rules = config?.module?.rules as RuleSetRule[];\n\n  const existingSvgRule: RuleSetRule = (() => {\n    const rule = rules.find(\n      (r) => String(r.test) === String(utils.rules.svgs().test),\n    );\n    if (!rule) {\n      throw new Error(\n        \"Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.\",\n      );\n    }\n    return rule;\n  })();\n\n  const newSvgRule: RuleSetRule = {\n    test: /\\.svg$/i,\n    oneOf: [\n      {\n        use: [createSVGRRule(params)],\n        // We don't want to use SVGR loader for non-React source code\n        // ie we don't want to use SVGR for CSS files...\n        issuer: {\n          and: [/\\.(?:tsx?|jsx?|mdx?)$/i],\n        },\n      },\n      existingSvgRule,","sourceCodeStart":43,"sourceCodeEnd":79,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-plugin-svgr/src/svgrLoader.ts#L43-L79","documentation":"Thrown by enhanceConfig in the SVGR plugin when it cannot find Docusaurus's built-in webpack SVG rule to wrap. The plugin works by locating the existing rule (matched by String(r.test) === String(utils.rules.svgs().test)) and replacing it with a oneOf that adds @svgr/webpack for React/JSX/MDX issuers. If the rule is absent (custom webpack config removed/renamed it), enhancement cannot proceed.","triggerScenarios":"A custom webpack config in docusaurus.config (configureWebpack) that mutates/removes the default SVG rule before the SVGR plugin runs; an outdated Docusaurus core whose rule test string differs; ordering where SVGR runs before core rules are registered.","commonSituations":"Overriding module.rules in configureWebpack and dropping the SVG rule; using a forked bundler (rspack) that serializes the test differently; version mismatch between plugin-svgr and docusaurus core; manually adding svg handling that shadows the default.","solutions":["Avoid removing the default SVG rule in configureWebpack; merge rather than replace module.rules.","Ensure @docusaurus/plugin-svgr and @docusaurus/core versions are aligned (reinstall/pnpm install).","If you need custom SVG handling, keep a rule whose test matches utils.rules.svgs().test so the plugin can find it.","Move SVGR plugin registration after any rule-rewriting plugins."],"exampleFix":null,"handlingStrategy":"validation","validationCode":"const hasSvgRule = (config.module?.rules ?? []).some(r =>\n  String(r.test) === String(getFileLoaderUtils(false).rules.svgs().test));\nif (!hasSvgRule) {\n  throw new Error('Default SVG rule missing; cannot enhance with SVGR');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["In configureWebpack, merge into existing rules instead of replacing module.rules.","Keep @docusaurus/plugin-svgr and @docusaurus/core versions in lockstep.","Test custom webpack configs against the SVGR plugin in CI."],"tags":["svgr","webpack","bundler","svg"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}