Bundle react 18

[BookOfGreg]

Summary

Bundle React 18

Fixes #1171

[ro-savage]

@BookOfGreg - Will this allow support of React 18 with react-rails?

I am not much of a rails expert - but is there anything I can do to help get React 18 support over the line? (e.g. can I test this release somehow?)

[davybolivar]

@BookOfGreg - Will this allow support of React 18 with react-rails?

I am not much of a rails expert - but is there anything I can do to help get React 18 support over the line? (e.g. can I test this release somehow?)

I'm curious too

[BookOfGreg]

Both, you should be able to target this branch directly from your gemfiles and just give it a go and see what happens! Maybe there will be some breakages, I took mechanical action to generate this PR but zero manual testing so far.

[Jonakemon]

@BookOfGreg I gave this PR a try on our test app. Everything seemed to work, with the exception of one thing: this gem imports createRoot directly from react-dom, which is not supported. Instead it should be imported from react-dom/client. This happens in renderHelpers.js.

The JS error: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

I think opening another PR myself is more effort than just correcting the import. But if you'd like me to do so, let me know!

[sent-hil]

@BookOfGreg I tried it today on new rails 6.1.4.4 app and it works, except when I add mini_racer gem as you suggested in https://github.com/reactjs/react-rails/issues/1035#issuecomment-541097024. I get the error:

* Listening on http://[::1]:3000
Use Ctrl-C to stop
Started GET "/" for 127.0.0.1 at 2022-08-04 16:34:26 -0700
   (0.5ms)  SELECT sqlite_version(*)
   (0.1ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by HelloController#index as HTML
  Rendering layout layouts/application.html.erb
  Rendering hello/index.html.erb within layouts/application
[Webpacker] Everything's up-to-date. Nothing to do
[Webpacker] Everything's up-to-date. Nothing to do
  Rendered hello/index.html.erb within layouts/application (Duration: 54.8ms | Allocations: 8319)
  Rendered layout layouts/application.html.erb (Duration: 55.0ms | Allocations: 8417)
Completed 500 Internal Server Error in 60ms (ActiveRecord: 0.0ms | Allocations: 12098)



ActionView::Template::Error (ReferenceError: TextEncoder is not defined):
    1: <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, {prerender: true}) %>

(execjs):8571:23
(execjs):118:18
app/views/hello/index.html.erb:1
Started GET "/hello_world" for ::1 at 2022-08-04 16:35:03 -0700

ActionController::RoutingError (No route matches [GET] "/hello_world"):

Started GET "/" for ::1 at 2022-08-04 16:35:06 -0700
Processing by HelloController#index as HTML
  Rendering layout layouts/application.html.erb
  Rendering hello/index.html.erb within layouts/application
[Webpacker] Everything's up-to-date. Nothing to do
[Webpacker] Everything's up-to-date. Nothing to do
  Rendered hello/index.html.erb within layouts/application (Duration: 62.8ms | Allocations: 7385)
  Rendered layout layouts/application.html.erb (Duration: 63.7ms | Allocations: 7458)
Completed 500 Internal Server Error in 68ms (ActiveRecord: 0.0ms | Allocations: 7918)



ActionView::Template::Error (ReferenceError: TextEncoder is not defined):
    1: <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, {prerender: true}) %>

(execjs):8571:23
(execjs):118:18
app/views/hello/index.html.erb:1

It seems to happen in the master branch as well.

[justin808]

Why should we keep supporting the bundling of React with this gem? What's the reason to skip using yarn?

I think we should have a major version bump and remove support for https://github.com/reactjs/react-rails#use-with-asset-pipeline

I opened up an issue to track this and other v3 changes: https://github.com/reactjs/react-rails/issues/1191

[justin808]

Does anybody know if React 18 works with the current codebase using yarn?

CC: @ro-savage

[justin808]

Let's reopen this one if we want to support more Ruby gem bundled JS code.

NPM is a better source for React.

@BookOfGreg Feel free to reopen if feel we should include this in a release.