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.