React: Can't use SVG from package when using `import {ReactComponent as Foo} from "./foo.svg"`

[neolefty]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Edit: To clarify, importing SVGs directly works fine, as described here: https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs. It only fails when used indirectly through an NPM package.

When using a Component that contains an SVG referenced in a package using the pattern `import {ReactComponent as Foo} from "./foo.svg"', React raises this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Foo.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Reproduced here: https://github.com/neolefty/indirect-svg

What is the expected behavior?

An SVG imported using import {ReactComponent as Foo} from "./foo.svg" in an NPM package should render in a project that depends on it.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Found in 16.12.0 / Linux / Chrome. Not tested in previous versions of React.

[kgabryje]

The issue here is that SVGs are not React components, and you're trying to use one as a component. Take a look at this Babel plugin - https://github.com/airbnb/babel-plugin-inline-react-svg. Should fix your problem 🙂

[neolefty]

The issue here is that SVGs are not React components, and you're trying to use one as a component. Take a look at this Babel plugin - https://github.com/airbnb/babel-plugin-inline-react-svg. Should fix your problem

I don't think that's quite what's happening in this case -- the method I'm using is recommended here:

https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

It works fine to use SVGs directly (with import {ReactComponent as Foo} from "./foo.svg"), but it doesn't translate into use inside of a package.

However, I'll give your suggestion a try -- it may be a workaround. One advantage of the method I'm attempting here is you can use stylesheets on SVG internals since the SVG is injected directly into the DOM.

Question: Does babel-plugin-inline-react-svg require ejecting?

[threepointone]

Please file this issue at https://github.com/facebook/create-react-app/issues (or feel free to continue discussing here if you're getting help)

[neolefty]

Please file this issue at https://github.com/facebook/create-react-app/issues (or feel free to continue discussing here if you're getting help)

Ah-ha, duplicated here: https://github.com/facebook/create-react-app/issues/5276