Text not rendering when deployed to vercel #2499
Comments
What did Vercel say when you asked them? Please see #1875 for a similar discussion involving the AWS Lambda runtime environment. |
|
I am yet to ask them because I don't think the problem is related to the font as it is stored as a base64 string and not as a file. |
|
@vixalien Were you able to make any progress with this? |
|
No, not yet. Still produces an image with no text |
|
Here's what I did to solve this issue: Create a folder inside the root of your Next app called <?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>/var/task/fonts/</dir>
<cachedir>/tmp/fonts-cache/</cachedir>
<config></config>
</fontconfig>Also, copy the font you want to use into this folder (I used a TTF font, but others may work as well). Next, inside any Next route that needs the font, add the following lines: import path from 'path';
path.resolve(process.cwd(), 'fonts', 'fonts.conf');
path.resolve(process.cwd(), 'fonts', 'MyFontName.ttf');These lines may look pointless, but they make Next bundle these files into the lambda. Finally, in the Vercel settings, set the environment variable |
|
Oh thank you I will try this and share with you the results |
|
Hello again! I tried the fix but unfortunately it doesn't work, at least for me. |
|
Same issue here, adding simple |
|
Here is a small reproduction of this issue deployed on Vercel: https://vercel-sharp-svg-fonts.vercel.app/ In this reproduction I tried:
Maybe is the case to open an issue on the Vercel side. Here is the repo of the reproduction: https://github.com/elrumordelaluz/vercel-test-sharp-svg-fonts |
|
@elrumordelaluz I can approve the bug is still persistent. It may very well be the time to open an issue on Vercel's side. |
|
And now this example works! Seems that including @vixalien can you try in your NextJS project, which |
|
Can confirm that this also works in a nextjs project, just moving the |
|
For anyone else having this issue with a Next.js app (and therefore working with a
// next.config.js
module.exports = {
target: 'serverless',
webpack5: true,
webpack: function (config, { dev, isServer }) {
// Fixes npm packages that depend on `fs` module
if (!isServer) config.resolve.fallback.fs = false
// copy files you're interested in
if (!dev) {
config.plugins.push(
new CopyPlugin({ patterns: [{ from: 'fonts', to: 'fonts' }] })
)
}
return config
}
}
// In your severless function file
let basePath = process.cwd()
if (process.env.NODE_ENV === 'production') {
basePath = path.join(process.cwd(), '.next/server/chunks')
}
path.resolve(basePath, 'fonts', 'fonts.conf')
path.resolve(basePath, 'fonts', 'myfont.ttf')
The font file did not actually need to be loaded (for example no need to |
|
Chiming in for anyone still struggling to use fonts in a sharp svg within a next.js When using the copy plugin, the <?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>/var/task/.next/server/chunks/fonts/</dir>
<cachedir>/tmp/fonts-cache/</cachedir>
<config></config>
</fontconfig>The The |
|
Lately, this has broken for me again, including the updated instructions @shrugs posted. It's possible it might be because I upgraded to Next.js 12. |
|
I created a reproducible example repo here: https://github.com/mtimofiiv/vercel-fonts-demo And it's deployed here: https://vercel-fonts-demo.vercel.app Readme file in the repo has all the things I tried. |
|
I can't help with commercial vendor-specific runtimes, but the |
@mtimofiiv I have also upgraded to next.js 12 and this fix worked for me. |
|
To the folks that are still struggling. Switch libraries to jimp and follow this answer: |
|
can anybody fix this error, still facing this issue using next 14.2.6 |
|
Got this working on Next.js @ 15.x API Routes in Step 1 - Create
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>/var/task/fonts</dir>
<cachedir>/tmp/fontconfig</cachedir>
<match target="pattern">
<test qual="any" name="family">
<string>Arial</string>
</test>
<edit name="file" mode="assign">
<string>/var/task/fonts/Arial.ttf</string>
</edit>
</match>
</fontconfig>The above Step 2 - Update Add /** @type {import("next").NextConfig} */
const config = {
outputFileTracingRoot: process.cwd(),
outputFileTracingIncludes: {
'/api/**/*': ['fonts/**/*'],
},
// ... rest of your config
}
export default config;Step 3 - Add Add a {
"version": 3,
"routes": [
{
"src": "/api/(.*)",
"dest": "/api/$1"
}
]
}Step 4 - Update your Add the following to your implementation around import path from 'path';
import sharp from 'sharp';
// Configure Sharp to use the custom fonts
const fontConfigPath = path.join(process.cwd(), 'fonts', 'fonts.conf');
const fontPath = path.join(process.cwd(), 'fonts', 'Arial.ttf');
sharp.cache(false);
if (process.env.NODE_ENV === 'production') {
process.env.FONTCONFIG_PATH = '/var/task/fonts';
process.env.LD_LIBRARY_PATH = '/var/task';
}
// ... rest of your codeAdditional Notes
|
This worked for me! https://github.com/FireLord/PosterWebsite/commit/f68ed0d92113d354ab08c508ac6adc5677f87fc1 |
Using latest version
Yes, probably (installed it like a week ago)
Steps to reproduce
Create any nextJS app that renders an SVG into PNG with sharp.js then deploy it to vercel
What is the expected behaviour?
The svg will render correctly
Code sample
Sorry but the code is in JSX
Component
API
Are you able to provide a sample image that helps explain the problem?
When rendered on my PC
When rendered on vercel
You can view the full source at Github and you can access the rendering api hosted here
I noted that this only happens on vercel, not on my local PC. so I suspect the problem is the linux container or whatever that vercel uses to host our apps.
You may clone my app and run it locally and check (If you need instructions tell me)
What is the output of running
npx envinfo --binaries --system?I can't access that right now
The text was updated successfully, but these errors were encountered: