Cannot read properties of undefined (reading 'render')

[Tc-001]

trafficstars

When building my prod site with [email protected], 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/[email protected][email protected]/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 [email protected] 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

{
  "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