react_ujs - npm Package Compare versions

Comparing version 2.7.0 to 2.7.1

package.json

 {
   "name": "react_ujs",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Rails UJS for the react-rails gem",
@@ -5,0 +5,0 @@ "main": "react_ujs/index.js",

react_ujs/dist/react_ujs.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("react-dom/server")):"function"==typeof define&&define.amd?define(["react","react-dom","react-dom/server"],t):"object"==typeof exports?exports.ReactRailsUJS=t(require("react"),require("react-dom"),require("react-dom/server")):e.ReactRailsUJS=t(e.React,e.ReactDOM,e.ReactDOMServer)}(self,((__WEBPACK_EXTERNAL_MODULE__787__,__WEBPACK_EXTERNAL_MODULE__156__,__WEBPACK_EXTERNAL_MODULE__997__)=>(()=>{var __webpack_modules__={10:(e,t,n)=>{var o=n(787),r=n(156),a=n(997),u=n(230),c=n(121),d=n(831),i=n(37),_=n(39);const{supportsHydration:s,reactHydrate:l,createReactRootLike:p}=n(198);var f={CLASS_NAME_ATTR:"data-react-class",PROPS_ATTR:"data-react-props",RENDER_ATTR:"data-hydrate",CACHE_ID_ATTR:"data-react-cache-id",TURBOLINKS_PERMANENT_ATTR:"data-turbolinks-permanent",jQuery:"undefined"!=typeof window&&void 0!==window.jQuery&&window.jQuery,components:{},findDOMNodes:function(e){var t,n,o=f.CLASS_NAME_ATTR;switch(typeof e){case"undefined":t="["+o+"]",n=document;break;case"object":t="["+o+"]",n=e;break;case"string":t=e+"["+o+"], "+e+" ["+o+"]",n=document}return f.jQuery?f.jQuery(t,n):n.querySelectorAll(t)},getConstructor:c,constructorFromGlobal:c,constructorFromRequireContext:d,constructorFromRequireContextWithGlobalFallback:i,useContext:function(e){this.getConstructor=i(e)},useContexts:function(e){this.getConstructor=_(e)},serverRender:function(e,t,n){var r=this.getConstructor(t),u=o.createElement(r,n);return a[e](u)},mountComponents:function(e){for(var t=f,n=t.findDOMNodes(e),r=0;r<n.length;++r){var a=n[r],u=a.getAttribute(t.CLASS_NAME_ATTR),c=t.getConstructor(u),d=a.getAttribute(t.PROPS_ATTR),i=d&&JSON.parse(d),_=a.getAttribute(t.RENDER_ATTR),v=a.getAttribute(t.CACHE_ID_ATTR),E=a.hasAttribute(t.TURBOLINKS_PERMANENT_ATTR);if(!c){var h="Cannot find component: '"+u+"'";throw console&&console.log&&console.log("%c[react-rails] %c"+h+" for element","font-weight: bold","",a),new Error(h+". Make sure your component is available to render.")}var m=this.components[v];void 0===m&&(m=o.createElement(c,i),E&&(this.components[v]=m)),m=_&&s()?l(a,m):p(a).render(m)}},unmountComponents:function(e){for(var t=f.findDOMNodes(e),n=0;n<t.length;++n){var o=t[n];r.unmountComponentAtNode(o)}},detectEvents:function(){u(this)},handleMount:function(e){var t=void 0;e&&e.target&&(t=e.target),f.mountComponents(t)},handleUnmount:function(e){var t=void 0;e&&e.target&&(t=e.target),f.unmountComponents(t)}};"undefined"!=typeof window&&f.detectEvents(),self.ReactRailsUJS=f,e.exports=f},230:(e,t,n)=>{var o=n(528),r=n(921),a=n(228),u=n(724),c=n(968);e.exports=function(e){e.handleEvent&&("undefined"!=typeof Turbolinks&&void 0!==Turbolinks.EVENTS&&c.teardown(e),a.teardown(e),u.teardown(e),r.teardown(e),o.teardown(e)),"addEventListener"in window?(e.handleEvent=function(e,t){document.addEventListener(e,t)},e.removeEvent=function(e,t){document.removeEventListener(e,t)}):(e.handleEvent=function(e,t){window.attachEvent(e,t)},e.removeEvent=function(e,t){window.detachEvent(e,t)}),"undefined"!=typeof Turbolinks&&Turbolinks.supported?void 0!==Turbolinks.EVENTS?c.setup(e):void 0!==Turbolinks.controller?a.setup(e):u.setup(e):"undefined"!=typeof $&&"function"==typeof $.pjax?r.setup(e):o.setup(e)}},528:e=>{e.exports={setup:function(e){"addEventListener"in window?e.handleEvent("DOMContentLoaded",e.handleMount):e.handleEvent("onload",e.handleMount)},teardown:function(e){e.removeEvent("DOMContentLoaded",e.handleMount),e.removeEvent("onload",e.handleMount)}}},921:e=>{e.exports={setup:function(e){e.handleEvent("ready",e.handleMount),e.handleEvent("pjax:end",e.handleMount),e.handleEvent("pjax:beforeReplace",e.handleUnmount)},teardown:function(e){e.removeEvent("ready",e.handleMount),e.removeEvent("pjax:end",e.handleMount),e.removeEvent("pjax:beforeReplace",e.handleUnmount)}}},228:e=>{e.exports={setup:function(e){e.handleEvent("turbolinks:load",e.handleMount)},teardown:function(e){e.removeEvent("turbolinks:load",e.handleMount)}}},968:e=>{e.exports={setup:function(e){e.handleEvent(Turbolinks.EVENTS.CHANGE,e.handleMount),e.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,e.handleUnmount)},teardown:function(e){e.removeEvent(Turbolinks.EVENTS.CHANGE,e.handleMount),e.removeEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,e.handleUnmount)}}},724:e=>{e.exports={setup:function(e){Turbolinks.pagesCached(0),e.handleEvent("page:change",e.handleMount),e.handleEvent("page:receive",e.handleUnmount)},teardown:function(e){e.removeEvent("page:change",e.handleMount),e.removeEvent("page:receive",e.handleUnmount)}}},121:function(module){var topLevel="undefined"==typeof window?this:window;module.exports=function(className){var constructor;return constructor=topLevel[className],constructor||(constructor=eval(className)),constructor&&constructor.default&&(constructor=constructor.default),constructor}},831:e=>{e.exports=function(e){return function(t){var n=t.split("."),o=n.shift(),r=n,a=e("./"+o);return r.forEach((function(e){a=a[e]})),a.__esModule&&(a=a.default),a}}},37:(e,t,n)=>{var o=n(121),r=n(831);e.exports=function(e){var t=r(e);return function(e){var n;try{n=t(e)}catch(t){try{n=o(e)}catch(e){console.error(t),console.error(e)}}return n}}},39:(e,t,n)=>{var o=n(121),r=n(831);e.exports=function(e){var t=e.map((e=>r(e)));return function(e){var n;try{var r,a,u=0;do{r=t[u];try{n=r(e)}catch(e){a||(a=e)}u+=1}while(u<t.length);if(!n)throw a}catch(a){try{n=o(e)}catch(e){console.error(a),console.error(e)}}return n}}},198:(e,t,n)=>{"use strict";n.r(t),n.d(t,{createReactRootLike:()=>_,reactHydrate:()=>i,supportsHydration:()=>d});var o=n(156),r=n.n(o);const a=(r().version?.split(".")[0]||16)>=18;let u=r();if(a)try{u=n(Object(function(){var e=new Error("Cannot find module 'react-dom/client'");throw e.code="MODULE_NOT_FOUND",e}()))}catch(e){u=r()}const c=u;function d(){return"function"==typeof c.hydrate||"function"==typeof c.hydrateRoot}function i(e,t){return"function"==typeof c.hydrateRoot?c.hydrateRoot(e,t):c.hydrate(t,e)}function _(e){return c.createRoot?c.createRoot(e):function(e){return{render:t=>c.render(t,e)}}(e)}},787:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__787__},156:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__156__},997:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__997__}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var n=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e].call(n.exports,n,n.exports,__webpack_require__),n.exports}__webpack_require__.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__(10);return __webpack_exports__})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("react-dom/server")):"function"==typeof define&&define.amd?define(["react","react-dom","react-dom/server"],t):"object"==typeof exports?exports.ReactRailsUJS=t(require("react"),require("react-dom"),require("react-dom/server")):e.ReactRailsUJS=t(e.React,e.ReactDOM,e.ReactDOMServer)}(self,((__WEBPACK_EXTERNAL_MODULE__787__,__WEBPACK_EXTERNAL_MODULE__156__,__WEBPACK_EXTERNAL_MODULE__997__)=>(()=>{var __webpack_modules__={10:(e,t,n)=>{var o=n(787),r=n(156),a=n(997),u=n(230),c=n(121),d=n(831),i=n(37),_=n(39);const{supportsHydration:s,reactHydrate:l,createReactRootLike:p}=n(198);var v={CLASS_NAME_ATTR:"data-react-class",PROPS_ATTR:"data-react-props",RENDER_ATTR:"data-hydrate",CACHE_ID_ATTR:"data-react-cache-id",TURBOLINKS_PERMANENT_ATTR:"data-turbolinks-permanent",jQuery:"undefined"!=typeof window&&void 0!==window.jQuery&&window.jQuery,components:{},findDOMNodes:function(e){var t,n,o=v.CLASS_NAME_ATTR;switch(typeof e){case"undefined":t="["+o+"]",n=document;break;case"object":t="["+o+"]",n=e;break;case"string":t=e+"["+o+"], "+e+" ["+o+"]",n=document}return v.jQuery?v.jQuery(t,n):n.querySelectorAll(t)},getConstructor:c,constructorFromGlobal:c,constructorFromRequireContext:d,constructorFromRequireContextWithGlobalFallback:i,useContext:function(e){this.getConstructor=i(e)},useContexts:function(e){this.getConstructor=_(e)},serverRender:function(e,t,n){var r=this.getConstructor(t),u=o.createElement(r,n);return a[e](u)},mountComponents:function(e){for(var t=v,n=t.findDOMNodes(e),r=0;r<n.length;++r){var a=n[r],u=a.getAttribute(t.CLASS_NAME_ATTR),c=t.getConstructor(u),d=a.getAttribute(t.PROPS_ATTR),i=d&&JSON.parse(d),_=a.getAttribute(t.RENDER_ATTR),f=a.getAttribute(t.CACHE_ID_ATTR),E=a.hasAttribute(t.TURBOLINKS_PERMANENT_ATTR);if(!c){var h="Cannot find component: '"+u+"'";throw console&&console.log&&console.log("%c[react-rails] %c"+h+" for element","font-weight: bold","",a),new Error(h+". Make sure your component is available to render.")}var m=this.components[f];void 0===m&&(m=o.createElement(c,i),E&&(this.components[f]=m)),m=_&&s()?l(a,m):p(a).render(m)}},unmountComponents:function(e){for(var t=v.findDOMNodes(e),n=0;n<t.length;++n){var o=t[n];r.unmountComponentAtNode(o)}},detectEvents:function(){u(this)},handleMount:function(e){var t=void 0;e&&e.target&&(t=e.target),v.mountComponents(t)},handleUnmount:function(e){var t=void 0;e&&e.target&&(t=e.target),v.unmountComponents(t)}};"undefined"!=typeof window&&v.detectEvents(),self.ReactRailsUJS=v,e.exports=v},230:(e,t,n)=>{var o=n(528),r=n(921),a=n(228),u=n(724),c=n(968);e.exports=function(e){e.handleEvent&&("undefined"!=typeof Turbolinks&&void 0!==Turbolinks.EVENTS&&c.teardown(e),a.teardown(e),u.teardown(e),r.teardown(e),o.teardown(e)),"addEventListener"in window?(e.handleEvent=function(e,t){document.addEventListener(e,t)},e.removeEvent=function(e,t){document.removeEventListener(e,t)}):(e.handleEvent=function(e,t){window.attachEvent(e,t)},e.removeEvent=function(e,t){window.detachEvent(e,t)}),"undefined"!=typeof Turbolinks&&Turbolinks.supported?void 0!==Turbolinks.EVENTS?c.setup(e):void 0!==Turbolinks.controller?a.setup(e):u.setup(e):"undefined"!=typeof $&&"function"==typeof $.pjax?r.setup(e):o.setup(e)}},528:e=>{e.exports={setup:function(e){"addEventListener"in window?e.handleEvent("DOMContentLoaded",e.handleMount):e.handleEvent("onload",e.handleMount)},teardown:function(e){e.removeEvent("DOMContentLoaded",e.handleMount),e.removeEvent("onload",e.handleMount)}}},921:e=>{e.exports={setup:function(e){e.handleEvent("ready",e.handleMount),e.handleEvent("pjax:end",e.handleMount),e.handleEvent("pjax:beforeReplace",e.handleUnmount)},teardown:function(e){e.removeEvent("ready",e.handleMount),e.removeEvent("pjax:end",e.handleMount),e.removeEvent("pjax:beforeReplace",e.handleUnmount)}}},228:e=>{e.exports={setup:function(e){e.handleEvent("turbolinks:load",e.handleMount)},teardown:function(e){e.removeEvent("turbolinks:load",e.handleMount)}}},968:e=>{e.exports={setup:function(e){e.handleEvent(Turbolinks.EVENTS.CHANGE,e.handleMount),e.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,e.handleUnmount)},teardown:function(e){e.removeEvent(Turbolinks.EVENTS.CHANGE,e.handleMount),e.removeEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,e.handleUnmount)}}},724:e=>{e.exports={setup:function(e){Turbolinks.pagesCached(0),e.handleEvent("page:change",e.handleMount),e.handleEvent("page:receive",e.handleUnmount)},teardown:function(e){e.removeEvent("page:change",e.handleMount),e.removeEvent("page:receive",e.handleUnmount)}}},121:function(module){var topLevel="undefined"==typeof window?this:window;module.exports=function(className){var constructor;return constructor=topLevel[className],constructor||(constructor=eval(className)),constructor&&constructor.default&&(constructor=constructor.default),constructor}},831:e=>{e.exports=function(e){return function(t){var n=t.split("."),o=n.shift(),r=n,a=e("./"+o);return r.forEach((function(e){a=a[e]})),a.__esModule&&(a=a.default),a}}},37:(e,t,n)=>{var o=n(121),r=n(831);e.exports=function(e){var t=r(e);return function(e){var n;try{n=t(e)}catch(t){try{n=o(e)}catch(e){console.error(t),console.error(e)}}return n}}},39:(e,t,n)=>{var o=n(121),r=n(831);e.exports=function(e){var t=e.map((e=>r(e)));return function(e){var n;try{var r,a,u=0;do{r=t[u];try{n=r(e)}catch(e){a||(a=e)}u+=1}while(u<t.length);if(!n)throw a}catch(a){try{n=o(e)}catch(e){console.error(a),console.error(e)}}return n}}},198:(e,t,n)=>{"use strict";n.r(t),n.d(t,{createReactRootLike:()=>i,reactHydrate:()=>d,supportsHydration:()=>c});var o=n(156),r=n.n(o);let a=r();if(void 0!==r()&&(r().version.split(".")[0]||16)>=18)try{a=n(Object(function(){var e=new Error("Cannot find module 'react-dom/client'");throw e.code="MODULE_NOT_FOUND",e}()))}catch(e){a=r()}const u=a;function c(){return"function"==typeof u.hydrate||"function"==typeof u.hydrateRoot}function d(e,t){return"function"==typeof u.hydrateRoot?u.hydrateRoot(e,t):u.hydrate(t,e)}function i(e){return u.createRoot?u.createRoot(e):function(e){return{render:t=>u.render(t,e)}}(e)}},787:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__787__},156:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__156__},997:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__997__}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var n=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e].call(n.exports,n,n.exports,__webpack_require__),n.exports}__webpack_require__.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__(10);return __webpack_exports__})()));

react_ujs/src/reactDomClient.js

 import ReactDOM from "react-dom"
 
-const reactMajorVersion = ReactDOM.version?.split('.')[0] || 16
+let reactDomClient = ReactDOM
+if (typeof ReactDOM != "undefined") {
+  const reactMajorVersion = ReactDOM.version.split('.')[0] || 16
 
-// TODO: once we require React 18, we can remove this and inline everything guarded by it.
-const supportsRootApi = reactMajorVersion >= 18
+  // TODO: once we require React 18, we can remove this and inline everything guarded by it.
+  const supportsRootApi = reactMajorVersion >= 18
 
-let reactDomClient = ReactDOM
-
-if (supportsRootApi) {
-  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
-  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
-  // Unfortunately, it only converts the error to a warning.
-  try {
-    // eslint-disable-next-line global-require,import/no-unresolved
-    reactDomClient = require('react-dom/client');
-  } catch (e) {
-    // We should never get here, but if we do, we'll just use the default ReactDOM
-    // and live with the warning.
-    reactDomClient = ReactDOM;
+  if (supportsRootApi) {
+    // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
+    // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
+    // Unfortunately, it only converts the error to a warning.
+    try {
+      // eslint-disable-next-line global-require,import/no-unresolved
+      reactDomClient = require('react-dom/client');
+    } catch (e) {
+      // We should never get here, but if we do, we'll just use the default ReactDOM
+      // and live with the warning.
+      reactDomClient = ReactDOM;
+    }
   }
@@ -22,0 +23,0 @@ }

README.md

@@ -8,3 +8,3 @@ # React-Rails
 ## 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`.
 
@@ -18,5 +18,20 @@ ## Summary
 
+---
+## 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, [[e-mail]](mailto:[e-mail]). 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 [[e-mail]](mailto:[e-mail]). 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.
@@ -30,6 +45,9 @@ * Source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app
 - [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)
@@ -50,5 +68,7 @@ - [View Helper](#view-helper)
   - [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)
@@ -73,3 +93,3 @@ - [Undefined Set](#undefined-set)
 
-#### 1) Create a new Rails app:
+1. Create a new Rails app:
 Prevent installing default javascript dependencies by using `--skip-javascript` option:
@@ -82,3 +102,3 @@
 
-#### 2) Install `shakapacker`:
+2. Install `shakapacker`:
 ```bash
@@ -89,3 +109,3 @@ $ bundle add shakapacker --strict
 
-#### 3) Install `react` and some other required npm packages:
+3. Install `react` and some other required npm packages:
 ```bash
@@ -108,3 +128,3 @@ $ yarn add react react-dom @babel/preset-react prop-types \
 
-#### 4) Install `react-rails`:
+4. Install `react-rails`:
 ```bash
@@ -121,3 +141,3 @@ $ bundle add 'react-rails' --strict
 
-#### 5) Generate your first component:
+5. Generate your first component:
 ```bash
@@ -142,3 +162,3 @@ $ rails g react:component HelloWorld greeting:string
 
-#### 6) [Render it in a Rails view](#view-helper):
+6. [Render it in a Rails view](#view-helper):
 
@@ -150,3 +170,3 @@ ```erb
 
-##### 7) Lets Start the app:
+7. Lets Start the app:
 ```bash
@@ -157,3 +177,3 @@ $ rails s
 
-##### 7) Run dev server (optional)
+8. Run dev server (optional)
 In order to run dev server with HMR feature you need to parallely run:
@@ -760,2 +780,18 @@
 ## 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
@@ -762,0 +798,0 @@ 1) While using installers.(rails webpacker:install:react && rails webpacker:install)

No alert changes

Improved metrics

Total package byte prevSize

69861

increased by3.37%

Lines of code

449

increased by0.45%

Number of lines in readme file

849

increased by4.43%

No dependency changes