Next js prerender error

Prerender error on next build since 10.0.6 — with node canvas #21702

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

chrome but does not matter (build time)

What operating system are you using?

macOS + linux on vercel

How are you deploying your application?

Describe the Bug

While building nextjs project with statically generated page with node canvas — it fails on prerendering since 10.0.6.
does not happen in 10.0.5 and below.
Happens both on vercel and locally.

This is the error:
Error occurred prerendering page «/pt-pt/editor». Read more: https://err.sh/next.js/prerender-error
Error: Module did not self-register: ‘/Users/tom/code/project/node_modules/canvas/build/Release/canvas.node’.
at Object.Module._extensions..node (internal/modules/cjs/loader.js:1208:18)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object. (/Users/tom/project/node_modules/canvas/lib/bindings.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)

Expected Behavior

Build should succeed.

To Reproduce

(My react version: «react»: «^16.14.0»,)

1. Create next 10.0.6 project
   2.Install fabric js (for canvas) — this is my version (from package-lock):
   «version»: «3.6.6»,
   «resolved»: «https://registry.npmjs.org/fabric/-/fabric-3.6.6.tgz»,
   «requires»: <
   «canvas»: «^2.6.1»,
   «jsdom»: «^15.1.0»
   >

3.create a next js statically generated file with the canvas object.
4.run next build.

The text was updated successfully, but these errors were encountered:

Источник

Error occurred prerendering page «/500» #23128

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

After upgrading to next 10.0.9 (I was using 10.0.5) during the build phase it is trying to create a 500 page I suppose. In my application it’s not possible, I’ve a complex _app.getInitialProps so I tried to create a 500.js (#22887). It’s still trying to create a 500 page, my static 500.js is ignored.

Expected Behavior

Use my static 500.js.

To Reproduce

I’ve some logic in my _getInitialProps. Everything works in next 10.0.5, but in 10.0.9 I can’t compile anymore.

The text was updated successfully, but these errors were encountered:

We have the same issue when building in our CI environment, although it works locally when running next build

guys @scottbert , @vendramini , it happens to me also. To get around this you should make a new file at pages/_error.js and add getInitialProps to it like the following example. let me know if it helped.

@vendramini Next try to generate a static 500 in build time, not a dynamic one. So I think you need to edit the description.

@Doaa-Ismael hey! Thank you for the answer, but it didn’t solve the problem 🙁 I’m getting the same error.

isAndroid is a property which is coming from a req from express server.

I think the issue it’s pretty much the same as mine, so the steps are quite simple, it’s happening when running next build . It was working fine with 10.0.6.

Saw the same issue and went to 10.0.6 as @lapa182 suggests and it works fine.

We have the same issue when building in our CI environment, although it works locally when running next build

Sorry for the lateness to respond. I also «fixed» it by doing pretty much what @Doaa-Ismael suggested.
I think this has something to do with the way we’re building our code, «opting out» of automatic static optimization, leading to the warning «Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app . This does not opt-out pages with getStaticProps » when building. It’d be interesting to know if others are using the same functionality as maybe it’s this that causes the issue?

Got the same error after upgrading from 10.0.7 to 10.0.9.

Our old code of pages/_error/index.tsx , cases this error:

The variation from @Doaa-Ismael helped, although I don’t understand why the logic is like this now.

It is not clear why the error reports the generation of the page 500, while in our pages folder there is no 500 at all.

It is not clear why getInitialProps is used in the solution, although the official documentation suggests not to use it anymore.

Источник

I receive the following errors when trying to build #11659

Describe the bug

Upon running yarn build, I receive errors.

`Automatically optimizing pages .
Error occurred prerendering page «/art/a». Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module ‘./a.md’

Error occurred prerendering page «/blog/po». Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module ‘./po.md’

Error occurred prerendering page «/photo/pho». Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module ‘./pho.md’

Error occurred prerendering page «/design/des». Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module ‘./des.md’

Build error occurred
Error: Export encountered errors
at _default (/home/mac/Documents/lucy-portfolio/node_modules/next/dist/export/index.js:19:1086)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async build (/home/mac/Documents/lucy-portfolio/node_modules/next/dist/build/index.js:36:218)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`

To Reproduce

Run Yarn Build on this particular site.

Expected behavior

The site should build without errors

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Linux
• Browser (if applies) [e.g. chrome, safari]
• Version of Next.js: 9.3.4

Additional context

In regards to the page rendering errors, those files do not exist and they are not called upon anywhere in my code.

As for the build errors I am unsure.

The text was updated successfully, but these errors were encountered:

Источник

Build occasionally fails complains about missing modules but also succeeds #15874

Describe the bug

I have a fairly simple app that pings a mongo database and generates dynamic pages. The homepage lists a handful of documents and they link to individual pages. The build often fails complaining about missing modules despite running perfectly fine on localhost. However, if I build it a 2nd or 3rd time it will usually succeed.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone https://github.com/itsclarke/vantures
2. Install dependencies
3. Run npm run dev
4. While dev is running, also run npm run build
5. See errors

Expected behavior

A failed build outputs:

/app/.env.local Creating an optimized production build Compiled successfully. Automatically optimizing pages . Error occurred prerendering page «/rental/new». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /rental/new at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) Error occurred prerendering page «/rental/10051164». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /rental/[id] at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) Error occurred prerendering page «/rental/10082307». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /rental/[id] at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) Error occurred prerendering page «/rental/10138784». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /rental/[id] at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) Error occurred prerendering page «/rental/10057826». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /rental/[id] at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) Error occurred prerendering page «/rental/10059872». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /rental/[id] at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) Error occurred prerendering page «/». Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: / at pageNotFoundError (

/app/node_modules/next/dist/next-server/server/require.js:1:384) at getPagePath (

/app/node_modules/next/dist/next-server/server/require.js:2:82) at requirePage (

/app/node_modules/next/dist/next-server/server/require.js:2:227) at loadComponents (

/app/node_modules/next/dist/next-server/server/load-components.js:1:771) at Object.exportPage [as default] (

/app/node_modules/next/dist/export/worker.js:14:188) > Build error occurred Error: Export encountered errors on following paths: / /rental/10051164 /rental/10057826 /rental/10059872 /rental/10082307 /rental/10138784 /rental/new at exportApp (

/app/node_modules/next/dist/export/index.js:24:1103) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async build (

When it succeeds the build outputs:

But the other server running the API code outputs this as well:

System information

• OS: macOS
• Version of Next.js: 9.5.1
• Version of Node.js: 14.5.0

The text was updated successfully, but these errors were encountered:

I can’t seem to get the same errors as you, however I can’t get a successful build either.
Running npm run dev prints out

Running npm run build prints out

This is what the logs show

Other things to note, I was never able to get the mongodb collection showing up either.
System information

• OS: Microsoft Windows 10 Home Version 10.0.18363 Build 18363
• node v14.5.0
• next v9.5.1

I managed to recreate the errors mentioned in the issue.
Upon running npm run dev :

Upon running npm run build and build fails:

Upon running npm run dev and build fails but this time error shows two routes instead of one:

Upon running npm run build and build succeeds:

Also as mentioned above the mongodb collection doesn’t show. I did change the url to a localhost one. Maybe this has something to do a missing prop in rental/new.js ?

System Information:

• OS: macOS Cataline version 10.15.5
• Node: v12.18.2
• Next.js: v9.5.1

@squarecylinder @saswatamcode go ahead a do a fresh pull and try again please. I hard coded my mongo credentials and whitelisted all IPs.

I did a fresh pull. Now, I’m getting data in the application and your initial error does appear exactly as in when running npm run build .

But when you visit the routes mentioned in the error and then try to build it succeeds.

The source of this issue is wrong pages-manifest.json generation for build command while dev working. I’ll try to fix it but not sure if I have enough time, so I decided leave this message here, maybe it’ll be usefull.

Manifest for build while dev running:

Manifest for build without dev in background:

Источник

I’ve been facing an issue for a few weeks now that is interrupting my learning and development. My project works fine in the dev environment, but I can no longer release it to production on Vercel. But I can’t make it work, I’ve tried everything I found on the internet but I can’t fix the project;

Before the code was a little different, the «find» method was inside getStaticProps, and it was giving me the error «ERROR TypeError: Cannot read properties of undefined (reading ‘find’)».

Worst of all is that anyway it was and is working in the dev environment

Now I’m facing the following error:

Error occurred prerendering page "/produtos/Heróis". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error serializing .produtos returned from getStaticProps in "/produtos/[categoria]".
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

I would be very grateful if someone could tell me where I’m going wrong. I’m losing my hair already.

github: https://github.com/oliveirabruno01/site_estilo_refactored (the error are ocurring in /produtos/[categoria] page)

getStaticPaths:

export async function getStaticPaths() {
const res = await fetch('https://bling.com.br/Api/v2/categorias/json/&apikey=eda45968702e9e3ff10bb3dbd0fdd14286ecac428363231ed48271ad38fb7067b8578dbc');
const res_json = await res.json();
const categorias = res_json.retorno.categorias;

const paths = categorias.map(_categoria => ({
    params: {
        categoria: _categoria.categoria.descricao
    }
}));
return { paths, fallback: 'blocking' }

}

getStaticProps

export async function getStaticProps( {params} ) {
let categorias;
let produtos;

const categorias_res = await fetch('https://bling.com.br/Api/v2/categorias/json/&apikey=eda45968702e9e3ff10bb3dbd0fdd14286ecac428363231ed48271ad38fb7067b8578dbc');
const cat_json = await categorias_res.json();

const produtos_res = await fetch('https://bling.com.br/Api/v2/produtos/json/&apikey=eda45968702e9e3ff10bb3dbd0fdd14286ecac428363231ed48271ad38fb7067b8578dbc&imagem=S');   
const pro_json = await produtos_res.json();

categorias = cat_json.retorno.categorias;
produtos = pro_json.retorno.produtos;

console.log(categorias);

if (!categorias || !produtos || !nome) return {
    props: {categorias: [], produtos: [], nome: params.categoria}
}; 

return { props: {categorias: JSON.parse(JSON.stringify(categorias)), produtos: JSON.parse(JSON.stringify(produtos)), nome: params.categoria}}

}

page component

export default function ProdutosCategoria( {categorias=null, produtos=null, nome=null} ) {

if (!categorias || !produtos || !nome) return <><h1>Something did wrong :/</h1></>; 

const f_item = categorias?.find((cat) => cat?.categoria.descricao == nome);
const item = f_item?.categoria;

return <>
    <Head>
    <title>Estilo Criação: { item.descricao }</title>
    </Head>
    <div id={styles.corpo}>
        <h1 className={styles.titulo}>Categoria { item.descricao }</h1>
        <br></br>
        
        <Row>
            {
        
                produtos?.map((_produto, i) => (
                    <Col xs={12} sm={6} md={6} lg={3} xl={3} key={_produto.produto.id}>
                        <ProductsSingle item_data={_produto.produto} />
                    </Col>
                ))
            }
        </Row>
    </div>
</>

}

ProductsSingle component:

export default function ProductsSingle({item_data=null}){ 
const [num, setNum] = useState(1)

if (!item_data) return null;

return(
    <Link href={"/produto/" + item_data.descricao }>
        <div className={styles.produto} id={styles.delimitador}>
            <img src={item_data.imagem[num].link} onMouseEnter={() => setNum(3)} onMouseLeave={() => setNum(1)}/>
            <h4>{item_data.descricao}</h4>
            <h3 className={styles.preço}>R$ {Number.parseFloat(item_data.preco).toFixed(2)}</h3>
            <p>até <strong>3x</strong> de <strong>R$ {Number.parseFloat(item_data.preco/3).toFixed(2)}</strong> sem juros</p>
            <Button variant="success" className={styles.comprar}>Comprar</Button>
        </div>
    </Link>
)

}

Thomas Step

<- Blog

I recently stumbled into a problem while deploying a site on Vercel with Next.js, and I could not find any straightforward solutions to exactly what I was experiencing. The error looked something like this.

17:35:05.422  	Could not find files for /_polyfills in .next/build-manifest.json
17:35:05.428  	Unhandled error during request: 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.
17:35:05.428  	    at Z (/vercel/xxxxxxxx/.next/serverless/pages/about.js:5281:404)
17:35:05.428  	    at Object.module.exports.xlpu.exports.useState (/vercel/xxxxxxxx/.next/serverless/pages/about.js:5287:277)
17:35:05.428  	    at Link (/vercel/xxxxxxxx/.next/serverless/pages/about.js:2086:50)
17:35:05.428  	    at d (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)
17:35:05.428  	    at $a (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
17:35:05.428  	    at a.b.render (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
17:35:05.428  	    at a.b.read (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
17:35:05.428  	    at renderToString (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
17:35:05.428  	    at render (/vercel/xxxxxxxx/node_modules/next/dist/next-server/server/render.js:3:298)
17:35:05.428  	    at Object.renderPage (/vercel/xxxxxxxx/node_modules/next/dist/next-server/server/render.js:46:1020)
17:35:05.429  	Error occurred prerendering page "/about". Read more: https://err.sh/next.js/prerender-error
17:35:05.429  	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.
17:35:05.429  	    at Z (/vercel/xxxxxxxx/.next/serverless/pages/about.js:5281:404)
17:35:05.429  	    at Object.module.exports.xlpu.exports.useState (/vercel/xxxxxxxx/.next/serverless/pages/about.js:5287:277)
17:35:05.429  	    at Link (/vercel/xxxxxxxx/.next/serverless/pages/about.js:2086:50)
17:35:05.429  	    at d (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)
17:35:05.429  	    at $a (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
17:35:05.429  	    at a.b.render (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
17:35:05.429  	    at a.b.read (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
17:35:05.429  	    at renderToString (/vercel/xxxxxxxx/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
17:35:05.429  	    at render (/vercel/xxxxxxxx/node_modules/next/dist/next-server/server/render.js:3:298)
17:35:05.429  	    at Object.renderPage (/vercel/xxxxxxxx/node_modules/next/dist/next-server/server/render.js:46:1020)

There were posts talking about the Minified React error #321 at the top of the logs and other answers talking about adding a build-manifest.json with an empty object to troubleshoot locally. None of these solved my problem. While debugging this I noticed that I had my node_modules stored in git, which I normally don’t do. I ran rm -r node_modules to delete the folder, added it to my .gitignore, and reinstalled. I was not meaning to solve my problem, but this is actually what did the trick. My package-lock.json had a diff in git for loads of changes. I am not entirely sure what happened but my guess is that my package-lock.json was forcing the build process in Vercel to use outdated package versions, which somehow caused my errors. There is a ton that I do not know about package-lock, but it has actually sparked some curiousity in me before with the integrity checks that it makes. That’s a topic for another day though. Hopefully, this can help you solve your problem quicker since I could personally not find anything better already out there.

Categories: