Solving "Failed to collect page data. TypeError: (0 , _react.createContext) is not a function" #50955
Replies: 14 comments 9 replies
-
|
I had the error of "Error: Failed to collect page data for api/{route}." Using the nextjs 13 app router. I was using a library called pusher-js and initializing it in one file, pusher.ts, to create a PusherClient instance. It had one parameter, the app key, which was passed in was from process.env (environment variable). This initialized PusherClient was in a page.tsx. I had to hardcode the app key parameter in pusher.ts instead of pulling it from process.env. I don't know why, I think on loading the page.tsx, the PusherClient was not loaded instantly as it had to pull from process.env. edit: I found out why it built locally fine but not on remote server. I was using coolify on my server to build and host the project. For secrets there is an option "Need during buildtime?" which injects the env variables when building the project. For some reason this setting is off by default. I had to turn it on so that secrets got injected into the PusherClient() instance when I was instantiating and importing into that page.tsx file. Turing on the option "Need during buildtime?" on coolify running on my server fixed the issue and I can use |
Beta Was this translation helpful? Give feedback.
-
|
🤔 Not sure your issue is related. With my issue, the project wouldn’t build, which wouldn’t give the opportunity to deploy it to a server. As a side note, you should not use synchronous calls at all. They will kill your app. Use promises instead, or async/await (which I believe are syntactic sugar on top of promises). |
Beta Was this translation helpful? Give feedback.
-
|
My project for some reason built locally totally fine, but had build errors on my remote server. I was able to the build error, edited my original answer. |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if this will help or not, but my issue was that I did not export the getStaticPaths. getStaticPaths and getStaticProps need to be exported for SSG |
Beta Was this translation helpful? Give feedback.
-
|
+1 |
Beta Was this translation helpful? Give feedback.
-
|
I'm encountering problems with my Shopify theme, which I've developed using NextJS. It's preventing me from uploading to the server, and the error seems to be located here. Do any of you have suggestions on what I could do? My current idea is to run "npm build" to build the project. If not, are there alternative solutions? Here the error message from vercel: [22:05:57.157] Running build in Washington, D.C., USA (East) – iad1 |
Beta Was this translation helpful? Give feedback.
-
|
For my was I was missing the .env |
Beta Was this translation helpful? Give feedback.
-
|
I was missing an .env as well |
Beta Was this translation helpful? Give feedback.
-
|
The problem was my .env was there but the backend server url was not correct, so if you are facing this problem check your backend url or API url your page is making request to. |
Beta Was this translation helpful? Give feedback.
-
|
yes for me too i copied and pasted NEXT_PUBLIC_APP_URL="http://localhost:3000" to vercel and didn't change the url |
Beta Was this translation helpful? Give feedback.
-
|
You need to update your env variables in settings too. |
Beta Was this translation helpful? Give feedback.
-
|
All I had to do to fix this is updating my nodejs. |
Beta Was this translation helpful? Give feedback.
-
|
Also make sure not to mix |
Beta Was this translation helpful? Give feedback.
-
|
I encountered this issue only when deploying on Vercel; my local build completed successfully. |
Beta Was this translation helpful? Give feedback.
-
|
I also encountered this issue locally. Interestingly, Vercel's build didn't fail even though I am using the same node version. Environment variables are also the same. |
Beta Was this translation helpful? Give feedback.
-
|
I faced a similar issue recently and it was caused by the |
Beta Was this translation helpful? Give feedback.
-
|
I encountered this issue while trying to deploy to Vercel. I was using Prisma, and to resolve the problem, I only needed to add the following command to my build command, overriding Vercel's default: |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. This helped me fix the 'Failed to collect page data for /_not-found' deployment error on Vercel |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. Override Vercel's default Build Command by |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the lead in fixing this issue, the issue is related for the env variables for me as well. For someone using the github workflow for deployment you must use env at top of your (dev or prod).yaml file : name: Vercel Production Deployment P.S: We are talking about the next.js project in which prisma DB ORM is used and likely postgre sql db on hosting platform like railway.com. |
Beta Was this translation helpful? Give feedback.
-
|
Creating an optimized production build ...
|
Beta Was this translation helpful? Give feedback.
-
|
Mine's a little different, it says: SyntaxError: missing ) after argument list for the buit chunks |
Beta Was this translation helpful? Give feedback.
-
|
Here's the code: https://github.com/GauravBurande/lassi |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello,
I’m working on a brand new Next.js project that makes use the app router introduced in Next.js 13. Yesterday, I had everything working but I was only using client components, which prevented me from providing Metadata:
I then started the process of migrating my pages to server components but I had a very hard time doing so. So I though I’d share here what I did, with the hope it would help others.
Symptoms
next buildoutputnext infooutputSolution
The issue was I’m using a number of other libraries, such as Material UI, which don’t support server components yet (see mui/material-ui#34896 for this one). They need to add a
'use client'directive on their exports. Until each library you use do it itself, a workaround suggested by @bashonregardless in a comment is to have a file importing and reexporting them, and then only import from this file, not from node_modules. E.g., this is mysrc/lib/react-redux.tsfile:Because, yes, this solution works for other libraries!!
Another option, the one used in mui/material-ui#37315, is to call such libraries only from client components. I didn’t like it much, as it leads to create a helper client component for most (if not all) your server component. You may still like it. In that case, your
page.tsxwould likely look like:Important
next buildgives a page having an issue, but the problem can be in a dependency.layout.tsx.'use client'at the top of my Reduxstore.ts.Beta Was this translation helpful? Give feedback.
All reactions