Create-react-app: Cannot import svg as component

Created on 4 Oct 2018 · 4Comments · Source: facebook/create-react-app

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

svg

Environment

I cannot provide you environment info since I am getting the following error:

npx create-react-app --info
npx: installed 1 in 2.366s
Path must be a string. Received undefined
C:\Users\dxh06AppData\Roaming\npm\node_modulescreate-react-app\index.js

Environment Info:
(node:12112) UnhandledPromiseRejectionWarning: Error: The system cannot find the path specified.

Steps to Reproduce

Importing a svg file as a React component generates an error at run-time. See code below.

Expected Behavior

The svg should become a standard Rect Component like stated by svgr.

Actual Behavior

When I import a svg and use it as a React component I am getting the following error at run-time:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.5d5d9eef.svg') is not a valid name.
▶ 20 stack frames were collapsed.
Module../src/index.js
C:/Git/web-react-components-library/src/index.js:7
   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | 
   9 | // If you want your app to work offline and load faster, you can change
  10 | // unregister() to register() below. Note this comes with some pitfalls.

Reproducible Demo

import React, { Component } from 'react';
import Logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Logo></Logo>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Source

DavidHenri008

Most helpful comment

You wrote:

import Logo from './logo.svg';

The User Guide says:

import { ReactComponent as Logo } from './logo.svg';

Don't forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

Hope this helps!

gaearon on 4 Oct 2018

👍9 ❤2

All 4 comments

May be related to #5276.

DavidHenri008 on 4 Oct 2018