Cannot read properties of undefined (reading 'render')

[Tc-001]

When building my prod site with astro-fonts@0.2.3, it will fail with the following error:

Browser error:

Cannot read properties of undefined (reading 'render')

TypeError: Cannot read properties of undefined (reading 'render')
    at Object.check (@astrojs/renderer-svelte/server.js:4:18)
    at Module.renderComponent (../../../src/runtime/server/index.ts:163:25)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Console error:

@astrojs/renderer-svelte/server.js:7
        return Component['render'] && Component['$$render'];
                        ^

TypeError: Cannot read properties of undefined (reading 'render')
    at Object.check (@astrojs/renderer-svelte/server.js:7:18)
    at Module.renderComponent (/node_modules/.pnpm/astro@0.22.20_postcss-load-config@3.1.3/node_modules/astro/dist/runtime/server/index.js?v=2fb49a19:148:23)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 ELIFECYCLE  Command failed with exit code 1.

I am unable to reproduce the error in codesandbox, but downgrading to astro-fonts@0.1.0 fixed the issue for some reason

I am really unsure where to start trying to debug this, or even if this is related to astro-fonts, of if it should be reported upstream

Some more info

package.json

```json { "name": "@example/starter", "version": "0.0.1", "private": true, "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "astro preview" }, "devDependencies": { "@astrojs/renderer-svelte": "^0.3.1", "@types/node": "^17.0.18", "astro": "^0.22.20", "astro-fonts": "^0.2.3", "astro-spa": "^1.3.8", "autoprefixer": "^10.4.2", "cssnano": "^5.0.17", "fuse.js": "^6.5.3", "marked": "^4.0.12", "postcss-preset-env": "^7.3.3", "vite-plugin-html": "2.1.2", "astro-icon": "^0.5.3", "postcss-load-config": "^3.1.3" }, "dependencies": {}, "browserslist": [ "defaults" ] } ```

[Tc-001]

Seems to no longer be the case as of 0.23.1

[aFuzzyBear]

yeh, there was a few breaking changes in the first release, but now things should be all good @Tc-001 , thank you for reporting it my friend

[Tc-001]

Hello @aFuzzyBear !

Sadly I can indeed reproduce this issue. It seems to happen when there is a svelte renderer present in the config. I am unsure about other renderers.

Repro: https://codesandbox.io/s/condescending-chaum-29ceid?file=/src/layouts/main.astro

Removing <Font /> component fixes the error and renders a blank page.

I am still unsure of the exact cause, hope this helps!

[aFuzzyBear]

Hey @Tc-001 , thank you for the feedback, svelte you say, I'll ask @lostra01 for his advice on this,

Hope you are doing well my friend.

[Tc-001]

Thanks, I am doing well!

This is a really weird side effect. I have gone through the code like 10 times and see no reason for it to throw a fuss.

why does it even care what renderer the page uses???

Best of lucks!

[Tc-001]

Tldr from me and fuzzy's discord convo: Astro seems to pick up the font component as something that needs an external renderer, external renderer can't render the component

[aFuzzyBear]

Yes, I feel that this component is needing to be revisited and perhaps redone, however given there is a few interesting things in development from the AStro core team I am hesitant to begin any real redesign until the new api's for integrations, and build hooks comes into play