react-dom.development.js:26962 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/src/assets/illustrations/error.svg?react') is not a valid name.

[jwalkerinterpres]

Current Behavior

I have a Typescript/Vite/Vite-SVGR code base, which was working successfully. However, when I tried to update it to the latest version (following all of the instructions), I ran into a series of errors, the most recent of which has me stumped:

react-dom.development.js:26962 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/src/assets/illustrations/error.svg?react') is not a valid name.

I'm not sure what I might be doing to cause this error, as I do have both the vite and and plug-in types included in my tsconfig.json (and that was the only possible cause of this error that I could find):

"compilerOptions": {
    "types": [
      "node",
      "vite/client",
      "vitest/globals",
      "vite-plugin-svgr/client"
    ]

Expected Behavior

Ideally either I wouldn't get this error, or I'd at least get a more helpful error message.

GitHub Repo

No response

Steps to Reproduce

1. Update an existing codebase (with 400+ SVG imports) to the latest version of react-svgr
2. Get this error

(There's undoubtedly a step 1.5, "have something in your environment which is to blame" ... but I have no idea what it is.)

Nx Report

$ npx nx report

    NX   The current directory isn't part of an Nx workspace.
    To create a workspace run:
    npx create-nx-workspace@latest <workspace name>

    To add Nx to an existing workspace with a workspace-specific nx.json, run:
    npx nx@latest init

Since I have no idea what NX is, what side effects creating a new workspace or adding an existing one might have, etc. I stopped at this point

Failure Logs

The above error occurred in the </src/assets/illustrations/error.svg?react> component:

    at /src/assets/illustrations/error.svg?react
    at div
    at ErrorMessage (http://localhost:8080/src/shared/utils/ErrorBoundary/ErrorMessage.tsx:19:32)
    at ErrorBoundary (http://localhost:8080/node_modules/.vite/deps/react-error-boundary.js?v=f7b44e51:18:5)
    at ErrorBoundary (http://localhost:8080/src/shared/utils/ErrorBoundary/ErrorBoundary.tsx:23:3)
    at Notifications (http://localhost:8080/node_modules/.vite/deps/reablocks.js?v=f7b44e51:16851:3)
    at _a (http://localhost:8080/node_modules/.vite/deps/react-helmet-async.js?v=f7b44e51:550:5)
    at ApolloProvider (http://localhost:8080/node_modules/.vite/deps/@apollo_client.js?v=f7b44e51:155:19)
    at ApolloProvider (http://localhost:8080/src/core/Apollo/ApolloProvider.tsx:45:34)
    at QueryParamProviderInner (http://localhost:8080/node_modules/.vite/deps/use-query-params.js?v=f7b44e51:740:3)
    at ReactRouter6Adapter (http://localhost:8080/node_modules/.vite/deps/use-query-params_adapters_react-router-6.js?v=f7b44e51:19:3)
    at QueryParamProvider (http://localhost:8080/node_modules/.vite/deps/use-query-params.js?v=f7b44e51:759:3)
    at Router (http://localhost:8080/node_modules/.vite/deps/chunk-L73YDVNM.js?v=f7b44e51:4094:15)
    at BrowserRouter (http://localhost:8080/node_modules/.vite/deps/chunk-OVD46YZU.js?v=f7b44e51:517:5)
    at we (http://localhost:8080/node_modules/.vite/deps/react-use-intercom.js?v=f7b44e51:92:24)
    at ThemeProvider (http://localhost:8080/node_modules/.vite/deps/reablocks.js?v=f7b44e51:9680:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18704
update.callback @ react-dom.development.js:18737
callCallback @ react-dom.development.js:15036
commitUpdateQueue @ react-dom.development.js:15057
commitLayoutEffectOnFiber @ react-dom.development.js:23430
commitLayoutMountEffects_complete @ react-dom.development.js:24727
commitLayoutEffects_begin @ react-dom.development.js:24713
commitLayoutEffects @ react-dom.development.js:24651
commitRootImpl @ react-dom.development.js:26862
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:25931
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
react-dom.development.js:26962 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/src/assets/illustrations/error.svg?react') is not a valid name.
    at createElement (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:7511:42)
    at createInstance (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:8347:28)
    at completeWork (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:16311:34)
    at completeUnitOfWork (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:19252:24)
    at performUnitOfWork (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:19234:13)
    at workLoopSync (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:19165:13)
    at renderRootSync (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:19144:15)
    at recoverFromConcurrentError (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:18764:28)
    at performConcurrentWorkOnRoot (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:18712:30)
    at workLoop (http://localhost:8080/node_modules/.vite/deps/chunk-VSTCBM7W.js?v=f7b44e51:197:42)

Package Manager Version

1.22.21

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Again, I'm sure there's something unique about my environment that's to blame, so if you could even point me in the right direction as to what I might be doing wrong to cause this, it would be greatly appreciated.

[ndcunningham]

I am not sure what your import statement looks or your vite.config but here is a small repo that displays how to load svgs as assets or as a component using vite-plugin-svgr

https://github.com/ndcunningham/nx-vite-svg