"incorrect casing" error after upgrade to 4.1.0

[barbalex]

I have had a lot of issues since upgrading to 4.0.0.

Some were solved by reverting the include pattern to what it was before (https://github.com/pd4d10/vite-plugin-svgr/issues/91#issuecomment-1732028802).

One only turned up as error in production (might have been a warning in dev): Failed to execute 'createElement' on 'Document': The tag name provided ('/assets/101-021d24df.svg') is not a valid name.. Not sure about this one, I am not looking forward to promoting the next version of my project to production.

The one I am facing now in development is:

@react-refresh:267 Warning: </src/components/Projekte/Karte/layers/Pop/statusGroupSymbols/100.svg?react /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    at /src/components/Projekte/Karte/layers/Pop/statusGroupSymbols/100.svg?react
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at div
    at ContextMenuTrigger (http://localhost:5173/src/modules/react-contextmenu/ContextMenuTrigger.js:53:5)
    at Row (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at div
    at Pop (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at PopFolder (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at ApFolders (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at div
    at Aps (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at Ap (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at ProjektNode (http://localhost:5173/src/components/Projekte/TreeContainer/Tree/Root/Projekt/index.jsx?t=1698308651647:21:3)
    at TreeRoot (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at TreeComponent (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at Suspense
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at ErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-error-boundary.js?v=082e3f10:18:5)
    at MyErrorBoundary (http://localhost:5173/src/components/shared/ErrorBoundary.jsx:192:3)
    at TreeContainer (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at Suspense
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at div
    at Pane2 (http://localhost:5173/node_modules/.vite/deps/react-split-pane.js?v=082e3f10:1782:5)
    at div
    at SplitPane2 (http://localhost:5173/node_modules/.vite/deps/react-split-pane.js?v=082e3f10:1913:5)
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at ProjektContainer (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at Projekte (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3405:5)
    at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3728:26)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at ProtectedRoute (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3405:5)
    at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3728:26)
    at Suspense
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-M4JZEDWM.js?v=082e3f10:1545:45
    at AppBarComponent (http://localhost:5173/node_modules/.vite/deps/mobx-react-lite.js?v=082e3f10:284:12)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3405:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3365:5)
    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:4376:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:3735:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=082e3f10:4249:5)
    at RouterComponent
    at Suspense
    at SnackbarProvider2 (http://localhost:5173/node_modules/.vite/deps/notistack.js?v=082e3f10:1245:24)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/chunk-NZHYSJQ4.js?v=082e3f10:3087:5)
    at ThemeProvider2 (http://localhost:5173/node_modules/.vite/deps/chunk-NZHYSJQ4.js?v=082e3f10:3146:5)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/@mui_material_styles.js?v=082e3f10:296:12)
    at StyledEngineProvider (http://localhost:5173/node_modules/.vite/deps/chunk-NZHYSJQ4.js?v=082e3f10:943:5)
    at QueryClientProvider (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-query.js?v=082e3f10:2715:3)
    at ApolloProvider (http://localhost:5173/node_modules/.vite/deps/@apollo_client.js?v=082e3f10:5697:19)
    at App

What baffles me is that this only happens in one file. Dozens of other files import svg without issues (in development...).

If I use

import TpopSvg100 from '../../Karte/layers/Tpop/statusGroupSymbols/100.svg'

instead of

import TpopSvg100 from '../../Karte/layers/Tpop/statusGroupSymbols/100.svg?react'

this does not happen.

I am not feeling good with the state of importing svg's using vite right now. Appending ?react in some imports but not in others just to circumvent weird errors seems way too hacky to me.

I am developing on Windows 11 which could influence casing issues.

[trungpham71198]

I was able to address the precise issue you were facing.

vite.config.ts

import TpopSvg100 from '../../Karte/layers/Tpop/statusGroupSymbols/100.svg' => You may enter in this way, and it will function.

[barbalex]

Yes that works, as I wrote above (sorry for not being clear enough).

What I do not understand is why

import TpopSvg100 from '../../Karte/layers/Tpop/statusGroupSymbols/100.svg?react'

does not work.

Appending ?react seems to be the correct way to do it, so why can I do it sometimes but others it fails?

[sliptype]

fwiw I was getting this same error because my import path was wrong and the svg didn't exist at the specified path

[reknih]

I am getting a similar error after upgrading. In addition, I'm also getting errors that the library tries to create tags using the full data URL of the SVG.

Example:

index-Kj62GyH0.js:102 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11.3088%207.20354L10.689%207.28414L10.7474%207.73284L11.1919%207.8175L11.3088%207.20354ZM10.9167%2011.3334V10.7084V11.3334ZM8.83333%2011.3334V11.9584V11.3334ZM5.78068%206.33335V6.95835H6.17571L6.34522%206.60154L5.78068%206.33335ZM13.625%209.25002C13.625%207.92783%2012.6782%206.82813%2011.4258%206.58958L11.1919%207.8175C11.8657%207.94585%2012.375%208.53913%2012.375%209.25002H13.625ZM10.9167%2011.9584C12.4124%2011.9584%2013.625%2010.7458%2013.625%209.25002H12.375C12.375%2010.0554%2011.7221%2010.7084%2010.9167%2010.7084V11.9584ZM8.83333%2011.9584L10.9167%2011.9584V10.7084L8.83333%2010.7084V11.9584ZM5.5%2011.9584H8.83333V10.7084H5.5V11.9584ZM2.375%208.83335C2.375%2010.5592%203.77411%2011.9584%205.5%2011.9584V10.7084C4.46447%2010.7084%203.625%209.86889%203.625%208.83335H2.375ZM5.5%205.70835C3.77411%205.70835%202.375%207.10746%202.375%208.83335H3.625C3.625%207.79782%204.46447%206.95835%205.5%206.95835V5.70835ZM5.78068%205.70835H5.5V6.95835H5.78068V5.70835ZM6.34522%206.60154C6.71371%205.82585%207.50343%205.29169%208.41667%205.29169V4.04169C7.00291%204.04169%205.78387%204.87007%205.21614%206.06517L6.34522%206.60154ZM8.41667%205.29169C9.58069%205.29169%2010.5429%206.16011%2010.689%207.28414L11.9286%207.12294C11.7025%205.38421%2010.2169%204.04169%208.41667%204.04169V5.29169Z'%20fill='currentColor'/%3e%3c/svg%3e') is not a valid name.

This blocks our adoption of Vite 5 as the major version 3 of vite-plugin-svgr does not list it as a peerDependency.

[gabriofr]

I had the same error and solved it by removing a leftover declaration file from CRA were we handled svg's Hope it helps:

declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}