Closed
Description
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 clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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
- Create new Docusaurus playground
- Create a new file (
test.svg) in thedocsfolder 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>- 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.