Skip to content

Can't render browserified JS on server side #181

@elvanja

Description

@elvanja

Hi!

I am trying to use this gem with CommonJS style written components. Followed https://medium.com/@olance/rails-react-browserify-e315001d5974 and got things to work client side, but the prerender: true gives me:

Encountered error "Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}'" when prerendering ThingsTable with {"initialThings":[{"id":1,"name":"Test"}]}

The function e(t,n,r) comes from browserify output, e.g. browserify -t [ coffeeify --extension .coffee ] -t [ reactify --extension .jsx.coffee ] --extension .js.jsx.coffee app/assets/javascripts/components/things_table.js.jsx.coffee will result in JS that is wrapped just like the error says. Can't understand exactly why it woks on client side and not on the server.

The environment is pretty much the same as in the given article, but with a few changes:

package.json:

{
  "name": "thingy",
  "devDependencies" : {
    "browserify": "~> 9.0.3",
    "browserify-incremental": "^1.5",
    "reactify": "~> 1.0.0",
    "coffeeify": "~> 1.0.0",
    "flux": "~> 2.0"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

Gemfile:

gem 'browserify-rails', '~> 0.7' # https://github.com/browserify-rails/browserify-rails
gem 'react-rails', '~> 1.0.0.pre', github: 'reactjs/react-rails' # https://github.com/reactjs/react-rails

config/application.rb (browserify configuration):

    config.browserify_rails.commandline_options = [
        '-t [ coffeeify --extension .coffee ]', # coffeescript support
        '-t [ reactify --extension .jsx.coffee ]', # react/jsx support
        '--extension .js.jsx.coffee' # to be able to remove extension from require
    ]

And an example of the component:

ThingsTableHeader = require("./things_table_header.js.jsx.coffee")
ThingsTableRow = require("./things_table_row.js.jsx.coffee")

ThingsTable = React.createClass
  getInitialState: ->
    { things: @props.initialThings }

  render: ->
    row = (thing) -> `(<ThingsTableRow key={thing.id} thing={thing} />)`

    `(
    <div className="panel panel-default">
      <div className="panel-heading">
        <h2 className="panel-title">Things</h2>
      </div>

      <div className="panel-body">
        <div className="table-responsive">
          <table className="table table-hover tablesorter">
            <ThingsTableHeader />
            <tbody>
              {this.state.things.map(row)}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )`

module.exports = window.ThingsTable
window.ThingsTable = ThingsTable # required by react_component view helper

So basically everything is required, only the main component is still on window because of the view helper.

I read issues #55, #120 & #90 which might be related, but I am not sure, hence the new issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions