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

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”.

Environment

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

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
v10.0.0

npm -v
3.10.9

yarn -v
1.10.1

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

Steps to Reproduce

1. npx create-react-app svg && cd svg/src
2. echo '<svg xmlns="http://www.w3.org/2000/svg"><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

https://codesandbox.io/s/ryn85k6mzp

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

---

You rock! 🚀

[ianschmitz]

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

[tfrommen]

@tabrindle:

$ 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
C:\Users\tfrommen\AppData\Roaming\npm-cache\_npx\10548\node_modules\envinfo\dist\cli.js

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    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
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: Not Found
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

🤔