"TypeError: dispatcher.useId is not a function" when install material ui

[gnortpro]

What is the problem?

I created MUI form with command blitz install material-ui, I try to use MUI form in tsx file but get error "TypeError: dispatcher.useId is not a function"

Paste all your error logs here:

TypeError: dispatcher.useId is not a function
    at useId (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react/cjs/react.development.js:1697:21)
    at useId (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/@mui/utils/useId.js:43:21)
    at TextField (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/@mui/material/node/TextField/TextField.js:184:40)
    at renderWithHooks (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5280:16)
    at renderForwardRef (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5449:18)
    at renderElement (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5594:11)
    at renderNodeDestructive (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5674:11)
    at renderNode (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5790:12)
    at renderNodeDestructive (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5700:9)
    at renderNode (/Users/kimtrong/Desktop/code/chungkhoan/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5790:12)

Paste all relevant code snippets here:

import { TextField } from "@mui/material"
import { Form, FormProps } from "app/core/components/Form"
import { usePaginatedQuery } from "blitz"
import getStockExchanges from "business/stock-exchanges/queries/getStockExchanges"
import { Suspense } from "react"
import { useFormContext } from "react-hook-form"
import { z } from "zod"
export { FORM_ERROR } from "app/core/components/Form"

const StockExchangesSelect = () => {
  const [{ stockExchanges, hasMore }] = usePaginatedQuery(getStockExchanges, {
    orderBy: { id: "asc" },
    skip: 100 * 0,
    take: 100,
  })

  const { register } = useFormContext()

  console.log("stockExchanges", stockExchanges)

  return (
    <select {...register("stockId")}>
      {stockExchanges.map((stockExchange) => (
        <option key={stockExchange.id} value={stockExchange.id}>
          {stockExchange?.name}
        </option>
      ))}
    </select>
  )
}

export function RecordForm<S extends z.ZodType<any, any>>(props: FormProps<S>) {
  return (
    <Form<S> {...props}>
      <TextField
        required
        name="stockCode"
        id="outlined-required"
        label="Required"
        defaultValue="Hello World"
      />
      {/* <LabeledTextField name="stockCode" label="Stock code" placeholder="Stock code" />
      <LabeledTextField name="amount" label="Amount" placeholder="Amount" />
      <LabeledTextField name="buyRate" label="Buy rate" placeholder="Buy rate" />
      <LabeledTextField name="buyDate" label="Buy date" placeholder="Buy date" />
      <LabeledTextField name="sellRate" label="Sell rate" placeholder="Sell rate" />
      <LabeledTextField name="sellDate" label="Sell date" placeholder="Sell date" /> */}
      <Suspense fallback={<div>Loading...</div>}>
        <StockExchangesSelect />
      </Suspense>
    </Form>
  )
}

What are detailed steps to reproduce this?

1. Run command blitz install material-ui
2. Select over write option when instal MUI
3. Add Text field to tsx file

Run blitz -v and paste the output here:

blitz: 0.45.0-canary.0 (global)
blitz: 0.45.0-canary.0 (local)

  Package manager: yarn 
  System:
    OS: macOS 12.3
    CPU: (8) x64 Apple M1
    Memory: 346.98 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.4 - ~/.nvm/versions/node/v14.19.0/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.3.0 => 3.3.0 
    blitz: 0.45.0-canary.0 => 0.45.0-canary.0 
    prisma: 3.3.0 => 3.3.0 
    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 

Please include below any other applicable logs and screenshots that show your problem:

No response

[gnortpro]

Fixed by change version react and react-dom https://github.com/mui/material-ui/issues/31190