CODEWITHSUNDEEP
reactjsaframe
beek
beek

Reputation: 3750

React NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

I'm getting this notFound error when I update a new asset in the Aframe Asset manager built in React.

The asset manager component is built like this:

export class Assets extends PureComponent{

  render(){

    const {
      hiResPanoUrl,
      onHiResPanoLoaded,
      sceneThumbnails = [],
      guideThumbnails = [],
      videos = [],
      sounds = [],
      models = [],
      panos = [],
      images = [],
    } = this.props


    return (
      <a-assets>
        {createHighResolutionPanoAsset(hiResPanoUrl, onHiResPanoLoaded)}
        {createPanoAssets(panos)}
        {createSceneThumbnailsAssets(sceneThumbnails)}
        {createGuideThumbnailsAssets(guideThumbnails)}
        {createAudioAssets(sounds)}
        {createVideoAssets(videos)}
        {createModelAssets(models)}
        {createImageAssets(images)}
      </a-assets>
    )
  }

And the sound assets are build like this

function createAudioAssets(sounds) {
  return sounds.map(sound => {
    const {url, id, preload} = sound

    if(!preload)
      return <audio key={id} {...{id}} src={url} crossOrigin='anonymous'/>
    return <audio key={id} {...{id}} src={url} crossOrigin='anonymous' preload="auto"/>
  })
}

This is all working fine, until it gets a new sound, then I get this error:

react-dom.development.js:8613 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (https://localhost:3000/static/js/bundle.js:284772:18)
    at commitPlacement (https://localhost:3000/static/js/bundle.js:290869:11)
    at commitAllHostEffects (https://localhost:3000/static/js/bundle.js:291546:11)
    at HTMLUnknownElement.callCallback (https://localhost:3000/static/js/bundle.js:276259:14)
    at Object.invokeGuardedCallbackDev (https://localhost:3000/static/js/bundle.js:276297:16)
    at invokeGuardedCallback (https://localhost:3000/static/js/bundle.js:276346:29)
    at commitRoot (https://localhost:3000/static/js/bundle.js:291728:7)
    at completeRoot (https://localhost:3000/static/js/bundle.js:292778:34)
    at performWorkOnRoot (https://localhost:3000/static/js/bundle.js:292723:9)
    at performWork (https://localhost:3000/static/js/bundle.js:292642:7)
    at performSyncWork (https://localhost:3000/static/js/bundle.js:292614:3)
    at requestWork (https://localhost:3000/static/js/bundle.js:292514:5)
    at scheduleWork$1 (https://localhost:3000/static/js/bundle.js:292378:11)
    at Object.enqueueSetState (https://localhost:3000/static/js/bundle.js:287459:5)
    at ProxyComponent../node_modules/react/cjs/react.development.js.Component.setState (https://localhost:3000/static/js/bundle.js:339510:16)

Which is caused by the update in Redux.

Any clues what the problem is?

Upvotes: 5

Views: 4097

Answers (1)

amanteaux
amanteaux

Reputation: 2493

It is likely that something external to React is messing with your DOM.

It can be:

Upvotes: 6

Related Questions