From d71a842f892099c64d010709482f6b8d4ce6b48e Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Fri, 8 Mar 2024 15:09:59 +0100
Subject: [PATCH] Switch CodeSandbox repros to pnpm (#63038)

Closes #57895
Closes #57896

### What?

Switch Yarn v1 to pnpm for reproduction repos, avoiding the CodeSandbox
Yarn v1 `yarn.lock` caching problem described below

### Why?

As confirmed with @CompuIves, CodeSandbox caches the `yarn.lock` file
generated after the first start + `yarn install` of a GitHub template
(Yarn v1) - this saves old versions of Next.js (not the latest canary)
in the lockfile and causes old versions of Next.js to be installed when
users click on the CodeSandbox Reproduction link during issue creation.

This leads to the current breakage, where Next.js actually cannot even
start in the reproduction sandbox:

1. Start creating a new GitHub issue on the `vercel/next` GitHub repo
2. Open [the CodeSandbox reproduction
link](https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template)
linked in the **Link to the code that reproduces this issue** section
3. Observe the error message below in the `dev` task started below
(`experimental.appDir: true` was required in the `13.0.8-canary.0`
version of Next.js in the cached `yarn.lock` file, but the
`next.config.js` file no longer includes this config)

```bash
$ yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: > The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config
    at Object.findPagesDir (/project/sandbox/node_modules/next/dist/lib/find-pages-dir.js:80:19)
    at new DevServer (/project/sandbox/node_modules/next/dist/server/dev/next-dev-server.js:110:59)
    at NextServer.createServer (/project/sandbox/node_modules/next/dist/server/next.js:140:20)
    at /project/sandbox/node_modules/next/dist/server/next.js:155:42
    at async NextServer.prepare (/project/sandbox/node_modules/next/dist/server/next.js:130:24)
    at async /project/sandbox/node_modules/next/dist/cli/next-dev.js:344:17
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

Sandbox demo:
https://codesandbox.io/p/sandbox/quirky-pascal-n32xk2?file=%2Fnext.config.js%3A5%2C1

![Screenshot 2023-11-01 at 16 09
59](https://github.com/vercel/next.js/assets/1935696/b8287a2e-86b4-4c08-afca-bc9219b6d411)

### How?

Switch to pnpm installation commands instead of Yarn v1

### Caveats

This uses CodeSandbox-specific config

### Alternatives considered

- Delete the outdated yarn.lock file on setup of the sandbox, PR open
here: #57895
- Commit an empty `yarn.lock` file to block caching of this file, PR
open here: #57896

cc @samcx @CompuIves
---
 .../.codesandbox/tasks.json                       | 15 +++++++++++++++
 .../reproduction-template/.codesandbox/tasks.json | 15 +++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 examples/reproduction-template-pages/.codesandbox/tasks.json
 create mode 100644 examples/reproduction-template/.codesandbox/tasks.json

diff --git a/examples/reproduction-template-pages/.codesandbox/tasks.json b/examples/reproduction-template-pages/.codesandbox/tasks.json
new file mode 100644
index 0000000000000..696ece15e8570
--- /dev/null
+++ b/examples/reproduction-template-pages/.codesandbox/tasks.json
@@ -0,0 +1,15 @@
+{
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true
+    }
+  }
+}
diff --git a/examples/reproduction-template/.codesandbox/tasks.json b/examples/reproduction-template/.codesandbox/tasks.json
new file mode 100644
index 0000000000000..696ece15e8570
--- /dev/null
+++ b/examples/reproduction-template/.codesandbox/tasks.json
@@ -0,0 +1,15 @@
+{
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true
+    }
+  }
+}