Unable to import SVG generated by Lucidchart failing with "SyntaxError: unknown file: Namespace tags are not supported by default"

[sgerace]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Using an SVG exported from Lucidchart, if I try to import the image using the CommonJS syntax or Import statement, I receive the error: "SyntaxError: unknown file: Namespace tags are not supported by default"

This appears to be an identical issue as #3689, which was resolved by #3691.

Here is the test image I have been using:

Reproducible demo

https://stackblitz.com/edit/github-rjekmw?file=docs%2Ftutorial-basics%2Ftest.svg,docs%2Fintro.md

Steps to reproduce

1. Create new Docusaurus playground
2. Create a new file (test.svg) in the docs folder and copy the following SVG contents into the file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:lucid="lucid" width="385" height="186"><g transform="translate(-388 -148)" lucid:page-tab-id="0_0"><path d="M0 0h1000v500H0z" fill="#fff"/><path d="M400 166a6 6 0 0 1 6-6h148a6 6 0 0 1 6 6v148a6 6 0 0 1-6 6H406a6 6 0 0 1-6-6z" stroke="#3a414a" stroke-width="2" fill="#fff"/><use xlink:href="#a" transform="matrix(1,0,0,1,405,165) translate(54.660493827160494 78.71527777777777)"/><path d="M561.5 240h21.12" stroke="#3a414a" fill="none"/><path d="M561.5 240.47h-.5v-.94h.5z" stroke="#3a414a" stroke-width=".05" fill="#3a414a"/><path d="M597.38 240l-14.26 4.63v-9.26z" stroke="#3a414a" fill="#3a414a"/><path d="M600 166a6 6 0 0 1 6-6h148a6 6 0 0 1 6 6v148a6 6 0 0 1-6 6H606a6 6 0 0 1-6-6z" stroke="#3a414a" stroke-width="2" fill="#fff"/><use xlink:href="#a" transform="matrix(1,0,0,1,605,165) translate(54.660493827160494 78.71527777777777)"/><defs><path d="M127-220V0H93v-220H8v-28h204v28h-85" id="b"/><path d="M100-194c63 0 86 42 84 106H49c0 40 14 67 53 68 26 1 43-12 49-29l28 8c-11 28-37 45-77 45C44 4 14-33 15-96c1-61 26-98 85-98zm52 81c6-60-76-77-97-28-3 7-6 17-6 28h103" id="c"/><path d="M141 0L90-78 38 0H4l68-98-65-92h35l48 74 47-74h35l-64 92 68 98h-35" id="d"/><path d="M59-47c-2 24 18 29 38 22v24C64 9 27 4 27-40v-127H5v-23h24l9-43h21v43h35v23H59v120" id="e"/><g id="a"><use transform="matrix(0.06172839506172839,0,0,0.06172839506172839,0,0)" xlink:href="#b"/><use transform="matrix(0.06172839506172839,0,0,0.06172839506172839,11.049382716049381,0)" xlink:href="#c"/><use transform="matrix(0.06172839506172839,0,0,0.06172839506172839,23.39506172839506,0)" xlink:href="#d"/><use transform="matrix(0.06172839506172839,0,0,0.06172839506172839,34.50617283950617,0)" xlink:href="#e"/></g></defs></g></svg>

3. Reference the image in one of the markdown files:

<img
  src={require('./tutorial-basics/test.svg').default}
  alt="Example banner" width="500"
/>

Expected behavior

SVG is loaded and displayed correctly.

Actual behavior

I receive the following error:

Module build failed (from ./node_modules/@svgr/webpack/dist/index.js):
  SyntaxError: Namespace tags are not supported by default.
  React's JSX doesn't support namespace tags.
  You can set `throwIfNamespace: false` to bypass this warning.

export default SvgTest;
    at File.buildCodeFrameError (file:///home/projects/github-rjekmw/node_modules/@babel/core/lib/transformation/file/file.js#cjs:195:12)
    at NodePath.buildCodeFrameError (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/path/index.js#cjs:116:21)
    at PluginPass.JSXNamespacedName (file:///home/projects/github-rjekmw/node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js#cjs:81:24)
    at newFn (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/visitors.js#cjs:172:14)
    at NodePath._call (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/path/context.js#cjs:49:20)
    at NodePath.call (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/path/context.js#cjs:39:18)
    at NodePath.visit (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/path/context.js#cjs:85:31)
    at TraversalContext.visitQueue (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/context.js#cjs:89:16)
    at TraversalContext.visitSingle (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/context.js#cjs:65:19)
    at TraversalContext.visit (file:///home/projects/github-rjekmw/node_modules/@babel/traverse/lib/context.js#cjs:112:19)

Your environment

• Public source code: https://stackblitz.com/edit/github-rjekmw
• Docusaurus version used: 3.5.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v18.20.3
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS (also tested on StackBlitz)

Self-service

• I'd be willing to fix this bug myself.

[slorber]

FYI Docusaurus v3.7 will have an SVGR plugin to let you fix SVGR/SVGO-related config issues on your own: #10677

I'll consider this issue fixed because technically you'll now have the escape hatches to adjust SVGR/SVGO to your own needs, or plainly disable it.

In Docusaurus v4 will likely refactor those configs to better defaults. Please help us doing so here if you have an opinion (#10679)