README.md in react-rails-2.7.0 vs README.md in react-rails-2.7.1

- old
+ new

@@ -3,34 +3,52 @@ [![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails) [![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs) [![Ruby](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml/badge.svg)](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml) ## News -v2.7.0.rc.2 is out on [Ruby Gems](https://rubygems.org/gems/react-rails/versions/2.7.0.rc.2) and [NPM v2.7.0-rc.2](https://www.npmjs.com/package/react_ujs/v/2.7.0-rc.2). Please try it out! +v2.7.0 is released. Please try it out and report any issues. We'll try to address any critical issues ASAP. We're going shortly release 3.0 which improves support for SSR, but it's a breaking change because it requires updating dependencies, such as going from `webpacker` to `shakapacker`. ## Summary React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits: * Automatically renders React server-side and client-side * Supports Webpacker 4.x, 3.x, 2.x, 1.1+ or Shakapacker v6+ * Supports Sprockets 4.x, 3.x, 2.x * Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/) +--- +## ShakaCode Support + +[ShakaCode](https://www.shakacode.com) offers support for upgrading this gem, and related gems such as Webpacker and using Shakapacker. If interested, contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com). We're also [hiring](https://jobs.lever.co/shakacode/3bdbfdb3-4495-4611-a279-01dddb351abe)! + +Here's a testimonial of how ShakaCode can help, from [Florian Gâßler](https://github.com/FGoessler) of [Blinkist](https://www.blinkist.com/), January 2, 2023: +> Hey Justin πŸ‘‹ +> +> I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍 +> +> On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. πŸ˜‰ +> +> Have a great 2023 and maybe we get to work together again later in the year! πŸ™Œ + +Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2118154). Here's [another review of a Shakapacker migration that led to more work](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2096078). + ## Resouces * [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE). Then join the channel `#react-rails`. -* If you need help upgrading `react-rails`, `webpacker`, or JS packages, contact [justin@shakacode.com](mailto:justin@shakacode.com). The [ShakaCode.com](https://www.shakacode.com) team is helping to maintain this Ruby gem. Check out [this discussion](https://github.com/reactjs/react-rails/discussions/1200). * If you are upgrading, you might consider migrating to the [react_on_rails](https://github.com/shakacode/react_on_rails) gem. * Source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> ## Contents - [Get started with Shakapacker](#get-started-with-shakapacker) + - [Component name](#component-name) - [File naming](#file-naming) - [Typescript support](#typescript-support) + - [Test component](#test-component) - [Use with Asset Pipeline](#use-with-asset-pipeline) - [Custom JSX Transformer](#custom-jsx-transformer) + - [Transform Plugin Options](#transform-plugin-options) - [React.js versions](#reactjs-versions) - [View Helper](#view-helper) - [Custom View Helper](#custom-view-helper) - [UJS](#ujs) - [Mounting & Unmounting](#mounting--unmounting) @@ -42,13 +60,15 @@ - [Custom Server Renderer](#custom-server-renderer) - [Controller Actions](#controller-actions) - [Component Generator](#component-generator) - [Use with JBuilder](#use-with-jbuilder) - [Camelize Props](#camelize-props) + - [Changing Component Templates](#changing-component-templates) - [Upgrading](#upgrading) - [2.3 to 2.4](#23-to-24) - [Common Errors](#common-errors) + - [Getting warning for `Can't resolve 'react-dom/client'` in React < 18](#getting-warning-for-cant-resolve-react-domclient-in-react--18) - [During installation](#during-installation) - [Undefined Set](#undefined-set) - [Using TheRubyRacer](#using-therubyracer) - [HMR](#hmr) - [Related Projects](#related-projects) @@ -64,25 +84,25 @@ ## Get started with Shakapacker _Alternatively, get started with [Sprockets](#use-with-asset-pipeline)_ -#### 1) Create a new Rails app: +1. Create a new Rails app: Prevent installing default javascript dependencies by using `--skip-javascript` option: ```bash $ rails new my-app --skip-javascript $ cd my-app ``` -#### 2) Install `shakapacker`: +2. Install `shakapacker`: ```bash $ bundle add shakapacker --strict $ rails webpacker:install ``` -#### 3) Install `react` and some other required npm packages: +3. Install `react` and some other required npm packages: ```bash $ yarn add react react-dom @babel/preset-react prop-types \ css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin ``` @@ -96,11 +116,11 @@ + "@babel/preset-react" ] }, ``` -#### 4) Install `react-rails`: +4. Install `react-rails`: ```bash $ bundle add 'react-rails' --strict $ rails generate react:install ``` @@ -108,11 +128,11 @@ - `app/javascript/components/` directory for your React components - [`ReactRailsUJS`](#ujs) setup in `app/javascript/packs/application.js` - `app/javascript/packs/server_rendering.js` for [server-side rendering](#server-side-rendering) -#### 5) Generate your first component: +5. Generate your first component: ```bash $ rails g react:component HelloWorld greeting:string ``` You can also generate your component in a subdirectory: @@ -128,24 +148,24 @@ Example: ```erb <%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %> ``` -#### 6) [Render it in a Rails view](#view-helper): +6. [Render it in a Rails view](#view-helper): ```erb <!-- erb: paste this in view --> <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %> ``` -##### 7) Lets Start the app: +7. Lets Start the app: ```bash $ rails s ``` Output: greeting: Hello from react-rails", inspect webpage in your browser to see the change in tag props. -##### 7) Run dev server (optional) +8. Run dev server (optional) In order to run dev server with HMR feature you need to parallely run: ```bash $ ./bin/webpacker-dev-server ``` @@ -743,9 +763,25 @@ - global find+replace `React.Prop` -> `Prop` - add `import PropTypes from 'prop-types'` (Webpacker only) - re-run `bundle exec rails webpacker:install:react` to update npm packages (Webpacker only) ## Common Errors +### Getting warning for `Can't resolve 'react-dom/client'` in React < 18 + +You may see a warning like this when building a Webpack bundle using any version of React below 18. This warning can be safely [suppressed](https://webpack.js.org/configuration/other-options/#ignorewarnings) in your Webpack configuration. The following is an example of this suppression in `config/webpack/webpack.config.js`: + +```diff +- const { webpackConfig } = require('shakapacker') ++ const { webpackConfig, merge } = require('shakapacker') + ++const ignoreWarningsConfig = { ++ ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/], ++}; + +- module.exports = webpackConfig ++ module.exports = merge({}, webpackConfig, ignoreWarningsConfig) +``` + ### During installation 1) While using installers.(rails webpacker:install:react && rails webpacker:install) Error: ``` public/packs/manifest.json. Possible causes: