Search code examples
javascriptdeploymentnext.jsvercelpre-rendering

Error occurred prerendering page "/". Deployment Error Vercel | Next.js

I am trying to deploy my site via Vercel and while generating static pages, it throws the below error in logs

info  - Generating static pages (0/6)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:45:32)
    at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:686:46)
    at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:514:20)
    at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)
    at renderDocument (/vercel/path0/node_modules/next/dist/server/render.js:699:48)
    at renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:774:34)
    at async /vercel/path0/node_modules/next/dist/export/worker.js:273:36
info  - Generating static pages (1/6)
[]
info  - Generating static pages (2/6)
info  - Generating static pages (4/6)
info  - Generating static pages (6/6)
> Build error occurred
Error: Export encountered errors on following paths:
    /
    at /vercel/path0/node_modules/next/dist/export/index.js:500:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:74:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:987:17
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:74:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:861:13
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:82:25)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

I've tried to fix it by using the Prerender error guide Next.js provided but still wasn't able to fix it.

My pages directory structure is below

📦pages
 ┣ 📂api
 ┃ ┣ 📂auth
 ┃ ┃ ┗ 📜[...nextauth].js
 ┃ ┗ 📜hello.js
 ┣ 📂auth
 ┃ ┗ 📜signin.js
 ┣ 📂[postRoute]
 ┃ ┗ 📂[currentPost]
 ┃ ┃ ┗ 📜index.js
 ┣ 📜dashboard.js
 ┣ 📜edit.js
 ┣ 📜index.js
 ┗ 📜_app.js

And this is my index.js file

import Head from "next/head"
import Contribution from "../components/Contribution"
import Features from "../components/Features"
import Footer from "../components/Footer"
import Header from "../components/Header"
import Landing from "../components/Landing"
import SubFooter from "../components/SubFooter"
import styles from "../styles/Home.module.scss"

export default function Home() {
  return (
    <>
      <Head>
        <title>Skill Up | Credit Based Learning</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.container}>
        <Header />
        <Landing />
        <hr />
        <Features />
        <Contribution />
        <SubFooter />
        <Footer />
      </div>
    </>
  )
}

Thanks in advance!

Solution

  • In Landing.js,edit.js and index.js you have imported Fragment from 'react/cjs/react.development' instead of 'react'. React development doesn't exist in the scope of next build so it fails