I've got a good setup running with telefunc, vike, vike-react and vike-authjs using node 20+ on vercel. I just included vike-react-query which runs ok in a local environment but fails with the following error only when rendering pages. The other vercel routes (auth and telefunc) work ok.
The error disappears once I remove vike-react-query. I've included some helpful information, please let me know if you need more.
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'react-dom' imported from /var/task/node_modules/.pnpm/@[email protected]/node_modules/@brillout/import/dist/index.js
at packageResolve (node:internal/modules/esm/resolve:849:9)
at moduleResolve (node:internal/modules/esm/resolve:906:20)
at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1126:12)
at defaultResolve (node:internal/modules/esm/resolve:1169:79)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleLoader.import (node:internal/modules/esm/loader:328:34)
at importModuleDynamically (node:internal/modules/cjs/loader:1261:33)
at importModuleDynamicallyWrapper (node:internal/vm/module:431:21)
import { renderPage } from "vike/server";
import { getSession } from "vike-authjs";
import utils from "./_utilities.js";
import authConfig from "../utilities/authConfig.js";
/**
* @param {import('@vercel/node').VercelRequest} req
* @param {import('@vercel/node').VercelResponse} res
*/
export default async (req, res) => {
const { url } = req;
if (url === undefined) throw new Error("req.url is undefined");
const request = utils.makeRequest(req);
const session = await getSession(request, authConfig);
console.log("ssr url", url);
const pageContextInit = { urlOriginal: url, data: { session } };
const pageContext = await renderPage(pageContextInit);
const { httpResponse } = pageContext;
console.log("ssr url", url);
if (!httpResponse) {
res.statusCode = 200;
res.end();
return;
}
const { body, statusCode, headers } = httpResponse;
//copy all headers from response
headers.forEach(([name, value]) => res.setHeader(name, value));
res.status(statusCode).end(body);
};
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@types/serve-static": "^1.15.5",
"@typescript-eslint/eslint-plugin": "^6.18.1",
"@typescript-eslint/parser": "^6.18.1",
"@vercel/node": "^3.0.17",
"autoprefixer": "^10.4.16",
"daisyui": "^4.6.0",
"eslint": "^8.56.0",
"eslint-config-react-app": "^7.0.1",
"postcss": "^8.4.33",
"prisma": "^5.8.0",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
},
"dependencies": {
"@auth/core": "^0.20.0",
"@hattip/polyfills": "^0.0.38",
"@prisma/client": "^5.8.0",
"@repo/ui": "workspace:*",
"@tanstack/react-query": "^5.17.19",
"@vite-plugin-vercel/vike": "^2.0.0",
"@vitejs/plugin-react": "^4.2.1",
"cross-fetch": "^4.0.0",
"dotenv": "^16.3.2",
"h3": "~1.9.0",
"imapflow": "^1.0.148",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"serve-static": "^1.15.0",
"telefunc": "^0.1.70",
"tsx": "^4.7.0",
"vike": "^0.4.160",
"vike-authjs": "^0.1.4",
"vike-react": "^0.4.4",
"vike-react-query": "^0.0.2",
"vite": "^5.0.12",
"vite-plugin-vercel": "^2.0.0"
}
dependencies:
@vite-plugin-vercel/vike 2.0.0
โโโฌ vike 0.4.160 peer
โ โโโฌ react-streaming 0.3.19 peer
โ โโโ react-dom 18.2.0 peer
โโโฌ vite-plugin-vercel 2.0.1 peer
โโโฌ vike 0.4.160 peer
โโโฌ react-streaming 0.3.19 peer
โโโ react-dom 18.2.0 peer
react-dom 18.2.0
react-hot-toast 2.4.1
โโโ react-dom 18.2.0 peer
telefunc 0.1.70
โโโฌ react-streaming 0.3.19 peer
โโโ react-dom 18.2.0 peer
vike 0.4.160
โโโฌ react-streaming 0.3.19 peer
โโโ react-dom 18.2.0 peer
vike-react 0.4.4
โโโ react-dom 18.2.0 peer
โโโฌ react-streaming 0.3.19
โ โโโ react-dom 18.2.0 peer
โโโฌ vike 0.4.160 peer
โโโฌ react-streaming 0.3.19 peer
โโโ react-dom 18.2.0 peer
vike-react-query 0.0.2
โโโ react-dom 18.2.0 peer