React_on_rails: Following basic tutorial there's an error => Module not found: Error: Can't resolve 'react-on-rails'

[nachoal]

Hi,

I was following your tutorial and everything is working fine up until this line:

• rails generate react_on_rails:install which tries to run the rake command run yarn add react-on-rails --exact from "."

• There's an error on some of the rake tasks:

Running via Spring preloader in process 33346
       route  get 'hello_world', to: 'hello_world#index'
      create  app/javascript/bundles/HelloWorld/components
      create  app/controllers/hello_world_controller.rb
      create  app/views/layouts/hello_world.html.erb
      create  config/initializers/react_on_rails.rb
      create  Procfile.dev
      create  Procfile.dev-server
     gemfile  mini_racer
         run  bundle from "."
Could not find gem 'mini_racer' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.
         run  yarn add react-on-rails --exact from "."
Could not find gem 'mini_racer' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.
      create  app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
      create  app/javascript/packs/hello-world-bundle.js
      create  app/views/hello_world/index.html.erb

Specifically:

Could not find gem 'mini_racer' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.

But mini_racer is doesn't look like its being required from the Setting up the environment section.

This causes that run yarn add react-on-rails --exact from "." is never executed and the following error is shown:

Uncaught Error: Cannot find module 'react-on-rails'
    at webpackMissingModule (hello-world-bundle.js:1)
    at Module../app/javascript/packs/hello-world-bundle.js (hello-world-bundle.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

As a fix I manually had to run yarn add react-on-rails to make it work. 😄
Should I manually install mini_racer and try again? Is mini_racer related to this specific rake task where we run ruby alongside Javascript?

Thanks!

[tahsin352]

@nachoal
I run the below commands. it's running properly on my end. in the gemfile, i write:

gem 'webpacker', github: "rails/webpacker"
gem 'react_on_rails', '11.2.1' # always use exact version

command:

rails new firstreact --webpack=react
sudo vim Gemfile
bundle install
git status -s
git commit -am 'start'
rails generate react_on_rails:install
rails generate react_on_rails:install --ignore-warnings

Please let me know if you find any problem.
Thanks.

[hugoh59]

I have the same issue. Using yarn add... works but the question persists.

[SteveRedka]

I can confirm this.

Here is log for trying to start the default hello world controller:

08:30:49 client.1 | warning package.json: No license field
08:30:51 client.1 | 
08:30:51 client.1 | webpack is watching the files…
08:30:51 client.1 | 
08:30:53 client.1 | Hash: e86d8653829b8eda7c8b
08:30:53 client.1 | Version: webpack 4.43.0
08:30:53 client.1 | Time: 2111ms
08:30:53 client.1 | Built at: 05/05/2020 8:30:53 AM
08:30:53 client.1 |                                             Asset       Size              Chunks                         Chunk Names
08:30:53 client.1 |     js/hello-world-bundle-3746f8c5973ff2feb060.js    206 KiB  hello-world-bundle  [emitted] [immutable]  hello-world-bundle
08:30:53 client.1 | js/hello-world-bundle-3746f8c5973ff2feb060.js.map    134 KiB  hello-world-bundle  [emitted] [dev]        hello-world-bundle
08:30:53 client.1 |                                     manifest.json  413 bytes                      [emitted]              
08:30:53 client.1 | Entrypoint hello-world-bundle = js/hello-world-bundle-3746f8c5973ff2feb060.js js/hello-world-bundle-3746f8c5973ff2feb060.js.map
08:30:53 client.1 | [./app/javascript/packs/hello-world-bundle.js] 235 bytes {hello-world-bundle} [built]
08:30:53 client.1 | [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 905 bytes {hello-world-bundle} [built]
08:30:53 client.1 |     + 134 hidden modules
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./app/javascript/packs/hello-world-bundle.js
08:30:53 client.1 | Module not found: Error: Can't resolve '../bundles/HelloWorld/components/HelloWorld' in '/home/wicked/projects/repairman-helper-be/app/javascript/packs'
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js 2:0-69 5:14-24
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./node_modules/react-on-rails/node_package/lib/handleError.js
08:30:53 client.1 | Module not found: Error: Can't resolve 'react' in '/home/wicked/projects/repairman-helper-be/node_modules/react-on-rails/node_package/lib'
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/handleError.js 10:36-52
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./node_modules/react-on-rails/node_package/lib/createReactElement.js
08:30:53 client.1 | Module not found: Error: Can't resolve 'react' in '/home/wicked/projects/repairman-helper-be/node_modules/react-on-rails/node_package/lib'
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/createReactElement.js 10:36-52
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js
08:30:53 client.1 | Module not found: Error: Can't resolve 'react-dom' in '/home/wicked/projects/repairman-helper-be/node_modules/react-on-rails/node_package/lib'
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js 18:39-59
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./node_modules/react-on-rails/node_package/lib/clientStartup.js
08:30:53 client.1 | Module not found: Error: Can't resolve 'react-dom' in '/home/wicked/projects/repairman-helper-be/node_modules/react-on-rails/node_package/lib'
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/clientStartup.js 13:39-59
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./node_modules/react-on-rails/node_package/lib/handleError.js
08:30:53 client.1 | Module not found: Error: Can't resolve 'react-dom/server' in '/home/wicked/projects/repairman-helper-be/node_modules/react-on-rails/node_package/lib'
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/handleError.js 12:37-64
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js
08:30:53 client.1 | 
08:30:53 client.1 | ERROR in ./node_modules/react-on-rails/node_package/lib/serverRenderReactComponent.js
08:30:53 client.1 | Module not found: Error: Can't resolve 'react-dom/server' in '/home/wicked/projects/repairman-helper-be/node_modules/react-on-rails/node_package/lib'
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/serverRenderReactComponent.js 12:37-64
08:30:53 client.1 |  @ ./node_modules/react-on-rails/node_package/lib/ReactOnRails.js
08:30:53 client.1 |  @ ./app/javascript/packs/hello-world-bundle.js
08:31:11 web.1    | Started GET "/hello_world" for 127.0.0.1 at 2020-05-05 08:31:11 +0300
08:31:11 web.1    |    (0.3ms)  SELECT sqlite_version(*)
08:31:11 web.1    |    (0.2ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
08:31:11 web.1    |   
08:31:11 web.1    | ActionController::RoutingError (undefined method `layout' for HelloWorldController:Class):
08:31:11 web.1    |   
08:31:11 web.1    | app/controllers/hello_world_controller.rb:4:in `<class:HelloWorldController>'
08:31:11 web.1    | app/controllers/hello_world_controller.rb:3:in `<main>'