Alex Ung Alex Ung - 1 year ago 211
Javascript Question

How do you use mobx with react rails?

While trying to use react-rails, I've been running into issues incorporating

as state management into my app.

I was under the impression that the rails asset pipeline would bring in mobx to react, but, this hasn't been successful. I'm using the react-rails gem and trying to incorporate mobx into my react.es6.jsx sheets in the components folder.

my package.json file:

"name": "rent-pseudo",
"version": "1.0.0",
"description": "== Zipqode",
"main": "index.js",
"dependencies": {
"babel-plugin-syntax-async-functions": "^6.3.13",
"babel-plugin-transform-regenerator": "^6.3.18",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"bourbon": "^4.2.7",
"bourbon-neat": "^1.8.0",
"browserify": "^13.1.0",
"browserify-incremental": "^3.1.1",
"font-awesome": "^4.6.3",
"graphql": "^0.6.2",
"mobx": "2.4.1",
"mobx-react": "^3.5.3",
"mobx-react-devtools": "^4.2.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-google-maps": "^4.11.0",
"react-router": "2.6.1",
"es6-promise": "^3.0.2",
"fetch": "^0.3.6",
"jquery": "^2.1.4",
"jquery-ujs": "^1.0.4"
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"repository": {
"type": "git",
"url": "git+"
"author": "",
"license": "ISC",
"bugs": {
"url": ""
"homepage": ""

My first react file that's included in

import { observer } from 'mobx-react'

const SearchResultsLayout = observer(React.createClass({
render: function() {
return (
<h1>Hello, World</h1>

But I keep getting the error
VM3275:1 Uncaught ReferenceError: SearchResultsLayout is not defined

Any ideas?

Answer Source

For those interested in knowing, the react_on_rails gem is better for incorporating mobx. Got it to work this morning by simply installing the gem and npm installing mobx into my package.json that's included in the client folder

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download