Comments (24)
Now everything works great. Thanks for your efforts!
from react-svg.
@tanem Thanks so much, it works like a charm now!
from react-svg.
Probably implementing shouldComponentUpdate would prevent this from happening. In my case I wrapped the component with another component that ensures the component is only updated when its props change.
from react-svg.
@mikeriley131 see if the latest version (> 2.02) solves your issue? (Commit e946dc2).
from react-svg.
Still an issue here on 2.1.1 Updates of the path based on props causes this issue.
return <ReactSVG path={this.props.path} className={'example'} />
from react-svg.
Thanks for that extra info @Montaldo. I've got an idea of what changes I need to make, so once they're done I'll let you know.
from react-svg.
@mikeriley131 @nikoskleidis @Montaldo
Just published 2.1.2
to address this issue... let me know how you get on with it?
from react-svg.
Hi @tanem, thanks a lot for creating and supporting your nifty package!
I use it for toolbar icons and want icon to change color when it's "active". I can set fill="currentColor"
in SVG file and then use style
property to set the color from the outside. It almost worked in 2.1.1, but I was getting pretty much the same error as @mikeriley131 . With the latest update it throws an error when I use style
property to change color (I checked v2.1.2 - v2.1.6).
I use react
and react-dom
v15.4.1
Simple test to run:
<div onClick={() => this.setState({active: !this.state.active})}>
<ReactSVG path={alignmentLeftIcon} style={{color: this.state.active ? "#a33" : "#000"}}/>
</div>
Error:
ReactDOMComponentTree.js:106 Uncaught TypeError: Cannot read property '__reactInternalInstance$5fa40ba6ejyiw56gatgkhgp66r' of null
at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:106)
at findParent (ReactEventListener.js:38)
at handleTopLevelImpl (ReactEventListener.js:67)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:97)
at dispatchEvent (ReactEventListener.js:147)
from react-svg.
Thanks @viniychuk. Think I can fix this by moving more of the DOM manipulation away from React. Will repost when I've got something working ⌛️
from react-svg.
@viniychuk just released 2.1.10
- want to see if that fixes your issue?
from react-svg.
@tanem I'm still getting this error in 2.1.10
Here is what my component definition looks like:
<ReactSVG
key={0}
path="/static/media/refesh-icon.2b18acf8.svg"
evalScripts="never"
className="Button__icon"
/>
from react-svg.
Actually, maybe mine is a little different. The call stack is different, but similar:
Uncaught TypeError: Cannot read property 'replaceChild' of null
at Array.eval (svg-injector.js:377)
at eval (svg-injector.js:81)
(anonymous) @ svg-injector.js:377
(anonymous) @ svg-injector.js:81
from react-svg.
If it helps, the SVG does render to the DOM, I just get that error as well.
from react-svg.
Thanks @duro, will get back to ya once I've had the chance to look properly 👍
from react-svg.
@duro I haven't been able to recreate your issue using an isolated example, are you able to provide more context?
FWIW, it does look similar to the error output we saw many versions ago, so you might just want to make sure you are indeed pulling in the correct version of this library. Maybe something along the lines of:
$ rm -rf node_modules
$ npm cache clean
$ npm i -S react-svg@latest
$ npm i
Also, this may or not be useful to you, but there's a JSBin I sometimes play with that uses the UMD builds: http://jsbin.com/cicixuyofu/edit?html,js,output. Should probably link to it via the README at some point 😏
from react-svg.
Having this issue too. Occurs on first render. element seems to have no parentNode on the first injectElement call
from react-svg.
Thanks @astandrik. Published 2.1.14
but don't think that will help your situation (although more context would be nice 😉). Tempted to try using refs and one of the approaches using the ref callback mentioned in #13. Will let you know once I've done that.
from react-svg.
@duro @astandrik just published 2.1.15
which tweaks the lifecycle a bit, as mentioned above. Let me know how you get on? 🙏
from react-svg.
Can't say it helped a lot sorry. I'm doing the following:
function loadIcon(name, className, onClick) {
const path = require("./" + name +".svg");
// here path becomes a string like path == './static.234wer23er32ellipsis.svg'
return (
<div onClick={onClick}>
<ReactSVG
path={path}
className={className}
/>
</div>
)
}
const Icon = ({name, className, onClick}) => {
return loadIcon(name, className, onClick);
}
......
render() {
return (
....
<Icon className="clickable-image ellipsis" onClick={openPopover} name="ellipsis" />
...
)
}
.....
P.S. Icons work as expected but the error makes me feel a bit uncomfortable
error:
Uncaught TypeError: Cannot read property 'replaceChild' of null
at Array.eval (svg-injector.js:377)
at eval (svg-injector.js:81)
from react-svg.
Thanks @astandrik, think I managed to recreate your issue (or at least a very similar one 😅). Have released 2.1.17, can you let me know if that's any better now?
from react-svg.
I had a similar issue as @astandrik's earlier today, but downloaded 2.1.18 and am no longer receiving the type error. Thanks!
from react-svg.
Great, thanks for reporting back @kathrynreagan 💪
from react-svg.
@tanem Hello tanem, i have seen the discussion above, butI'm still getting this error in 7.0.1 "Cannot read property 'replaceChild' of null"
from react-svg.
Hey @Dlpan, thanks for the report. Since this issue you're commenting on is quite old now, I think it's worth creating a new issue? Any further information you can provide, such as code snippets, would be helpful too
from react-svg.
Related Issues (20)
- Components don't work properly in iframe HOT 4
- <style>-tag inside SVG becomes a page-wide style HOT 2
- Setting color HOT 3
- src prop warning in unit testing react testing library HOT 2
- Re-render of react-svg lost reference HOT 2
- ref type is incompatible HOT 2
- React SVG isn't working, when we give the external source. HOT 2
- wrapper rendered twice HOT 2
- Unit test cases are failing, if i use ReactSVG. HOT 4
- Namespace 'React' has no exported member 'JSX'. HOT 3
- Styling in scss HOT 2
- Doesn't update <use /> tag "href" attribute when `renumerateIRIElements` is true HOT 3
- CORS issue HOT 4
- SVG URL EXTERNAL, How Can I mock!? HOT 2
- ForwardedRef not assignable to ref type
- Make wrapper optional HOT 1
- 'ReactSVG' cannot be used as a JSX component.
- react-svg ssr compatibility with nextJs v14 App router
- A11y | <title> doesn't make an svg screen reader friendly
- Type instantiation is excessively deep and possibly infinite (ts-2589) error with styled-component and typescript setup HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-svg.