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.

use development build locally it will provides helpful warnings about problems in your apps . then debug your app before deploying — monim
– monim, Commented Oct 4, 2022 at 12:02
@monim No error exist even on production mode on local. The problems only happen while deploying on vercel.... How could I get through with this problem? — Jung hyeonuk
– Jung hyeonuk, Commented Oct 6, 2022 at 16:19
you could Try to delete your node_modules and .next folder from your local project and then run npm run build again. — monim
– monim, Commented Oct 6, 2022 at 22:57

Mohammad Tbeishat · Accepted Answer · 2022-11-02 19:04:02Z

1

Try using yarn instead:

yarn run build

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

answered Nov 2, 2022 at 19:04

Mohammad Tbeishat

1,0968 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Terance Edmonds · Accepted Answer · 2023-03-24 05:38:57Z

-1

In my case, i had to change swcMinify: true to swcMinify: false in next.config.js

answered Mar 24, 2023 at 5:38

Terance Edmonds

771 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related