ITADN

[🐞] Confusing `NoMatchingRenderer` failure with some components crossing Astro/Qwik component boundary

#228Closedseleb 创建于 2025-01-22
S
selebcommented
### Which component is affected? Integration ### Describe the bug Hey there, I'm working a project that uses Astro + Qwik via this integration, and we're running into some cases where the SSR fails. The error output appears misleading, but I'm not familiar enough with the integration to guess at a specific cause. Sample error output: ```sh [ERROR] [NoMatchingRenderer] Unable to render `Counter`. There is 1 renderer configured in your `astro.config.mjs` file, but it was not able to server-side render `Counter`. Hint: Did you mean to enable the `@astrojs/react`, `@astrojs/preact`, `@astrojs/solid-js`, `@astrojs/vue` or `@astrojs/svelte` integration? See https://docs.astro.build/en/guides/framework-components/ for more information on how to install and configure integrations. Error reference: https://docs.astro.build/en/reference/errors/no-matching-renderer/ Stack trace: at renderFrameworkComponent (<workspace>\qwik-astro-ssr-failure-repro\node_modules\astro\dist\runtime\server\render\component.js:175:15) [...] See full stack trace in the browser, or rerun with --verbose. ``` The provided reproduction link demonstrates the error based on the starter: [`counter.tsx`](https://github.com/seleb/qwik-astro-ssr-failure-repro/blob/master/src/components/counter.tsx) has been modified to be an inline component that renders text inside a fragment, and is itself rendered inside the `.astro` route. Any of the following changes resolves the issue: - Adding the `component$` wrapper to `counter.tsx` - Replacing the fragment in `counter.tsx` with a `<div>` tag - Rendering `<Counter />` inside another Qwik component that itself has an existing wrapper `<div>` (e.g. [`Wrapper.tsx`](https://github.com/seleb/qwik-astro-ssr-failure-repro/blob/master/src/components/Wrapper.tsx#L6)). Note that this does not avoid the issue if it is rendered via children/slots (e.g. [`WrapperViaChildren.tsx`](https://github.com/seleb/qwik-astro-ssr-failure-repro/blob/master/src/pages/index.astro#L30)) Although the above changes may be workarounds in some cases, they may not always be viable: - The `component$` wrapper requires children to be converted to slots, which may affect behaviour (e.g. slots have no equivalent for `children ? <HasChildren /> : <HasNoChildren />`). In our real use case, we've also seen significant decreases in server performance/TTFB when many inline components are converted to use `component$`, and cannot adopt this workaround - Adding wrapper elements may be incompatible with the DOM layout/semantics - There may not be any relevant ancestor components available to use as wrappers. Rendering the entire route body in a wrapper route-specific Qwik "page" component is more reliable, but this adds additional boilerplate to every route and is subject to the current limitation where `.astro` components must be responsible for rendering `html`/`head` elements ### Reproduction https://github.com/seleb/qwik-astro-ssr-failure-repro ### Steps to reproduce 1. `npm i` 2. `npm start` 3. error occurs ### System Info ```shell System: OS: Windows 10 10.0.19045 CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11980HK @ 2.60GHz Memory: 45.09 GB / 63.71 GB Binaries: Node: 20.12.2 - C:\Program Files\nodejs\node.EXE npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.19041.4355 ``` ### Additional Information _No response_
关闭于 2025-01-25 10 条评论