Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Invalid DOM Property When Using New SVG-as-React-Component Feature of Create React App v2.

See original GitHub issue

Is this a bug report?

Yes, I believe so.

Did you try recovering your dependencies?

This is with a freshly set up app.

Which terms did you search for in User Guide?

I searched for “SVG invalid DOM property”.


The "path" argument must be of type string. Received type undefined

Environment Info:
(node:52228) UnhandledPromiseRejectionWarning: Error: System cannot find specified path.

    at Function.e.exports.sync (C:\Users\tfrommen\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:7778)
    at Object.copySync (C:\Users\tfrommen\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:104976)
    at Object.t.writeSync.e [as writeSync] (C:\Users\tfrommen\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:123499)
    at C:\Users\tfrommen\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:124274
    at Promise.all.then.e (C:\Users\tfrommen\AppData\Local\Yarn\Data\global\node_modules\envinfo\dist\envinfo.js:1:124289)
(node:52228) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:52228) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Somehow I think this is not what you were hoping for… But that’s another issue. 😅

So, not sure what exactly you are interested in, but I have this for you:

node -v

npm -v

yarn -v

I’m running Windows 10 Pro (64-bit).

Steps to Reproduce

  1. npx create-react-app svg && cd svg/src
  2. echo '<svg xmlns=""><path d="" externalResourcesRequired="false" /></svg>' > icon.svg
  3. Change App.js like so:
import React from 'react';
import { ReactComponent as Icon } from './icon.svg';
export default () => <Icon />;
  1. yarn start

Expected Behavior

Well, valid DOM properties would be great! 😁

Actual Behavior

I get a warning in the console.

The following screenshot is from my app. See further down for a reproducible demo of the above code (or similar, at least).


Reproducible Demo

I know that the DOM property is deprecated, but I expect this behavior to be not only for this property.

You rock! 🚀

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

ianschmitzcommented, Mar 10, 2019

I believe this has already been fixed since we’ve bumped the svgr version number. Closing. Let us know if you still have issues!

tfrommencommented, Nov 28, 2018


$ npx envinfo@latest --preset create-react-app
npx: Installed 1 in 20.625s
The "path" argument must be of type string. Received type undefined
npx: Installed 1 in 2.46s

    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Node: Not Found
    Yarn: 1.10.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    Edge: 42.17134.1.0
    Internet Explorer: Not Found
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
    create-react-app: Not Found


Read more comments on GitHub >

github_iconTop Results From Across the Web

Reactjs Invalid DOM property error on SVG elements
Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
Read more >
Invalid DOM property `class` warning in React | bobbyhadz
The className prop is used because class is a reserved word in JavaScript. invalid dom property class. Here is an example of how...
Read more >
Invalid DOM property" warning (react, tailwind, craco) - Reddit
TailwindUI has React components with the right property names, any particular reason why you are not using them?
Read more >
Invalid DOM property react bootstrap error | How to fix - YouTube
Just change class to className and for to htmlFor.also add a froward slash in html hr and input tag as shown in video....
Read more >
How to fix Unknown DOM property class. Did you mean ...
When we use a class attribute to add a CSS class name to the react element we will see this type of error...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found