michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Clarify preact/compat integration docs (#4267)

Browse source 
* Clarify preact/compat integration

* Create long-lobsters-ring.md

Co-authored-by: Fred K. Schott <fkschott@gmail.com>
This commit is contained in:
Bjorn Lu 2022-08-12 07:34:07 +08:00 committed by GitHub
parent 52068e2644
commit 5b1facfe29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/long-lobsters-ring.md Normal file
View file

@ -0,0 +1,5 @@
---
"@astrojs/preact": patch
---
README: Clarify `compat` docs

17
packages/integrations/preact/README.md
View file

@ -104,6 +104,23 @@ export default defineConfig({
With the `compat` option enabled, the Preact integration will render React components as well as Preact components in your project and also allow you to import React components inside Preact components. Read more in [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) on the Preact website.
When importing React component libraries, in order to swap out the `react` and `react-dom` dependencies as `preact/compat`, you can use [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to do so.
```js
// package.json
{
"overrides": {
"react": "npm:@preact/compat@latest",
"react-dom": "npm:@preact/compat@latest"
}
}
```
Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and [`yarn` resolutions](https://yarnpkg.com/configuration/manifest#resolutions) docs for their respective overrides features.
> **Note**
> Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
## Examples