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

[tfrommen]

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 />;

4. 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! 🚀

[gaearon]

Looks weird. I think svgr just needs to add support for this property. Maybe they did in 3.x?

[tfrommen]

Hey Dan,

yeah, I just found out how you are manipulating the SVGs (by using svgr). I could reproduce this on their online demo, and I'm about to open an issue with them.

I think this can be closed then...?

[gaearon]

Let's keep it open until they fix and we update to get that fix.

It would also be nice if they didn't just fix one instance, but instead did it for all SVG attributes supported by React. There's a list in React source (I think the file is DOMProperty.js).

[Timer]

Fixed in gregberge/svgr#203

[tabrindle]

@tfrommen Unrelated to the core issue but important re --info command failing - can you run npx envinfo@latest --preset create-react-app and paste its contents here? I believe we have fixed this issue. Thanks!

[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

🤔