Cannot get ReactComponent property of the svg import in [email protected]

[steveswork]

I cannot get the ReactComponent property when I do a regular svg import. For example:
import imageSrc, {ReactComponent as Image} from './image.svg';
imageSrc would end up with a base 64 data url but the ReactComponent will be undefined. Normally, the import value for ReactComponent is defined correctly on regular react project but does not work in [email protected]. I have attempted adding @svgr/webpack, svg-inline-loader, react-svg-loader, next-react-svg and file-loader to my next.config.js file with no luck.

[steveswork]

I ended up solving this issue by making the following modifications to my next-config.js file.

1. Added the following rules: { test: /\.svg$/, use: [ '@svgr/webpack', 'file-loader' ] }

2. Removed: next-image loader plugin. It converted my svg default imports to base64 data urls. If and when the need for other image types arises in this project, I will then create pertinent loaders for those.