Update preact.mdx

[Jean-Baptiste-Lasselle]

fix doc typo: use pnpm exec astro add preact to run astro cli, instead of pnpm astro add preact

Description (required)

Indeed, if you run pnpm astro add preact, you get the following error :

$ pnpm astro add preact

> ossified-orbit@0.0.1 astro C:\Users\Utilisateur\radio_jaune_2024
> astro "add" "preact"

'astro' n’est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.
 ELIFECYCLE  Command failed with exit code 1.

Related issues & labels (optional)

• Closes #
• Suggested label:

Environment

• Git bash for windows,
• astro 4.2.4
• pnpm 8.14.1

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs	🛑 Canceled (Inspect)		Jan 24, 2024 4:55am

[astrobot-houston]

Hello! Thank you for opening your first PR to Astro’s Docs! 🎉

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any broken links you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel 🥳

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[Jean-Baptiste-Lasselle]

Important update, a useful warning for docs

Hello, as I was setting up a new astro project, I had to execute pnpm dlx to execute astro add preact.

But after successfully adding preact astro integration using pnpm dlx, I experienced an issue:

• I then tried to add another package, lucide-preact
• to do that, I executed pnpm add --save lucide-preact
• I ended up with the following error :

$ pnpm add --save lucide-preact
 WARN  Moving astro that was installed by a different package manager to "node_modules/.ignored"
 WARN  Moving preact that was installed by a different package manager to "node_modules/.ignored"
 EPERM  EPERM: operation not permitted, rename 'C:\Users\Utilisateur\my_project_here\node_modules\astro' -> 'C:\Users\Utilisateur\my_project_here\node_modules\.ignored\astro'

Now, to solve that, I had to roll back the astro preact integration installation, by :

• running :

rm -fr ./node_modules/
pnpm remove @astrojs/preact preact

• I di not change my astro.config.mjs :

import tailwind from "@astrojs/tailwind";
import icon from "astro-icon";
import { defineConfig } from "astro/config";

import preact from "@astrojs/preact";

// https://astro.build/config
export default defineConfig({
  site: "https://astro-moon-landing.netlify.app/",
  integrations: [tailwind(), icon(), preact({ compat: true })]
});

• to :

import tailwind from "@astrojs/tailwind";
import icon from "astro-icon";
import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  site: "https://astro-moon-landing.netlify.app/",
  integrations: [tailwind(), icon()]
});

• Then I manually installed the astro preact integration, and the lucide-preact package :

pnpm add @astrojs/preact preact
pnpm add @preact/compat
pnpm add lucide-preact

Note that after that, I tested creating a bare new astro project, to try and use pnpm exec instead of pnpm dlx, and that confirmed to se astro cli with pnpm, one should use pnpm exec astro:

Utilisateur@Utilisateur-PC MINGW64 ~/pr_test/retrograde-ring
$ pnpm exec astro add preact
- Resolving packages...
√ Resolving packages...
05:03:04
  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────╮
 │ pnpm add @astrojs/preact@^3.1.0 preact@^10.19.3  │
 ╰──────────────────────────────────────────────────╯

? Continue? » (Y/n)Y
√ Continue? ... yes
- Installing dependencies...
√ Installing dependencies...
05:03:25
  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import preact from "@astrojs/preact";         │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [preact()]                    │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

? Continue? » (Y/n)Y
√ Continue? ... yes
05:03:32
   success  Added the following integration to your project:
  - @astrojs/preact
05:03:32
  Astro will make the following changes to your tsconfig.json:

 ╭ tsconfig.json ─────────────────────────────╮
 │ {                                          │
 │   "extends": "astro/tsconfigs/strictest",  │
 │   "compilerOptions": {                     │
 │     "jsx": "react-jsx",                    │
 │     "jsxImportSource": "preact"            │
 │   }                                        │
 │ }                                          │
 ╰────────────────────────────────────────────╯

? Continue? » (Y/n)Y
√ Continue? ... yes
05:03:34
   success  Successfully updated TypeScript settings

Utilisateur@Utilisateur-PC MINGW64 ~/pr_test/retrograde-ring
$ pnpm add --save preact @preact/compat lucide-preact
Progress: resolved 0, reused 1, downloaded 0, added 0
Progress: resolved 3, reused 3, downloaded 0, added 0
Progress: resolved 209, reused 185, downloaded 0, added 0
Packages: +2
++
Progress: resolved 479, reused 444, downloaded 0, added 1
Progress: resolved 479, reused 444, downloaded 0, added 2
Progress: resolved 479, reused 444, downloaded 0, added 2, done

dependencies:
+ @preact/compat 17.1.2
+ lucide-preact 0.314.0

Done in 6.9s

The astro version I used at the time of my test is ^4.2.4, :

$ cat package.json
{
  "name": "retrograde-ring",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^4.2.4"
  }
}

My guessed explanation is that using pnpm dlx invokes npm ( npx ), while we want to use pnpm, and that's why one should use pnpm exec.

So I think it would be useful to add a warning about that point in the astro docs, for the pnpm astro projects. I would say this warning should appear at least for every astro integration commands for frameworks, like here for preact in this PR.

[Jean-Baptiste-Lasselle]

just squashed my commits

[sarah11918]

Hi! Thank you for your thoroughness here!

Can you please file a docs Issue about this instead, so that others can examine what's happening here? This is not something reported by anyone else, so I'd like others to be able to verify and figure out what is happening so we can decide what, if anything, needs to change in docs.

[Jean-Baptiste-Lasselle]

what's

Thank you for your quick reply! I will do that with pleasure :) , thank you all astro team for that awesome project! :)

[Jean-Baptiste-Lasselle]

@sarah11918 there you go : withastro/astro#9844