diff options
| author |  Bjorn Lu <bjornlu.dev@gmail.com>
| 2022-08-12 07:34:07 +0800 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-08-11 16:34:07 -0700 |
| commit | 5b1facfe291b998c0c6814293b18df211a8f3cd3 (patch) | |
| tree | 3d81e4abec77f1bd9b388791b8dabfd6120f0287 | |
| parent | 52068e2644dd417f92fa1c0e527817e5f761f29f (diff) | |
| download | astro-5b1facfe291b998c0c6814293b18df211a8f3cd3.tar.gz astro-5b1facfe291b998c0c6814293b18df211a8f3cd3.tar.zst astro-5b1facfe291b998c0c6814293b18df211a8f3cd3.zip | |
Clarify preact/compat integration docs (#4267)
* Clarify preact/compat integration
* Create long-lobsters-ring.md
Co-authored-by: Fred K. Schott <fkschott@gmail.com>
| -rw-r--r-- | .changeset/long-lobsters-ring.md | 5 | ||||
| -rw-r--r-- | packages/integrations/preact/README.md | 17 |
2 files changed, 22 insertions, 0 deletions
diff --git a/.changeset/long-lobsters-ring.md b/.changeset/long-lobsters-ring.md new file mode 100644 index 000000000..f75ba2be8 --- /dev/null +++ b/.changeset/long-lobsters-ring.md @@ -0,0 +1,5 @@ +--- +"@astrojs/preact": patch +--- + +README: Clarify `compat` docs diff --git a/packages/integrations/preact/README.md b/packages/integrations/preact/README.md index 2fc5e75f6..9d4c1fb05 100644 --- a/packages/integrations/preact/README.md +++ b/packages/integrations/preact/README.md @@ -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 |