From 5b1facfe291b998c0c6814293b18df211a8f3cd3 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Fri, 12 Aug 2022 07:34:07 +0800 Subject: [PATCH] Clarify preact/compat integration docs (#4267) * Clarify preact/compat integration * Create long-lobsters-ring.md Co-authored-by: Fred K. Schott --- .changeset/long-lobsters-ring.md | 5 +++++ packages/integrations/preact/README.md | 17 +++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 .changeset/long-lobsters-ring.md diff --git a/.changeset/long-lobsters-ring.md b/.changeset/long-lobsters-ring.md new file mode 100644 index 000000000000..f75ba2be8835 --- /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 2fc5e75f690f..9d4c1fb052fa 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