Hello,
Recently I have updated my dependencies to my NextJS project. All of my APIs work on localhost, and return proper errors or success responses. But as soon as I deploy my website any API I call returns “Invocation Failed” page from netlify, which leads me to believe it could be a netlify error
We use pages routing
Here is the error output…
Dec 20, 10:25:28 PM: 3bd37a87 ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/head-manager-context'\nRequire stack:\n- /var/task/node_modules/next/dist/client/script.js","reason":{"errorType":"Error","errorMessage":"Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/head-manager-context'\nRequire stack:\n- /var/task/node_modules/next/dist/client/script.js","code":"MODULE_NOT_FOUND","requireStack":["/var/task/node_modules/next/dist/client/script.js"],"stack":["Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/head-manager-context'","Require stack:","- /var/task/node_modules/next/dist/client/script.js"," at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)"," at /var/task/node_modules/next/dist/server/require-hook.js:54:36"," at Module._load (node:internal/modules/cjs/loader:922:27)"," at Module.require (node:internal/modules/cjs/loader:1143:19)"," at mod.require (/var/task/node_modules/next/dist/server/require-hook.js:62:32)"," at require (node:internal/modules/cjs/helpers:119:18)"," at Object.<anonymous> (/var/task/node_modules/next/dist/client/script.js:33:42)"," at Module._compile (node:internal/modules/cjs/loader:1256:14)"," at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)"," at Module.load (node:internal/modules/cjs/loader:1119:32)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/head-manager-context'","Require stack:","- /var/task/node_modules/next/dist/client/script.js"," at process.<anonymous> (file:///var/runtime/index.mjs:1276:17)"," at process.emit (node:events:529: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)"]}
Here are my dependency versions that might help out with debugging:
"next": "^13.5.6",
[[plugins]]
package = "@netlify/plugin-nextjs"
pinned_version = "4.41.3"
Full list
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@elasticemail/elasticemail-client-ts-axios": "^4.0.22",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mux/mux-player-react": "^2.3.0",
"@sanity/client": "^6.10.0",
"axios": "^1.6.2",
"framer-motion": "^10.16.16",
"html-react-parser": "^5.0.10",
"marked": "^11.1.0",
"marked-gfm-heading-id": "^3.1.2",
"next": "^13.5.6",
"next-recaptcha-v3": "^1.3.0",
"next-sanity": "^5.5.11",
"next-seo": "^6.4.0",
"next-share": "^0.27.0",
"next-sitemap": "^4.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-slick": "^0.29.0",
"sharp": "^0.33.1",
"slick-carousel": "^1.8.1"
},
Solutions I tested:
- env variables not working, they work
- dependencies versions now even previous versions don’t work
- a lot of others I forgot, I am too tired
Here is a simple API code that fails when deployed (goes to “Invocation Failed” netlify page)
import axios from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'
import { API } from './API'
import strings from '../../data-resource/strings.json'
const secret = process.env.RECAPTCHA_SECRET_KEY
/**
* Makes an API request to the google re-captcha server to validate the token
* and responds with a score to determine if the user is a bot
*/
export default async function verifyCaptcha(
req: NextApiRequest,
res: NextApiResponse
) {
// this line does not even execute goes to "Invocation error page"
if (req.method === 'POST') {
const { token } = req.body
try {
const { data, status } = await axios.post(
`${API.googleCaptcha}?secret=${secret}&response=${token}`
)
res.status(status).json(data)
} catch (error) {
res.status(500).json({ success: false })
}
} else {
res.status(405).json({ message: strings.METHOD_NOT_ALLOWED })
}
}
Please give me any suggestions to fix this issue as it breaks our website, thank you