astro
astro copied to clipboard
withastro
🐛 BUG: Astro's Preact/compat support doesn't handle Preact pragmas quite right
What version of astro are you using?
v1.0.0-beta.63
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
npm
What operating system are you using?
Windows
Describe the Bug
When trying to use Astro's Preact {compat: true} mode, I run into some strange issues when trying to utilize Preact.
Say I have the following Comp.tsx file:
import * as Preact from 'preact';
export const Comp = () => {
return <p>Hello, world</p>
}
And the following pages/index.astro file:
---
import {Comp} from '../components/TestComp.tsx';
---
<html>
<body>
<Comp client:load/>
</body>
</html>
Upon running npm run dev I will get the following error:
The error that's displayed on the UI
10:43:55 PM [renderer] C:/Users/crutchcorn/git/Astro/astro-preact-compat-bug/src/components/TestComp.tsx
Unable to resolve a renderer that handles this file! With more than one renderer enabled, you should include an import or use a pragma comment.
Add import React from 'react' or /* jsxImportSource: react */ to this file.
/node_modules/astro/dist/runtime/server/index.js:219
throw new Error(`Unable to render ${metadata.displayName}!
^
Error: Unable to render Comp!
This component likely uses @astrojs/react or @astrojs/preact,
but Astro encountered an error during server-side rendering.
Please ensure that Comp:
1. Does not unconditionally access browser-specific globals like `window` or `document`.
If this is unavoidable, use the `client:only` hydration directive.
2. Does not conditionally return `null` or `undefined` when rendered on the server.
If you're still stuck, please open an issue on GitHub or join us at https://astro.build/chat.
at Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js:219:15)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
However, if I make the following change:
import * as React from 'preact';
export const Comp = () => {
return <p>Hello, world</p>
}
This error no longer occurs.
This fix is showcased by this minimal repo PR:
https://github.com/crutchcorn/astro-preact-compat-bug/pull/1/files
I would be willing to make a PR to fix this issue, but I admittedly do not know Astro's internals well enough yet. Happy to pair-code to solve this, however. That way, I can hopefully help with dev issues in the future! :)
Link to Minimal Reproducible Example
https://github.com/crutchcorn/astro-preact-compat-bug
Participation
- [ ] I am willing to submit a pull request for this issue.
Thanks @crutchcorn! I can confirm that setting compat: false resolves the issue.
Here’s a Stackblitz link for anyone who wants to spin up the reproduction quickly: https://stackblitz.com/edit/github-vvrzkz?file=src%2Fcomponents%2FTestComp.tsx,astro.config.mjs
I don’t fully understand exactly why enabling compat would do this, but you can switch the preact import to a format that works with compat, so that might at least unblock you for now!
This form is working for me:
import { h } from 'preact';
export const Comp = () => {
return <p>Hello, world</p>;
};
