Loading react components with require causes an error when they lookup their parent

Vote count:

0

I am trying to dynamically load a react component from a file and insert it to my AppComponent. I simply load the file with require. This is the Setup I have:

MyFancyApp = ->

  api = {}
  DynView = undefined

  AppView = React.createClass
    render: ->
      DynView {}

  loadModules = ->
    new Promise (resolve) ->
      require (["src/secretView"]), (SecretView) ->
        DynView = SecretView
        resolve()

  renderApp = ->
    new Promise (resolve) ->
      React.renderComponent (AppView {}), document.body, resolve

  api.start = ->
    loadModules().then renderApp

  api

The secretView file looks as follows:

React.createClass
  render: ->
    React.DOM.input {}

When rendering the view, it will throw a "TypeError: Cannot read property 'firstChild' of undefined". This happens in react's findComponentRoot function on the call to findDeepestCachedAncestor.

The really strange thing happens, when I try the same code, but with the react component defined right there instead of dynamically loaded.

MyFancyApp = ->

  api = {}

  DynView = React.createClass
    render: ->
      React.DOM.input {}

  AppView = React.createClass
    render: ->
      DynView {}

  renderApp = ->
    new Promise (resolve) ->
      React.renderComponent (AppView {}), document.body, resolve

  api.start = ->
    renderApp()

  api

That works!

The code for the two components is 1:1 the same and they also look the same when I inspect them in chrome. The error seems to happen when there is a reference up the component tree (or to some cached objects?). I have had similiar errors trying to render a custom component, that was using the 'ref' attribute. That caused react to throw an error on the 'addComponentAsRefTo' function, which also seemed to be caused by react trying to look up the tree.

So what possible differences are there between a component loaded via require and one defined right in place?

Thanks a lot

asked 3 mins ago

sra

404