React on Rails Generator installs the older npm package

[justin808]

If you ran the generator and you have 12.0.3 in the Gemfile and 11.3.1 in the package.json, you hit the issue.

Workaround to fix the incorrect npm version.

Run:

yarn add --exact react-on-rails@12.0.3

That will replace the 11.3..1 version in the package.json.

---

Details

This passed:

• https://github.com/shakacode/react_on_rails/actions/runs/281849322
• 6f2d7b1
  Sept 30, 2020

Oct 1, 11.3.1 released

That caused the generator to install the older version, since 11.3.1 is later than 12.0.3

So This Failed

• https://github.com/shakacode/react_on_rails/actions/runs/323141042
  Oct 22, 2020

---

Per this report from @imgarylai

I'm running a new Rails app with ruby 2.7.1 and Rails 6.0.3.4. I followed this tutorial and got the same error message as well.

Uncaught Invariant Violation: ReactOnRails encountered an error while rendering component: HelloWorld.
Original message: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33684:19)
    at resolveDispatcher (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:35069:32)
    at useState (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:35093:24)
    at HelloWorld (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:121:73)
    at createReactElement (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33323:12)
    at render (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33132:75)
    at forEach (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33048:5)
    at forEachComponent (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33061:3)
    at reactOnRailsPageLoaded (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33169:3)
    at HTMLDocument.renderInit (http://localhost:3000/packs/js/hello-world-bundle-842597fa5db1436cba9a.js:33194:5)

Gemfile:

...
gem 'react_on_rails', '12.0.3'
gem 'webpacker', '~> 5.2'
...

➜  ruby -v
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin19]
➜  rails -v
Rails 6.0.3.4

#1338 is fixing this issue.

[jwcatprint]

@justin808 I received the same error with the demo when installing on a new app

@jwcatprint are you using React 17? I'll look into this no later than this coming weekend.

In the meantime can somebody confirm that

yarn add react@16.14.0 react-dom@16.14.0

solves the issue.

@justin808 I used version 16.4 for react and react-dom but received a different error in the console "HelloWorld.jsx:4 Uncaught TypeError: ReactOnRails encountered an error while rendering component: HelloWorld.
Original message: Object(...) is not a function"

[imgarylai]

@justin808 I rolled back to react 16.14. It works fine now.

[justin808]

I updated https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh to React v17 and I didn't see any issues.

[justin808]

@imgarylai it seems that this PR should provide a fix: #1338.

See updated description for a workaround.

[justin808]

Fixed in 12.0.4.