Uncaught TypeError: Cannot read property 'replaceChild' of null(...)

[mikeriley131]

Getting this error when using this package. Possible conflict with the YouTube Player API?

index.js:541 Uncaught TypeError: Cannot read property 'replaceChild' of null(…)
(anonymous function) @ index.js:541
loadSvg @ index.js:256
injectElement @ index.js:399
SVGInjector @ index.js:599
updateSVG @ index.js:132
componentDidUpdate @ index.js:122
invokeComponentDidUpdateWithTimer @ ReactCompositeComponent.js:75
notifyAll @ CallbackQueue.js:71
close @ ReactReconcileTransaction.js:85
closeAll @ Transaction.js:208
perform @ Transaction.js:155
perform @ Transaction.js:142
perform @ ReactUpdates.js:94
flushBatchedUpdates @ ReactUpdates.js:177
closeAll @ Transaction.js:208
perform @ Transaction.js:155
batchedUpdates @ ReactDefaultBatchingStrategy.js:67
enqueueUpdate @ ReactUpdates.js:205
enqueueUpdate @ ReactUpdateQueue.js:29
enqueueSetState @ ReactUpdateQueue.js:214
ReactComponent.setState @ ReactComponent.js:68
onHeroReady @ HeroBGVideo.jsx:68
YouTube._this.onPlayerReady @ YouTube.js:104
Sister.sister.trigger @ sister.js:53
events.(anonymous function) @ YouTubePlayer.js:43
g.I @ www-widgetapi.js:80
g.l @ www-widgetapi.js:114
g.J @ www-widgetapi.js:132
W.g @ www-widgetapi.js:124
Jb.f @ www-widgetapi.js:100

[nikoskleidis]

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.

[tanem]

@mikeriley131 see if the latest version (> 2.02) solves your issue? (Commit e946dc2).

[Marc90521]

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'} />

[tanem]

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.

[tanem]

@mikeriley131 @nikoskleidis @Montaldo

Just published 2.1.2 to address this issue... let me know how you get on with it?

[viniychuk]

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)

[tanem]

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 ⌛️

[tanem]

@viniychuk just released 2.1.10 - want to see if that fixes your issue?

[viniychuk]

@tanem Thanks so much, it works like a charm now!

[duro]

@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"
/>

[duro]

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

[duro]

If it helps, the SVG does render to the DOM, I just get that error as well.

[tanem]

Thanks @duro, will get back to ya once I've had the chance to look properly 👍

[tanem]

@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 😏

[astandrik]

Having this issue too. Occurs on first render. element seems to have no parentNode on the first injectElement call

[tanem]

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.

[tanem]

@duro @astandrik just published 2.1.15 which tweaks the lifecycle a bit, as mentioned above. Let me know how you get on? 🙏

[astandrik]

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)

[tanem]

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?

[neokat]

I had a similar issue as @astandrik's earlier today, but downloaded 2.1.18 and am no longer receiving the type error. Thanks!

[tanem]

Great, thanks for reporting back @kathrynreagan 💪

[astandrik]

Now everything works great. Thanks for your efforts!

[Dlpan]

@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"

[tanem]

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