search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

TypeError: Cannot read properties of null (reading 'useReducer') #964

Closed matheeshaYapa closed 1 year ago

matheeshaYapa commented 1 year ago

The error occurs on production mode, when running next build in my NextJS project.

react-toastify-error

Following are the dependency list of the package.json

"dependencies": { "@nextui-org/react": "^1.0.0-beta.12", "@types/node": "20.1.7", "@types/react": "18.2.6", "@types/react-dom": "18.2.4", "eslint": "8.40.0", "eslint-config-next": "13.4.2", "googleapis": "^118.0.0", "next": "13.4.2", "react": "18.2.0", "react-dom": "18.2.0", "react-iconly": "^2.2.10", "react-toastify": "^9.1.3", "typescript": "5.0.4" }

matheeshaYapa commented 1 year ago

The error occurs on production mode, when running next build in my NextJS project.

react-toastify-error

Following are the dependency list of the package.json

"dependencies": { "@nextui-org/react": "^1.0.0-beta.12", "@types/node": "20.1.7", "@types/react": "18.2.6", "@types/react-dom": "18.2.4", "eslint": "8.40.0", "eslint-config-next": "13.4.2", "googleapis": "^118.0.0", "next": "13.4.2", "react": "18.2.0", "react-dom": "18.2.0", "react-iconly": "^2.2.10", "react-toastify": "^9.1.3", "typescript": "5.0.4" }

This issue occurs due to the node version. My current version was 18.x and after I downgraded to 16.x, production build ran without any issue.

khanakia commented 10 months ago

Any update on the fix? I do not think it has to do with the Node version.

Because "react-toastify": "^9.0.8" working fine no node v18.12.1 but when i upgrade to "react-toastify": "^9.1.3" then it breaks

khanakia commented 10 months ago

@fkhadra can you check this because it's a big issue we cannot update the package at all

khanakia commented 10 months ago

Ignore fixed it accordingly https://github.com/fkhadra/react-toastify/issues/889#issuecomment-1399455348

vishal-nath-chauhan commented 10 months ago

const ToastContainer = dynamic(() => import('react-toastify').then((module) => module.ToastContainer), { ssr: false, // Disable server-side rendering });

export const LazyToastContainer = () => ( <ToastContainer position="bottom-right" autoClose={5000} hideProgressBar={false} newestOnTop={false} rtl={false} pauseOnFocusLoss draggable pauseOnHover toastStyle={{ background: 'none' }} closeButton={false} /> );

load LazyToastContainer in your main component and see the magic

gretzl commented 8 months ago

A solution with example. The idea to use isMount for lazy components is used in NextJS documentation in some places, so it is officialy acceptable. 


function Layout({ yourParams }: LayoutProps) {
  const [isMount, setMount] = useState(false)
  useEffect(() => {
    setMount(true)
  }, [])
  return (
    <div>
      <Head>
        <title>"Your title</title>
        <meta name="description" content="Your content" />
        <link rel="icon" href="/logo.svg" />
      </Head>

      {isMount && (
        <ToastContainer
          style={{ width: '101%', height: '36px' }}
          position="bottom-center"
          toastClassName={({ type }) => contextClass[type || 'default']}
          hideProgressBar={true}
          icon={false}
          closeButton={false}
          newestOnTop={true}
          transition={Slide}
          bodyClassName={() => 'p-4 text-sm font-white font-med block'}
          autoClose={2000}
        />
      )}

      <div className="flex flex-col items-center ">
        <main className="flex justify-center items-center w-full">{children}</main>

      </div>
    </div>
  )
}
adesh1167 commented 3 months ago

Also, I noticed you didn't post any part of your code. A common cause of this issue is when you are using a hook outside of a component.