React 18 features usage

[Kay2dan]

Hi, I was just reading about useTransition and when I tried to import it into my component, I got the TS error :

`Module React has no exported member 'useTransition'

As per my understanding, in order to use these we need to use the createRoot func, which I presume Blitz.js already does. So, what am I doing wrong?

Loaded env from /home/sk/www/aim-high/.env.local
Loaded env from /home/sk/www/aim-high/.env
Linux 5.4 | linux-x64 | Node: v16.13.0

blitz: 0.45.3 (global)
blitz: 0.45.3 (local)

  Package manager: npm 
  System:
    OS: Linux 5.4 Linux Mint 20.2 (Uma)
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 261.33 MB / 15.64 GB
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: Not Found
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.x => 3.8.1 
    blitz: 0.45.3 => 0.45.3 
    prisma: 3.x => 3.8.1 
    react: 18.0.0-beta-149b420f6-20211119 => 18.0.0-beta-149b420f6-20211119 
    react-dom: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    typescript: ~4.5 => 4.5.5 

[beerose]

Looks like maybe your React version doesn't export it (the alpha one). Try setting installing react in version 18 (there was a stable release few days ago).

[Kay2dan]

Thanks, will give this a go & update here

[Kay2dan]

Im having a really hard time since upgrading my repo to the latest BlitzJs (as per above env printout in the parent post).
Two main issues:

Issue 1:
New React hooks from version 18 are still not accessible. Following is what I tried, to no success. Still get error:
Module React has no exported member 'useTransition'.

I tried:

• Upgraded React to official v18.0.
• Looking for latest version of @types/react (official ones still at v17.*)

---

Issue 2:
My tests are failing with error:
Cannot find module 'react-test-renderer' from 'node_modules/@testing-library/react-hooks/lib/pure.js'

I tried:

• Reinstall of latest version of React-Testing-Library (v11.2.8-0alpha.1)

---

My package.json:

{
  "name": "repoName",
  "version": "1.0.0",
  "scripts": {
    "dev": "blitz dev",
    "build": "npm run partytown && blitz build",
    "partytown": "partytown copylib public/~partytown",
    "start": "blitz start",
    "studio": "blitz prisma studio",
    "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
    "test": "jest",
    "test:watch": "jest --watch",
    "prepare": "husky install",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },
  "prisma": {
    "schema": "db/schema.prisma"
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix"
    ]
  },
  "dependencies": {
    "@builder.io/partytown": "0.5.0",
    "@hookform/resolvers": "2.x",
    "@next/bundle-analyzer": "12.1.0",
    "@prisma/client": "3.x",
    "@sendgrid/mail": "7.4.7",
    "@zeit/next-sass": "1.0.1",
    "babel-plugin-superjson-next": "0.3.0",
    "blitz": "0.45.3",
    "chalk": "1.0.0",
    "cloudinary-react": "1.6.8",
    "cross-env": "7.0.3",
    "cuid": "2.1.8",
    "date-fns": "2.16.1",
    "framer-motion": "6.2.8",
    "passport-google-oauth20": "2.0.0",
    "react": "18.0.0",
    "react-calendar": "^3.4.0",
    "react-dom": "18.0.0",
    "react-error-boundary": "2.3.2",
    "react-hook-form": "7.28.0",
    "react-use": "17.2.4",
    "recoil": "0.6.1",
    "sass": "1.26.10",
    "secure-password": "4.0.0",
    "superjson": "1.7.4",
    "twilio": "3.71.2",
    "twilio-video": "2.18.1",
    "zod": "3.x"
  },
  "devDependencies": {
    "@hookform/devtools": "3.1.0",
    "@prisma/client": "3.8.1",
    "@tailwindcss/forms": "0.4.0",
    "@testing-library/jest-dom": "5.11.6",
    "@testing-library/react": "11.2.8-alpha.1",
    "@testing-library/react-hooks": "3.4.2",
    "@types/jest": "26.0.15",
    "@types/preview-email": "2.0.1",
    "@types/react": "17.0.43",
    "@types/react-test-renderer": "17.0.1",
    "@types/secure-password": "3.1.0",
    "@typescript-eslint/eslint-plugin": "4.x",
    "@typescript-eslint/parser": "4.28.5",
    "@welldone-software/why-did-you-render": "6.2.3",
    "autoprefixer": "10.2.4",
    "babel-eslint": "10.1.0",
    "chance": "1.1.7",
    "eslint": "7.x",
    "eslint-config-next": "11.0.1",
    "husky": "7.x",
    "lint-staged": "11.x",
    "postcss": "8.2.7",
    "prettier": "2.6.1",
    "prettier-plugin-prisma": "3.x",
    "pretty-quick": "3.1.3",
    "preview-email": "3.0.5",
    "prisma": "3.x",
    "tailwindcss": "3.0.2",
    "typescript": "~4.5"
  },
  "private": true
}

[Kay2dan]

Upgrading to React v18 is not recommended:

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