Server Side Errors

[taylorbrooks]

Not really sure what's going on here. It looks like the component's props are populated correctly, but I get these server side errors.

Is server side rendering turned on by default? I didn't think it was.

[justin808]

The good news is that you new get nice errors!

It looks like React is not exposed.

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/webpack.server.js#L25

Make sure that type of line is in both your client and server webpack files.

We handle common aspects like this: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.common.config.js#L22 to avoid duplication.

[justin808]

@taylorbrooks Regarding server side, you should look in your config/initializers directory to see if you have an initializer. You might want to check that you're seeing the default that's setup here: https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/configuration.rb#L9. Maybe we have a bug? Default should be false.

[taylorbrooks]

K, I'm a little farther, getting a different error now:

ERROR in ./~/react-chartjs/lib/core.js
Module not found: Error: Cannot resolve module 'expose' in /app/node_modules/react-chartjs/lib
 @ ./~/react-chartjs/lib/core.js 75:16-32

Which I think is failing on this line: https://github.com/jhudson8/react-chartjs/blob/master/lib/core.js#L79

I'm pretty new to webpack so I may need some n00b level guidance. :smile:

[taylorbrooks]

Nvm I fixed this ^^. Fixed the React undefined errors.

Getting this now (don't have anything in config/intializers):

[justin808]

@taylorbrooks There's a bug in that the exception is caught and says server side even though ti's client side. I'm guessing that you have webpack configuration issues or maybe you didn't import CloseIoTemplates properly. Check out http://forum.railsonmaui.com/t/blackbelt-rails-debugging-techniques-with-react-server-rendering/351. Tips for debugging capybara tests! Same would apply to your situation.

[taylorbrooks]

Yeah seems like CloseioTemplates is undefined, but idk why.

Here's some of the code:

webpack.config.js

module.exports = {
  entry: "./app/components/components.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/app/assets/javascripts"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_module|bower_components)/,
        loader: 'babel'
      },
      { test: require.resolve('react'), loader: 'expose?React' },
    ]
  }
};

components.js

var CloseioTemplates = require('./closeio_templates.jsx');

closeio_templates.jsx

var React = require('react');
module.exports = React.createClass({
  propTypes: {
    templates: React.PropTypes.array
  },

  render: function(){
    return (
      <ul id="things" className="list-group">{
        this.props.templates.map(function(template){
          return(
            <li className="list-group-item" data-template-name={template.name} data-template-id={template.id}>
              <div>
                {template.name}
                <span className="pull-right"></span>
              </div>
            </li>)
        })
      }</ul>
    );
  }
});

[justin808]

@taylorbrooks Definitely create the simplest possible example, only client side rendering, one simple hello world component. Try copying from the spec/dummy app inside of react_on_rails. Baby steps to narrow down the issue.

[justin808]

FWIW, we only use import rather than require, and let/const rather than var.

[justin808]

@taylorbrooks Did you solve your issue?

[taylorbrooks]

Wasn't doing window.ComponentName = var ComponentName

Figured it out. Thanks!

[justin808]

@taylorbrooks Thanks. This is shown in the README.md as:

window.MyReactComponentApp = MyReactComponentApp;