Error: Minified React error #321; when deploying next.js project on vercel

Question

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at S (/vercel/path0/node_modules/react/cjs/react.production.min.js:18:327)
    at Object.exports.useState (/vercel/path0/node_modules/react/cjs/react.production.min.js:23:277)
    at SessionProvider (/vercel/path0/node_modules/next-auth/react/index.js:422:31)
    at Wc (/usr/local/share/.config/yarn/global/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/usr/local/share/.config/yarn/global/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/usr/local/share/.config/yarn/global/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)

/// app.js

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Top from "@components/top";
import Footer from "@components/footer";
import { SessionProvider } from "next-auth/react";
import { SWRConfig } from "swr";
import { RecoilRoot } from "recoil";
import { Session } from "next-auth";

    function MyApp({
      Component,
      pageProps: { session, ...pageProps },
    }: AppProps<{
      session: Session;
    }>) {
      return (
        <SessionProvider session={session}>
          <SWRConfig
            value={{
              fetcher: (url: string) =>
                fetch(url).then((response) => response.json()),
            }}
          >
            <RecoilRoot>
              <div className=" min-w-[300px]  max-h-fit flex flex-col items-center min-h-[100vh] relative">
                <Top />
                <section className=" mt-10 mx-3 flex-column items-center pb-[60px]">
                  <Component {...pageProps} />
                </section>
                <Footer />
              </div>
            </RecoilRoot>
          </SWRConfig>
        </SessionProvider>
      );
    }
    
    export default MyApp;

On almost every page this error happens when deploying.

I reinstalled npm and checked if I used hook in wrong way but seems not.

Is there any solution for this??

I'd just want to know where the errors happened.

Answer 1

Try using yarn instead:

yarn run build

I have tried using next build & npm run build but only yarn works in my case!