Next.js Discord

Discord Forum

Pre-rendering error with @radix-ui/react-toast

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hey all, I'm getting this pre-rendering error when trying to deploy my project to Vercel: 
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useState')
    at exports.useState (/vercel/path0/node_modules/react/cjs/react.production.min.js:25:394)
    at $054eb8030ebde76e$export$f5d03d415824e0e (file:///vercel/path0/node_modules/@radix-ui/react-toast/dist/index.mjs:42:37)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:114:273)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:119:95)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:115:9)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at Ge (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:115:9)
    at Z (/vercel/path0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)


It seems to be caused by @radix-ui/react-toast, but I'm not sure why it's happening exactly.

6 Replies

Cape lionOP
Here's my the comonent I created for the Toast :
import { Dispatch, SetStateAction } from 'react'
import { Root, Viewport } from '@radix-ui/react-toast'
import { GearIcon } from '@radix-ui/react-icons'
import { ToastProps } from '../types'

export const Toast = ({
  title,
  description,
  open,
  setOpen
}: {
  title: string
  description: string
  open: boolean
  setOpen: Dispatch<SetStateAction<ToastProps>>
}) => {
  return (
    <>
      <Root
        className='bg-zinc-800 border border-zinc-700 rounded-md py-2 px-4 flex items-center gap-x-3 mr-4 mb-4'
        open={open}
        onOpenChange={(open) => setOpen((prev) => ({ ...prev, open }))}>
        <div>
          <GearIcon className='w-8 h-8 bg-indigo-500/20 text-indigo-300 rounded-full p-2 animate-spin' />
        </div>
        <div>
          <span className='font-semibold text-base text-white'>{title}</span>
          <p className='text-xs font-zinc-400'>{description}</p>
        </div>
      </Root>
      <Viewport className='fixed bottom-0 right-0 flex flex-col max-w-full m-0 list-none outline-none' />
    </>
  )
}
It's then used like this:
Cape lionOP
I'm using the pages router, so that shouldn't be the issue, right?
Rafael Almeida
yeah you don't need 'use client' if you are using the pages dir. the problem might be from a bad import but I can't see anything odd with a quick glance at this code