Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated React templates to use react 18 new root api #1142

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

spaceFitzpa
Copy link

  • Updated react and react-with-storybook example and test files to use React 18's new root API
  • This gets rid of the ReactDOM.render is no longer supported in React 18 error.

@spaceFitzpa
Copy link
Author

Are the int & Deduplicate deps on node 10.x and ubuntu-latest and Test on Node 12.x and ubuntu-latest checks done automatically or do I need to do something more here. I updated and ran tests locally and every thing is passing.

@azigler
Copy link

azigler commented Sep 4, 2022

This did not work for me, I got stuck with a jest error when trying to run tests after updating to React 18. Instead, I made these changes to successfully update everything to React 18:

/package.json:

"devDependencies": {
    "@babel/core": "^7.18.13",
    "@rollup/plugin-image": "^2.1.1",
    "@rollup/plugin-replace": "^4.0.0",
    "@rollup/plugin-url": "^7.0.0",
    "@size-limit/preset-small-lib": "^8.0.1",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addons": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@svgr/rollup": "^6.3.1",
    "@types/react": "^18.0.18",
    "@types/react-dom": "^18.0.6",
    "babel-loader": "^8.2.5",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "husky": "^8.0.1",
    "jest-transform-stub": "^2.0.0",
    "pinst": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "size-limit": "^8.0.1",
    "tsdx": "^0.14.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.2"
  }

jest config:

"jest": {
    "moduleNameMapper": {
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg|mdx)$": "jest-transform-stub"
    },
    "globals": {
      "IS_REACT_ACT_ENVIRONMENT": true
    }
  }

/example/package.json: You need to put a $ in front of the alias because it'll conflict with react-dom/client when trying to using React 18. If you remove the alias entirely, hotreloading stops working. You can use the latest parcel if you include parcel-bundler. The dist folder fills up over time, so I added a soft check to delete it.

{
  "name": "example",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html",
    "build": "rm -r ./dist | parcel build index.html"
  },
  "alias": {
    "$react-dom": "../node_modules/react-dom/profiling"
  },
  "devDependencies": {
    "parcel": "^2.7.0",
    "parcel-bundler": "^1.12.5"
  }
}

/example/index.tsx:

import * as React from "react"
import { createRoot } from "react-dom/client"
import { Thing } from "../."

const App = () => {
  return (
    <div>
      <Thing />
    </div>
  )
}

const container = document.getElementById("root")
const root = createRoot(container!)
root.render(<App />)

blah.test.tsx: now using React 18. We're using the act method to trigger the jest render to avoid a null error.

import React from "react"
import { createRoot } from "react-dom/client"
import { act } from "react-dom/test-utils"
import { Default as Thing } from "../stories/Thing.stories"

describe("Thing", () => {
  it("renders without crashing", () => {
    const container = document.createElement("div")
    const root = createRoot(container!)
    act(() => root.render(<Thing />))
  })
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants