<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Edit: To clarify, importing SVGs directly works fine, as described here: <a href="https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs" rel="nofollow">https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs</a>. It only fails when used indirectly through an NPM package.</p>
<p dir="auto">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:</p>
<blockquote>
<p dir="auto">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.</p>
<p dir="auto">Check the render method of <code class="notranslate">Foo</code>.</p>
</blockquote>
<p dir="auto"><strong>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 (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto">Reproduced here: <a href="https://github.com/neolefty/indirect-svg">https://github.com/neolefty/indirect-svg</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">An SVG imported using <code class="notranslate">import {ReactComponent as Foo} from "./foo.svg"</code> in an NPM package should render in a project that depends on it.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Found in 16.12.0 / Linux / Chrome. Not tested in previous versions of React.</p>
<p dir="auto">Describe what you were doing when the bug occurred:</p>
<ol dir="auto">
<li>Turn on Profiler</li>
<li>The app sens a lot of small requests to BE</li>
<li>To make sure that all requests fulfilled, I went to Network TAB. When it was finished and stop profiling.</li>
<li>The profiler showed some results and then crashed.</li>
</ol>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.8.2-fed4ae024</p>
<p dir="auto">Call stack: at updateTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17786:17)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17717:25)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17710:30)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17710:30)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17710:30)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17710:30)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17710:30)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:17710:30)<br>
at ProfilingCache.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18265:14)<br>
at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31718:33)</p>
<p dir="auto">Component stack: at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31701:48)<br>
at div<br>
at div<br>
at div<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26139:23)<br>
at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33363:48)<br>
at ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:27172:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:27303:32)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30463:23)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22538:23)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23040:27)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28328:23)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33797:21)</p>