How to use Mobx with react-rails?

[pioz]

Is there a way to use mobx-react with react-rails?
If I import mobx-react (import {observer} from 'mobx-react') in my jsx files I get the follow error:

Error: Cannot find module 'react-dom' from '/Users/pioz/Code/.../node_modules/mobx-react'

and if I add react-dom with yarn add react-dom all crash with this error:

Uncaught TypeError: Super expression must either be null or a function, not undefined

Any idea?

[BookOfGreg]

If you're using react-rails with Webpacker, react-dom will already be installed.
Have you tried shimming react-dom to global namespace so mobx can get a hold of it?
https://webpack.js.org/guides/shimming/

This is unlikely to be a react-rails gem issue, but does follow the general trend of being hard to debug when things go wrong in JS land. See this Redux issue as a possible related thread.
#878

[pioz]

Im not using webpacker but im using browserify rails.

…

Il giorno 08 apr 2018, alle ore 21:30, Greg Myers ***@***.***> ha scritto: If you're using react-rails with Webpacker, react-dom will already be installed. Have you tried shimming react-dom to global namespace so mobx can get a hold of it? https://webpack.js.org/guides/shimming/ This is unlikely to be a react-rails gem issue, but does follow the general trend of being hard to debug when things go wrong in JS land. See this Redux issue as a possible related thread. #878 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[BookOfGreg]

I apologise but I'm unlikely to be able to help you with this then. We only support Sprockets and Webpacker, and Webpacker is preferred.

Still, it's all JS so hopefully the same concepts apply: https://github.com/thlorenz/browserify-shim Might this help to make react-dom available?

[pioz]

I managed to make mobx work like this:
In application.js I've this requires:

//= require application/components
window.$ = window.jQuery = require('jquery');
require('jquery-ujs');
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
require('react_ujs');

And I've npm packages with yarn: yarn add react react-dom react_ujs jquery jquery-ujs mobx mobx-react
my application/components.js is this:

window.MyComponent = global.MyComponent = require('application/components/MyComponent.jsx').default;

Now all works fine, but if I enable server rendering (with prerender: true option) I get

ReferenceError: window is not defined

[pioz]

I figured out, this a repo with the setup to make all work! https://github.com/pioz/rails_with_react-rails_and_mobx

[BookOfGreg]

Glad to hear it worked OK. Well done and thanks for linking the solution 👍