Astro does not work when using yarn workspaces.

[sebastiaan-dev]

Astro Info

Astro                    v4.3.5
Node                     v20.9.0
System                   macOS (arm64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/starlight

If this issue only occurs in one browser, which browser is a problem?

No response

Preconditions

Following commands were executed during the creation of the monorepo:

corepack enable
yarn init -2

Describe the Bug

When trying to build an Astro project inside a monorepo using yarn workspaces Astro crashes. I tried 2 different approaches. It is of note that I added the following in .yarnrc.yml due to an error with shikiji-core:

packageExtensions: 
  astro@4.3.5:
    dependencies:
      shikiji-core: "*"

Approach 1

Install starlight with the below command in a directory <monorepo-root>/apps/, where apps is declared as a workspace with yarn.

yarn create astro --template starlight

Then the configuration crashes with the following error:

❯ yarn create astro --template starlight
➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-astro@npm:4.7.2, @astrojs/cli-kit@npm:0.4.1, agent-base@npm:7.1.0, ansi-escapes@npm:5.0.0, and 36 more.
➤ YN0000: └ Completed in 1s 244ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 40 packages were added to the project (+ 1.84 MiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 324ms

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./irregular-ice
      ◼  tmpl Using starlight as project template

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

 ██████  Project initializing...
         ✔ Template copied
         ▶ TypeScript customizing...
         □ Dependencies
      ▲  error Error: Unexpected end of JSON input

Approach 2

Install starlight with the below command in a directory which lives outside of the monorepo.

yarn create astro --template starlight

I confirm everything works, yarn dev and yarn build succeed. Then I place the newly created directory by astro inside the apps directory. I remove the yarn.lock and node-modules, and rename the package name to reflect my repository. I reinstall the dependencies, then yarn dev succeeds but yarn build fails by first trying to install dependencies with npm:

❯ yarn build
22:04:09 To continue, Astro requires the following dependency to be installed: @astrojs/check.
22:04:09 
  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────╮
 │ npm install @astrojs/check typescript  │
 ╰────────────────────────────────────────╯

Installing yes or no does no matter, the resulting error is as follows:

22:05:10 [ERROR] [check] The `@astrojs/check` and `typescript` packages are required for this command to work. Please manually install them into your project and try again.

Then astro crashes with the following output:

22:05:11 [vite] Re-optimizing dependencies because lockfile has changed
22:05:12 Types generated 143ms
22:05:12 [build] output: "static"
22:05:12 [build] directory: /<REDACTED>/apps/proud-parallax/dist/
22:05:12 [build] Collecting build info...
22:05:12 [build] ✓ Completed in 212ms.
22:05:12 [build] Building static entrypoints...
22:05:15 [build] ✓ Completed in 3.26s.

 building client (vite) 
22:05:15 [vite] ✓ 15 modules transformed.
22:05:15 [vite] dist/_astro/Tabs.astro_astro_type_script_index_0_lang.YYQMiWOA.js   0.97 kB │ gzip:  0.48 kB
22:05:15 [vite] dist/_astro/page.X_0NJa-z.js                                        2.25 kB │ gzip:  1.00 kB
22:05:15 [vite] dist/_astro/hoisted.pt_ZcN_N.js                                     6.51 kB │ gzip:  2.62 kB
22:05:15 [vite] dist/_astro/ui-core.G-WTOx7i.js                                    57.18 kB │ gzip: 18.71 kB
22:05:15 [vite] ✓ built in 113ms

 generating static routes 
22:05:15 λ /_astro/ec.sgewm.js
22:05:15   └─ /_astro/ec.sgewm.js (+2ms)
22:05:15 λ /_astro/ec.usa2f.css
22:05:15   └─ /_astro/ec.usa2f.css (+1ms)
22:05:15 ▶ /404
22:05:15   └─ /404.html (+12ms)
22:05:15 ▶ /[...slug]
22:05:15   ├─ /guides/example/index.html (+9ms)
22:05:15   ├─ index.html (+33ms)
22:05:15   └─ /reference/example/index.html (+11ms)
22:05:15 ✓ Completed in 90ms.

 generating optimized images 
22:05:15   ▶ /_astro/houston.mWcgn-6f_1ExznW.webp (reused cache entry) (+1ms) (1/1)
22:05:15 ✓ Completed in 2ms.

node:events:492
      throw er; // Unhandled 'error' event
      ^

Error: spawn /bin/sh ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn /bin/sh',
  path: '/bin/sh',
  spawnargs: [
    '-c',
    'npx -y pagefind --site ../../../../../../../../../../../apps/proud-parallax/dist'
  ]
}

Node.js v20.9.0

What's the expected result?

I expect the build to finish without errors. I also expect astro to recognise that it is in a yarn environment.

Link to Minimal Reproducible Example

In Stackblitz it was impossible to reproduce due to their container limitations. I have added codesandbox, if you cannot access this I can share a GitHub link.

codesandbox

Participation

• [ ] I am willing to submit a pull request for this issue.

[lilnasy]

Is the codesandbox private?

[sebastiaan-dev]

I am not sure how to share it properly, can you either try one of the following links:

codepen-public

codepen-live

If either of the above do not work I will make a GitHub repo.

[florian-lefebvre]

I didn't check the repo but since you're talking about shikiji-core, related PR #10063

[ematipico]

A release with the fix for this issue should arrive soon. Closing.

[sebastiaan-dev]

What is soon in this case, 1 month? It is still broken at the moment @ematipico.

[ematipico]

What is soon in this case, 1 month? It is still broken at the moment @ematipico.

No need to be sarcastic, I'll reopen the issue

[sebastiaan-dev]

It was not my intention to be sarcastic, it was a genuine question, but thank you for reopening the issue 👍.

[sebastiaan-dev]

I checked again and it seems to be an issue with the starlight template, as the minimal template succeeds. I can create the starlight template by selecting no at the Do you plan to write TypeScript? question, otherwise it results in the Unexpected end of JSON input error. Both do still have the aforementioned behaviour of wanting to install @astrojs/check typescript with npm. This is when I choose to install the dependencies later. If I instead install the dependencies with Houston it ignores the monorepo and sets up its own instance inside the yarn workspace (.yarn, yarn.lock, .pnp.cjs, etc.) causing conflicts with the parent yarn instance. This is with yarn 4.1.0 and astro 4.4.0.

[lilnasy]

Could you clarify what the issue is?

astro add attempts to use npm instead of yarn in certain cases, requiring you to skip that step and install dependencies manually. Is there something more?

[sebastiaan-dev]

I cannot setup/build the generated astro project, to clear it up I have noted the steps I tried below:

First create a new mono-repo:

mkdir astro-starlight-bug
cd astro-starlight-bug
yarn init -2

Then change the package.json to reflect the following:

{
  "name": "astro-starlight-bug",
  "packageManager": "yarn@4.1.0",
  "workspaces": [
    "apps/*"
  ]
}

Then create the corresponding directory for the workspaces:

mkdir apps
cd apps

Then do one of the following options below:

Option 1

Say yes to everything except creating a new git repository:

yarn create astro --template starlight

This results in:

 ██████  Project initializing...
         ✔ Template copied
         ▶ TypeScript customizing...
         □ Dependencies
      ▲  error Error: Unexpected end of JSON input

Option 2

Say yes to everything, except creating a new git repository and to using typescript.

yarn create astro --template starlight

This results in yarn.lock, .yarn etc. being added in /apps/<random-starlight-name>. Ignoring the fact that there is already a top level yarn configuration. This in turn leads to crashes for both yarn dev and yarn build.

Option 3

Say no to everything except the random name:

yarn create astro --template starlight

Then do the following:

cd <random-starlight-name>
# install dependencies
yarn
# yay this works
yarn dev

But executing yarn build results in:

node:events:492
      throw er; // Unhandled 'error' event
      ^

Error: spawn /bin/sh ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn /bin/sh',
  path: '/bin/sh',
  spawnargs: [
    '-c',
    'npx -y pagefind --site ../../../../../../../../../../../apps/civil-cycle/dist'
  ]
}

Node.js v20.9.0

It is of note that my earlier remarks regarding shikiji-core no longer hold, the above options were tried using astro v4.4.2.

[DKFN]

For anyone still having the issue with @astrojs/check and typescript not found in a yarn workspace, make sure to use the nohoist for astro packages.

For my usecase:

{
  "private": true,
  "workspaces": {
  "packages": [
      "notAstroApp",
      "astroApp"
  ],
  "nohoist": ["**/@astrojs/**"]
 }
}

With the file structure:

| package.json
| node_modules/
| notAstroApp
   | node_modules/
| astroApp
   | node_modules/

astro check will only check for the packages in the current working directory, however yarn may decide to put astro in the shared dependencies of your app, if this happends, astro CLI will be unable to locate your astro check install. https://github.com/withastro/astro/blob/bab700d69085b1de8f03fc1b0b31651f709cbfe3/packages/astro/src/cli/install-package.ts#L21

nohoist ensures astro is installed in your astroApp node_modules and not in the shared node_modules folder

I hope this helps !

[teinett]

I use npm workspace, but I have bug with monorepo too:

To continue, Astro requires the following dependency to be installed: @astrojs/check.

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────╮
 │ npm install @astrojs/check typescript  │
 ╰────────────────────────────────────────╯

✔ Continue? … no
08:06:50 [ERROR] [check] The `@astrojs/check` and `typescript` packages are required for this command to work. Please manually install them into your project and try again.

My package.json:

{
  "private": true,
   "workspaces": [
    "packages/*"
  ],
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Project structure:

/
├── node_modules/
├── packages
│   ├── astrojs-project
│   └── not-astrojs
├── package.json
└── other files

[florian-lefebvre]

Please open a dedicated issue

[teinett]

Please open a dedicated issue

I copied my problem to separate issue: https://github.com/withastro/astro/issues/11608