SVG imports in npm modules aren't transformed into React components
See original GitHub issueDescribe the bug
Third-party npm modules that import SVGs in the following manner aren’t transformed into React components:
import { ReactComponent as Logo } from "./logo.svg";
Instead, they remain as URL imports to the SVG file.
Did you try recovering your dependencies?
Yes.
Which terms did you search for in User Guide?
SVG
Environment
Environment Info:
current version of create-react-app: 4.0.0
running from C:\Users\Dylan\AppData\Roaming\npm-cache\_npx\19220\node_modules\create-react-app
System:
OS: Windows 10 10.0.19041
CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
Binaries:
Node: 12.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.56), ChromiumDev (88.0.680.1)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^16.14.0 => 16.14.0
react-dom: ^16.14.0 => 16.14.0
react-scripts: ^3.4.3 => 3.4.3
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
- Import an npm module that imports SVGs using the
ReactComponent as
method.
Expected behavior
The SVG renders.
Actual behavior
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.
Reproducible demo
TBD
Additional Comments
I’m actually not sure if this is an intentional behavior or not. If it isn’t intentional, and I should be able to import modules using this convention, please let me know and I’ll put together a reproducible demo.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
How to Import SVGs in a React and Vite app - freeCodeCamp
Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA...
Read more >Unable to import SVG with Vite as ReactComponent
In App.tsx import SVG as React Component by adding ?component on the svg's import directive : import Happy from '.
Read more >react-svg - npm
A React component that injects SVG into the DOM. Background | Basic Usage | Live Examples | API | Installation | FAQ |...
Read more >React SVG: How to use SVGs best in React - CopyCat Blog
Another way to import SVG in react with full control of its customization is by converting the regular SVG tags to react SVG...
Read more >React | Font Awesome Docs
Individually import icons just once in an init module - there's no need to import the icons into each component once they've been...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For future reference, my issue was caused because CRA does not look through
node_modules
in the current react-scriptswebpack.config.js
file on the following loader:You need to change
include: paths.appSrc
toinclude: [paths.appSrc, paths.appNodeModules,]
.You can do this without ejecting by using react-app-rewired, CRACO, or any other webpack extender for CRA using the following config:
Hope this helps anyone who comes across a similar issue!
@dstaley did @CTLaChance’s solution work for you? I’m trying it out and with some adjustments
rules[1].oneOf[3]
I’m still getting a path for SVG files imported by npm modules.Anyone have any further help here?