Repository navigation
Invalid DOM Property When Using New SVG-as-React-Component Feature of Create React App v2. #5297
Description
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/srcecho '<svg xmlns="http://www.w3.org/2000/svg"><path d="" externalResourcesRequired="false" /></svg>' > icon.svg- Change
App.jslike 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! 🚀
Activity
gaearon commentedon Oct 4, 2018
Looks weird. I think svgr just needs to add support for this property. Maybe they did in 3.x?
tfrommen commentedon Oct 4, 2018
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 commentedon Oct 4, 2018
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 commentedon Oct 8, 2018
Fixed in gregberge/svgr#203
tabrindle commentedon Nov 28, 2018
@tfrommen Unrelated to the core issue but important re
--infocommand failing - can you runnpx envinfo@latest --preset create-react-appand paste its contents here? I believe we have fixed this issue. Thanks!tfrommen commentedon Nov 28, 2018
@tabrindle:
🤔
ianschmitz commentedon 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!