API issue when deployed to vercel
tonymckendry opened this issue · comments
My app runs great locally, but when I deploy it to Vercel it seems like my Next API routes are not working correctly as I see errors in the Vercel Edge Logs that say:
Unhandled rejection: Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'
"MODULE_NOT_FOUND","requireStack":["/var/task/apps/nextjs/.next/server/pages/_app.js..."
(I'll put the full error text below).
It seems like it's trying to load RNW on the backend possibly (server/pages/_app)?
I'm a bit at a loss as to how to debug this or figure out what is going on as it only happens deployed and I can't get any of my own logs to show up from the API whatsoever.
It's not just TRPC routes as I have a "manually" defined API route as well that is giving me the same/similar behavior when i hit it from Postman.
My plan is to work on a minimum reproduction next (basically just going to try to clone down a fresh starter and deploy it mostly as-is with supabase). I will report back after that.
If anyone has any advice as to where I might look or anything I might try, it would be appreciated!
Normal API route:
2023-02-28T22:10:34.516Z 8f6c199e-d464-476b-94f4-1eb35abb036d ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'\nRequire stack:\n- /var/task/apps/nextjs/.next/server/pages/_app.js\n- /var/task/node_modules/next/dist/server/require.js\n- /var/task/node_modules/next/dist/server/next-server.js\n- /var/task/apps/nextjs/___next_launcher.cjs","reason":{"errorType":"Error","errorMessage":"Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'\nRequire stack:\n- /var/task/apps/nextjs/.next/server/pages/_app.js\n- /var/task/node_modules/next/dist/server/require.js\n- /var/task/node_modules/next/dist/server/next-server.js\n- /var/task/apps/nextjs/___next_launcher.cjs","code":"MODULE_NOT_FOUND","requireStack":["/var/task/apps/nextjs/.next/server/pages/_app.js","/var/task/node_modules/next/dist/server/require.js","/var/task/node_modules/next/dist/server/next-server.js","/var/task/apps/nextjs/___next_launcher.cjs"],"stack":["Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'","Require stack:","- /var/task/apps/nextjs/.next/server/pages/_app.js","- /var/task/node_modules/next/dist/server/require.js","- /var/task/node_modules/next/dist/server/next-server.js","- /var/task/apps/nextjs/___next_launcher.cjs"," at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)"," at mod._resolveFilename (/var/task/node_modules/next/dist/build/webpack/require-hook.js:23:32)"," at Module._load (node:internal/modules/cjs/loader:885:27)"," at Module.require (node:internal/modules/cjs/loader:1105:19)"," at require (node:internal/modules/cjs/helpers:103:18)"," at 33330 (/var/task/apps/nextjs/.next/server/pages/_app.js:1399:18)"," at __webpack_require__ (/var/task/apps/nextjs/.next/server/webpack-runtime.js:25:42)"," at 44514 (/var/task/apps/nextjs/.next/server/chunks/943.js:9428:45)"," at __webpack_require__ (/var/task/apps/nextjs/.next/server/webpack-runtime.js:25:42)"," at 59858 (/var/task/apps/nextjs/.next/server/chunks/878.js:508:70)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'","Require stack:","- /var/task/apps/nextjs/.next/server/pages/_app.js","- /var/task/node_modules/next/dist/server/require.js","- /var/task/node_modules/next/dist/server/next-server.js","- /var/task/apps/nextjs/___next_launcher.cjs"," at process.<anonymous> (file:///var/runtime/index.mjs:1188:17)"," at process.emit (node:events:525:35)"," at emit (node:internal/process/promises:149:20)"," at processPromiseRejections (node:internal/process/promises:283:27)"," at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
Unknown application error occurred
Runtime.Unknown
TRPC route:
/cjs/exports/createElement'\nRequire stack:\n- /var/task/apps/nextjs/.next/server/pages/_app.js\n- /var/task/node_modules/next/dist/server/require.js\n- /var/task/node_modules/next/dist/server/next-server.js\n- /var/task/apps/nextjs/___next_launcher.cjs","code":"MODULE_NOT_FOUND","requireStack":["/var/task/apps/nextjs/.next/server/pages/_app.js","/var/task/node_modules/next/dist/server/require.js","/var/task/node_modules/next/dist/server/next-server.js","/var/task/apps/nextjs/___next_launcher.cjs"],"stack":["Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'","Require stack:","- /var/task/apps/nextjs/.next/server/pages/_app.js","- /var/task/node_modules/next/dist/server/require.js","- /var/task/node_modules/next/dist/server/next-server.js","- /var/task/apps/nextjs/___next_launcher.cjs"," at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)"," at mod._resolveFilename (/var/task/node_modules/next/dist/build/webpack/require-hook.js:23:32)"," at Module._load (node:internal/modules/cjs/loader:885:27)"," at Module.require (node:internal/modules/cjs/loader:1105:19)"," at require (node:internal/modules/cjs/helpers:103:18)"," at 33330 (/var/task/apps/nextjs/.next/server/pages/_app.js:1399:18)"," at __webpack_require__ (/var/task/apps/nextjs/.next/server/webpack-runtime.js:25:42)"," at 44514 (/var/task/apps/nextjs/.next/server/chunks/943.js:9428:45)"," at __webpack_require__ (/var/task/apps/nextjs/.next/server/webpack-runtime.js:25:42)"," at 59858 (/var/task/apps/nextjs/.next/server/chunks/878.js:508:70)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'","Require stack:","- /var/task/apps/nextjs/.next/server/pages/_app.js","- /var/task/node_modules/next/dist/server/require.js","- /var/task/node_modules/next/dist/server/next-server.js","- /var/task/apps/nextjs/___next_launcher.cjs"," at process.<anonymous> (file:///var/runtime/index.mjs:1188:17)"," at process.emit (node:events:525:35)"," at emit (node:internal/process/promises:149:20)"," at processPromiseRejections (node:internal/process/promises:283:27)"," at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}
2023-02-28T21:57:48.566Z undefined ERROR Unhandled rejection: Error: Cannot find module '/vercel/path0/node_modules/react-native-web/dist/cjs/exports/createElement'
Require stack:
- /var/task/apps/nextjs/.next/server/pages/_app.js
- /var/task/node_modules/next/dist/server/require.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/apps/nextjs/___next_launcher.cjs
at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
at mod._resolveFilename (/var/task/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Module._load (node:internal/modules/cjs/loader:885:27)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at 33330 (/var/task/apps/nextjs/.next/server/pages/_app.js:1399:18)
at __webpack_require__ (/var/task/apps/nextjs/.next/server/webpack-runtime.js:25:42)
at 44514 (/var/task/apps/nextjs/.next/server/chunks/943.js:9428:45)
at __webpack_require__ (/var/task/apps/nextjs/.next/server/webpack-runtime.js:25:42)
at 59858 (/var/task/apps/nextjs/.next/server/chunks/878.js:508:70) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/var/task/apps/nextjs/.next/server/pages/_app.js',
'/var/task/node_modules/next/dist/server/require.js',
'/var/task/node_modules/next/dist/server/next-server.js',
'/var/task/apps/nextjs/___next_launcher.cjs'
]
}
Update:
I put together a quick Minimum Reproduction this morning and it works just fine....
The CUA repo has definitely been updated a few times since I got started - going to try to determine where the issue happened but unsure if I will be able to nail it down or not.
Sorry that it's not working for you :( It is really difficult to debug what's going on with Vercel deployments.
This is an interesting error. So everything builds fine, and you're only seeing this error on the API routes? I've personally not run into this in the past, and it is strange that it's mentioning RNW.
Do let me know if you figure out what caused the problem, I'd love to learn.
I've been hacking on this project full-time for over a month (definitely should have worried about deploying a little sooner, I know better) and have done all sorts of stuff to it that may be causing the issue.
I'm going to try to incrementally add it into this working reproduction now and see if I can find where it breaks.
Sounds great! I totally understand your pain!
We should definitely make a tutorial/YT video where we go through the entire pipeline from the beginning. Also expo dev clients probably!
Also, I would love to see what you're working on! If it's not private, feel free to DM me in Discord :)
After many hours of pain I've figured out that the error was being caused by a client-side useRouter file that I had setup that I believe was being called on the server (due to NextJS SSR probably?)
The file was setup at packages/app/utils/useRouter.web.tsx and contained:
import { useRouter as useNextRouter } from 'next/router'
import { useRouter as useSolitoRouter } from 'solito/router'
const useRouter = () => {
const nextRouter = useNextRouter()
const solitoRouter = useSolitoRouter()
return { ...nextRouter, push: solitoRouter.push, params: nextRouter.query }
}
export default useRouter
I determined through some testing that importing this file anywhere in the project caused the issue when deploying (was never able to replicate it locally though).
I've used this router setup in other Solito projects in the past but those were admittedly setup differently and more basic.
I think we can go ahead and close this - thanks again for humoring me!
@tonymckendry Having a similar issue. I don't quite understand why useRouter would cause issues loading RNW. Can you explain a bit more what your workaround was in the end?