Updating react-scripts 4 -> 5, dynamic svg loading not working

[hansfeenstra1997]

I'm updating react-scripts from version 4 to version 5. This packages includes @svgr/webpack and got updated with it.

We use a React hook which dynamically import a SVG file using !!@svgr/webpack?-svgo,+titleProp,+ref!assets/icons/${name}.svg. But now after updating the package, it won't work anymore. Then i will get the following error Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/station.03adbd6c02805d9aa10b.svg') is not a valid name..

I was looking for a solution/breaking change in the changelog but i could find a solution. Is there anybody who can tell me how to fix importing the SVG with the updated @svgr/webpack package?

[Maximillion195]

If you aren't worried about optimising with svgo and the titleProp and ref options try change the dynamic import to

!!@svgr/webpack!assets/icons/${name}.svg

Seemed to work for me.

[dima-getselectstar]

! => !! helped: !!@svgr/webpack?-svgo,+titleProp,+ref!../../icons/${name}.svg

[brickspert]

Solution: https://ryanhutzley.medium.com/dynamic-svg-imports-in-create-react-app-d6d411f6d6c6

1. change import to

const SvgComponent = (await import(`assets/icons/${name}.svg`)).ReactComponent;

2. add @svgr/webpack loader、file-loader