Precompiled React code does not work.

[jantimon]

I have been trying to use React Code of an existing library. However it seems like routecore does not provide a valid React object.

I could reproduce the errors with the following example:

Example routes.jsx

/** @jsx React.DOM */
RouteCore.map(function () {
  this.route('/', function () {
    var x = React.createClass({
      render: function () {
        return React.createElement("div", {className: "bg"})
      }
    });
    return (<x/>);
  });
});

Server Side: TypeError: Object #<Object> has no method 'createElement' at [object Object].React.createClass.render

Client Side: Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Is there any workaround?

[mystor]

Right now routecore is running a bit of an old version of React, and since the version routecore is using, some of the react internals such as the representation of objects have changed. I don't have the time to check & update the code to use a newer version of React, but if you get it working, I would accept a pull request for a v2.

[jantimon]

Okay - what has to be changed to update React? Do you have any unit tests?

[mystor]

Unfortunately, when I wrote RouteCore, I didn't write any unit tests. It's one of the reasons why I haven't updated yet, because It'll probably break something, and I don't have enough time to do thorough testing. Changing out react itself is easy (the react-with-addons-0.11.1.js file just has to be swapped out with the latest version, and the reference to it in package.js has to be updated to the latest version), but somewhat extensive testing will be needed to make sure nothing important broke.

[Anonyfox]

+1 here, just started a fresh meteor project with nothing but routecore and cjsx, and stuff breaks completely on a hello world example.

[mystor]

@Anonyfox Can you try with @jantimon's PR #27 and see if it works well? I haven't merged it yet because I haven't had time to test it thoroughly.

[Anonyfox]

Unfortunately, this doesn't work for me either. This is my Page (index_page.cjsx):

@IndexPage = React.createClass
  render: ->
    <p>hello world</p>

and this is the router (routes.cjsx):

RouteCore.map ->
  home = @route '/', IndexPage

both files are placed inside the /lib folder of my freshly created project. This is my .meteor/packages file:

meteor-platform
coffeescript
less

# react plugins
mystor:routecore
jhartma:cjsx

# collections
aldeed:collection2
dburles:collection-helpers

And when I start the server and view localhost:3000 in my browser, this happens:

W20150408-22:13:27.787(2)? (STDERR) Error while rendering path: /
W20150408-22:13:27.788(2)? (STDERR) TypeError: Object #<Object> has no method 'createElement'
W20150408-22:13:27.788(2)? (STDERR)     at [object Object].IndexPage.React.createClass.render (lib/pages/index_page.cjsx:3:11)
W20150408-22:13:27.788(2)? (STDERR)     at [object Object].spec.render (packages/mystor:routecore/reactivity.js:57:1)
W20150408-22:13:27.788(2)? (STDERR)     at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:7025:1)
W20150408-22:13:27.788(2)? (STDERR)     at [object Object]._renderValidatedComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:12718:1)
W20150408-22:13:27.788(2)? (STDERR)     at [object Object].ReactCompositeComponentMixin.mountComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:6555:1)
W20150408-22:13:27.788(2)? (STDERR)     at [object Object].mountComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:12718:1)
W20150408-22:13:27.788(2)? (STDERR)     at packages/mystor:routecore/react-with-addons-0.11.1.js:13659:1
W20150408-22:13:27.788(2)? (STDERR)     at ReactServerRenderingTransaction.Mixin.perform (packages/mystor:routecore/react-with-addons-0.11.1.js:16883:1)
W20150408-22:13:27.789(2)? (STDERR)     at Object.renderComponentToString (packages/mystor:routecore/react-with-addons-0.11.1.js:13657:1)
W20150408-22:13:27.789(2)? (STDERR)     at packages/mystor:routecore/routecore-server.js:39:1

On OSX Yosemite. Both, with your package from atmosphere, as well as with a clone from github of @jantimon's package.

[jantimon]

@Anonyfox could you please post the stacktrace for your code running with #27 ?

Looks like your route configuration is wrong. Tried the following code with #27:

routes.cjsx

RouteCore.map ->
  home = @route '/', ->
    <IndexPage></IndexPage>

Works.

[Anonyfox]

Seems that I cloned your repo with branch "master". switched to the react 0.13 branch, and confirmed: it works. nice!

[jantimon]

Closed because of #27