node-html-to-image
node-html-to-image copied to clipboard
Published
20 hours ago •
frinyvonnick
frinyvonnick
Next.js app crashes on vercel
Error:
ERROR Error: Cannot find module '/var/task/apps/web/.next/server/pages/[locale]/[theme]/[...catchall].js'
Require stack:
- /var/task/node_modules/next/dist/server/require.js
- /var/task/node_modules/next/dist/server/load-components.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/apps/web/___next_launcher.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object.requirePage (/var/task/node_modules/next/dist/server/require.js:48:12)
at Object.loadComponents (/var/task/node_modules/next/dist/server/load-components.js:58:23)
at Server.findPageComponents (/var/task/node_modules/next/dist/server/next-server.js:1233:63)
at Server.renderToResponse (/var/task/node_modules/next/dist/server/next-server.js:1609:59)
at async Server.pipe (/var/task/node_modules/next/dist/server/next-server.js:1148:25)
at async Object.fn (/var/task/node_modules/next/dist/server/next-server.js:949:21) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/var/task/node_modules/next/dist/server/require.js',
'/var/task/node_modules/next/dist/server/load-components.js',
'/var/task/node_modules/next/dist/server/next-server.js',
'/var/task/apps/web/___next_launcher.js'
],
page: '/en-US/light/app/onboarding'
}
One more:
EvalError: Code generation from strings disallowed for this context
at <anonymous>
at worker.js:19:14050
at webpack/bootstrap:21:0
at ../../node_modules/next/dist/shared/lib/utils.js:1:12
at webpack/bootstrap:21:0
at ../../node_modules/next/dist/shared/lib/router/utils/parse-relative-url.js:7:4
at webpack/bootstrap:21:0
at ../../node_modules/next/dist/shared/lib/router/utils/parse-url.js:8:24
at webpack/bootstrap:21:0
at ../../node_modules/next/dist/shared/lib/router/utils/prepare-destination.js:10:9
When I delete node-html-to-image package - everything is ok
Code:
import nodeHtmlToImage from "node-html-to-image";
const image = (await nodeHtmlToImage({
html: renderTweet(userData.verified),
content: {
name: userData.name,
username: userData.username,
time,
date: dateString,
text,
},
type: "jpeg",
quality: 100,
puppeteerArgs: { args: ["--no-sandbox", "--disable-setuid-sandbox"] }
})) as Buffer;
HTML:
const font2base64 = require("node-font2base64");
import fs from "fs";
const _data = font2base64.encodeToDataUrlSync(
`./public/fonts/Infra-Regular.ttf`
);
const vereifiedImg = fs.readFileSync("./public/meta/Verified.svg");
const bakgroundImg = fs.readFileSync("./public/meta/Background.svg");
const base64Image = Buffer.from(vereifiedImg).toString("base64");
const base64BcgImage = Buffer.from(bakgroundImg).toString("base64");
const dataURI = "data:image/svg+xml;base64," + base64Image;
const dataBcgURI = "data:image/svg+xml;base64," + base64BcgImage;
export const renderTweet = (verified: boolean) => {
return `
<html>
<head>
<style>
@font-face {
font-family: 'FFInfra';
src: url(${_data}) format('woff2'); // don't forget the format!
}
html {
box-sizing: border-box;
}
body {
font-family: 'FFInfra', Fallback, sans-serif;
width: 1000px;
height: 1298px;
}
</style>
</head>
<body>
<div class="container">
{{name}}
{{username}}
<img class="header-verified-icon ${
verified ? "verified" : ""
}" src="${dataURI}"
{{text}}
<p>{{time}}</p>
<p>{{date}}</p>
<img class="background" src="${dataBcgURI}" />
</div>
</body>
</html>
`;
};
Puppeteer doesn't work on Vercel https://github.com/vercel/next.js/issues/29997
