SVG imports not working

Been trying to use SVGs in the recommended CRA way, with import { ReactComponent as GoogleIcon } from "@asset/google.svg";, but I keep getting the following error:

./src/shared/assets/google.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/shared/assets/google.svg)
SyntaxError: unknown: Support for the experimental syntax 'jsx' isn't currently enabled (1:1)

I tried adding @babel/preset-react to the babel.presets field on craco.config.js, and also tried the @babel/plugin-syntax-jsx plugin, but this error keeps showing up. Even using custom webpack rules didn't seem to work (mostly breaking things even further).

Only way I can currently import SVGs is by creating components out of them, which is really bad. Is there a recommended way of resolving these imports?

Hey.. not really sure but shouldn't the assets folder be on root of the src directory ?

I have the same problem when trying to update to the newest craco version.

Correct me if I'm wrong but you should be able to do this without craco like this, which is what you said you were doing. The only difference I can see is your use of the @asset path. Instead, you could try doing ./shared/assets/google.svg, but obviously the relative path would have to be updated depending on the directory in which the file you're editing is.

Otherwise, could you explain your steps to recreate the issue? I'm not sure where @asset comes from.