search

etherCorps / sveltekit-og

Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit
https://sveltekit-og.ethercorps.io/
203 stars 12 forks source link

Can not generate images if the route is not prerendered #33

Closed rbozan closed 8 months ago

rbozan commented 10 months ago

In the development mode the og image is being generated properly, but when I build it and then run the built script it always returns the following:

Error: ENOENT: no such file or directory, open '/home/rbozan/Projects/learning/game/build/server/chunks/noto-sans-v27-latin-regular.ttf'
    at Object.openSync (node:fs:601:3)
    at Object.readFileSync (node:fs:469:35)
    at file:///home/rbozan/Projects/learning/game/build/server/chunks/_server.ts-a9e1fd20.js:18852:19
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

When I use prerendering it does work, but when I don't I see the above error.

theetherGit commented 10 months ago

I'm also having this problem. It will be good if you share more details e.g. runtime.

rbozan commented 10 months ago 
❯ npm list
game@0.0.1 /home/rbozan/Projects/learning/game
├── @auth/core@0.18.1
├── @auth/sveltekit@0.3.12
├── @ethercorps/sveltekit-og@2.0.2
├── @fontsource-variable/lexend@5.0.17
├── @fontsource/overpass@5.0.15
├── @fontsource/source-code-pro@5.0.15
├── @graphql-codegen/cli@5.0.0
├── @graphql-codegen/typed-document-node@5.0.1
├── @graphql-codegen/typescript-operations@4.0.1
├── @graphql-codegen/typescript-resolvers@4.0.1
├── @graphql-codegen/typescript@4.0.1
├── @graphql-codegen/urql-introspection@3.0.0
├── @graphql-eslint/eslint-plugin@3.20.1
├── @kitql/client@0.5.12
├── @kitql/graphql-codegen@0.5.4
├── @neoconfetti/svelte@1.0.0
├── @playwright/test@1.34.3
├── @popperjs/core@2.11.8
├── @sentry/sveltekit@7.80.1
├── @sveltejs/adapter-auto@2.1.1
├── @sveltejs/adapter-node@1.3.1
├── @sveltejs/adapter-static@2.0.3
├── @sveltejs/kit@1.27.6
├── @sveltekit-addons/document@1.0.1 overridden
├── @types/cookie@0.5.4
├── @types/diff@5.0.8
├── @types/dom-speech-recognition@0.0.4
├── @types/gtag.js@0.0.16
├── @typescript-eslint/eslint-plugin@6.10.0
├── @typescript-eslint/parser@6.10.0
├── @urql/exchange-graphcache@6.3.3
├── @urql/exchange-retry@1.2.0
├── @urql/svelte@4.0.4
├── @vite-pwa/sveltekit@0.2.8
├── autoprefixer@10.4.16
├── chart.js@4.3.0
├── chartjs-plugin-datalabels@2.2.0
├── classnames@2.3.2
├── dexie@4.0.1-beta.1
├── diff@5.1.0
├── eslint-config-prettier@9.0.0
├── eslint-plugin-prettier@5.0.1
├── eslint-plugin-simple-import-sort@10.0.0
├── eslint-plugin-svelte@2.34.1
├── eslint-plugin-unused-imports@3.0.0
├── eslint@8.53.0
├── fisher-yates@1.0.4
├── flowbite-svelte@0.44.19
├── flowbite@1.8.1
├── ga-gtag@1.1.7
├── graphql-codegen@0.4.0
├── html-svelte-parser@0.0.1
├── leaflet@1.9.4
├── license-checker-rseidelsohn@4.2.10
├── lottie-svelte@1.3.6
├── lucide-svelte@0.292.0
├── media-chrome@1.4.5
├── meilisearch@0.34.2
├── moment@2.29.4
├── pixi.js@7.2.4
├── postcss-load-config@4.0.1
├── postcss@8.4.31
├── prettier-plugin-svelte@3.0.3
├── prettier@3.0.3
├── rollup-plugin-visualizer@5.9.2
├── svelte-chartjs@3.1.2 overridden
├── svelte-check@3.5.2
├── svelte-gestures@1.5.2
├── svelte-leafletjs@0.10.0
├── svelte-local-storage-store@0.6.4
├── svelte-preprocess@5.0.4
├── svelte@4.2.3
├── sveltekit-i18n@2.4.2
├── svg-dom-arrows@2.1.5
├── tailwindcss@3.3.5
├── tesseract.js@4.1.4
├── tslib@2.6.2
├── typescript@5.2.2
├── vite-imagetools@5.1.2
├── vite-plugin-top-level-await@1.3.1
├── vite@4.5.0
├── vitest@0.34.6
└── youtube-video-element@1.0.0
❯ screenfetch
          ::::.    ':::::     ::::'           rbozan@localhost.localdomain
          ':::::    ':::::.  ::::'            OS: NixOS 23.05.4448.5550a85a087c (Stoat)
            :::::     '::::.:::::             Kernel: x86_64 Linux 6.1.59
      .......:::::..... ::::::::              Uptime: 17m
     ::::::::::::::::::. ::::::    ::::.      Packages: 9274
    ::::::::::::::::::::: :::::.  .::::'      Shell: bash 5.2.15
           .....           ::::' :::::'       Resolution: 1920x1080
          :::::            '::' :::::'        WM: sway
 ........:::::               ' :::::::::::.   GTK Theme: Adwaita-dark [GTK2/3]
:::::::::::::                 :::::::::::::   Disk: 187G / 257G (77%)
 ::::::::::: ..              :::::            CPU: AMD Ryzen 5 PRO 4650G with Radeon Graphics @ 12x 3.7GHz
     .::::: .:::            :::::             GPU: AMD/ATI
    .:::::  :::::          '''''    .....     RAM: 3428MiB / 31510MiB
    :::::   ':::::.  ......:::::::::::::'    
     :::     ::::::. ':::::::::::::::::'     
            .:::::::: '::::::::::            
           .::::''::::.     '::::.           
          .::::'   ::::.     '::::.          
         .::::      ::::      '::::.         
❯ node -v
v18.17.1
theetherGit commented 10 months ago

ok, I'm working on this. In future Sveltekit-og going to have runtime specific package. Everything related to svelte compiler is done. Soon, i'll able to completely fix this issue. All open issues are related to same kind of scenario and js having multiple runtimes.

theetherGit commented 8 months ago

I'm not sure about the pre rendering issues but this package is only meant to be used in server scenarios only. I'll suggest you ti use in only +server.{ts,js}