-
Notifications
You must be signed in to change notification settings - Fork 752
Description
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.