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

Created by: 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

npx create-react-app svg && cd svg/src
echo '<svg xmlns="http://www.w3.org/2000/svg"><path d="" externalResourcesRequired="false" /></svg>' > icon.svg
Change App.js like so:

import React from 'react';
import { ReactComponent as Icon } from './icon.svg';
export default () => <Icon />;

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