upgrade react version to 18 #BLT-1231 #BLT-1232

packages/botonic-plugin-flow-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-flow-builder",
-  "version": "0.30.5",
+  "version": "0.31.0-alpha.2",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use Flow Builder to show your contents",
@@ -14,7 +14,7 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet 'src/**/*.ts*'"
   },
   "dependencies": {
-    "@botonic/react": "^0.30.3",
+    "@botonic/react": "0.31.0-alpha.2",
     "axios": "^1.7.2",
     "uuid": "^10.0.0"
   },

packages/botonic-plugin-flow-builder/src/action/index.tsx

@@ -46,15 +46,15 @@
 
   render(): JSX.Element | JSX.Element[] {
     const { contents } = this.props
-    const request = this.context
+    const request = this.context as ActionRequest
     return contents.map(content => content.toBotonic(content.id, request))
   }
 }
 
 export class FlowBuilderMultichannelAction extends FlowBuilderAction {
   render(): JSX.Element | JSX.Element[] {
     const { contents } = this.props
-    const request = this.context
+    const request = this.context as ActionRequest
     return (
       <Multichannel text={{ buttonsAsText: false }}>
         {contents.map(content => content.toBotonic(content.id, request))}

packages/botonic-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.30.4",
+  "version": "0.31.0-alpha.2",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -22,33 +22,33 @@
   "dependencies": {
     "@botonic/core": "^0.30.0",
     "axios": "^1.7.2",
-    "emoji-picker-react": "^4.4.9",
+    "emoji-picker-react": "^4.12.0",
     "lodash.merge": "^4.6.2",
-    "markdown-it": "^12.0.6",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-json-tree": "^0.15.0",
+    "markdown-it": "^12.3.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-json-tree": "^0.18.0",
     "react-router-dom": "^5.3.4",
-    "react-textarea-autosize": "^8.5.3",
-    "styled-components": "^5.3.0",
+    "react-textarea-autosize": "^8.5.5",
+    "styled-components": "^5.3.11",
     "ua-parser-js": "^1.0.39",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.1",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
     "@types/parse5": "^7.0.0",
-    "@types/react": "^16.14.56",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.34",
     "@types/uuid": "^10.0.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "copyfiles": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",
     "intersection-observer": "^0.12.2",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.0.0",
     "typescript": "5.0.4"
   },
   "engines": {

packages/botonic-react/src/dev-app.jsx

@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { SENDERS } from './index-types'
 import { ReactBot } from './react-bot'
@@ -119,10 +119,10 @@ export class DevApp extends WebchatApp {
 
   render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(() => {
-      render(
-        this.getComponent(dest, optionsAtRuntime),
-        this.getReactMountNode(dest)
-      )
+      const devAppComponent = this.getComponent(dest, optionsAtRuntime)
+      const container = this.getReactMountNode(dest)
+      const reactRoot = createRoot(container)
+      reactRoot.render(devAppComponent)
     })
   }
 

packages/botonic-react/src/webchat-app.jsx

@@ -1,7 +1,7 @@
 import { HubtypeService, INPUT } from '@botonic/core'
 import merge from 'lodash.merge'
 import React, { createRef } from 'react'
-import { render, unmountComponentAtNode } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { WEBCHAT } from './constants'
 import { SENDERS, Typing } from './index-types'
@@ -65,6 +65,7 @@
     this.server = server
     this.webchatRef = createRef()
     this.appId = appId
+    this.reactRoot = null
   }
 
   createRootElement(host) {
@@ -94,7 +95,9 @@
   }
 
   getReactMountNode(node) {
-    if (!node) node = this.host
+    if (!node) {
+      node = this.host
+    }
     return node.shadowRoot ? node.shadowRoot : node
   }
 
@@ -372,18 +375,19 @@
 
   destroy() {
     if (this.hubtypeService) this.hubtypeService.destroyPusher()
-    unmountComponentAtNode(this.host)
+    this.reactRoot?.unmount()
     if (this.storage) this.storage.removeItem(this.storageKey)
   }
 
   async render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(async () => {
       const isVisible = await this.resolveWebchatVisibility(optionsAtRuntime)
-      if (isVisible)
-        render(
-          this.getComponent(dest, optionsAtRuntime),
-          this.getReactMountNode(dest)
-        )
+      if (isVisible) {
+        const webchatComponent = this.getComponent(dest, optionsAtRuntime)
+        const container = this.getReactMountNode(dest)
+        this.reactRoot = createRoot(container) // createRoot(container!) if you use TypeScript
+        this.reactRoot.render(webchatComponent)
+      }
     })
   }
 }

packages/botonic-react/src/webchat/session-view.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import JSONTree from 'react-json-tree'
+import { JSONTree } from 'react-json-tree'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'

packages/botonic-react/src/webview-app.tsx

@@ -2,7 +2,7 @@
 import { getString, params2queryString, PROVIDER } from '@botonic/core'
 import axios from 'axios'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { BrowserRouter, Route } from 'react-router-dom'
 
 import { CloseWebviewOptions, WebviewRequestContext } from './contexts'
@@ -110,11 +110,13 @@
   }
 
   render(dest) {
-    render(
+    const component = (
       <BrowserRouter>
         <App webviews={this.webviews} locales={this.locales} />
-      </BrowserRouter>,
-      dest
+      </BrowserRouter>
     )
+    const container = dest
+    const reactRoot = createRoot(container)
+    reactRoot.render(component)
   }
 }

packages/botonic-react/tests/helpers/test-utils.jsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import * as React from 'react'
 import TestRenderer from 'react-test-renderer'
 

packages/botonic-react/tests/webchat/usewebchat.test.jsx

@@ -1,4 +1,8 @@
-import { act } from '@testing-library/react-hooks'
+/**
+ * @jest-environment jsdom
+ */
+
+import { act } from '@testing-library/react'
 import React from 'react'
 
 import { Message } from '../../src/components'

packages/botonic-react/tests/webchat/webchat-app.test.jsx

@@ -3,7 +3,7 @@
  * @jest-environment-options {"url": "https://jestjs.io/"}
  */
 
-import { screen } from '@testing-library/react'
+import { act, screen } from '@testing-library/react'
 
 import { ROLES } from '../../src/constants'
 import { WebchatApp } from '../../src/webchat-app'
@@ -32,16 +32,22 @@ describe('TEST: Webchat App', () => {
 
   it('TEST: WebchatApp renders webchat', async () => {
     const webchatApp = new WebchatApp({})
-    await webchatApp.render()
+    await act(async () => {
+      await webchatApp.render()
+    })
+
     expectToHaveRoles([ROLES.TRIGGER_BUTTON], screen)
     expectNotToHaveRoles([ROLES.WEBCHAT], screen)
-    const root = document.body.querySelector('#root')
-    expect(root.shadowRoot).toBeFalsy()
+    const rootElement = document.getElementById('root')
+    expect(rootElement.shadowRoot).toBeFalsy()
   })
 
   it('TEST: WebchatApp renders webchat in shadowDOM', async () => {
     const webchatApp = new WebchatApp({ shadowDOM: true })
-    await webchatApp.render()
+    await act(async () => {
+      await webchatApp.render()
+    })
+
     expectNotToHaveRoles([ROLES.TRIGGER_BUTTON], screen)
     expectNotToHaveRoles([ROLES.WEBCHAT], screen)
     const root = document.body.querySelector('#root')