chore: update Node.js version to 24

.circleci/config.yml

@@ -117,11 +117,11 @@ aliases:
 executors:
   node:
     docker:
-      - image: node:16.14.2-bullseye
+      - image: node:24-bullseye
     working_directory: ~/codesandbox-client
   node-xlarge:
     docker:
-      - image: node:16.14.2-bullseye
+      - image: node:24-bullseye
     resource_class: xlarge
     working_directory: ~/codesandbox-client
   docker_machine:

.codesandbox/ci.json

@@ -2,5 +2,5 @@
   "packages": ["./packages/notifications"],
   "buildCommand": "build:deps",
   "sandboxes": ["p35r38kmyj"],
-  "node": "16"
+  "node": "24"
 }

.codesandbox/environment.json

@@ -1,3 +1,3 @@
 {
-  "nodeVersion": "16"
+  "nodeVersion": "24"
 }

.nvmrc

@@ -1 +1 @@
-v16
+v24

CONTRIBUTING.md

@@ -4,6 +4,7 @@
 
 - [Code of Conduct](#code-of-conduct)
 - [Code Organization](#code-organization)
+- [Package Management](#package-management)
 - [Setting Up the project locally](#setting-up-the-project-locally)
 - [Submitting a Pull Request](#submitting-a-pull-request)
 - [Add yourself as a contributor](#add-yourself-as-a-contributor)
@@ -43,6 +44,54 @@ access to all your CodeSandbox content!
 series
 [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
 
+## Package Management
+
+This monorepo uses a dual package management approach combining **Yarn workspaces** and **Lerna**:
+
+### Yarn Workspaces
+
+Yarn workspaces are used for the main monorepo packages that share dependencies and benefit from dependency hoisting. These packages are listed in `package.json` under `workspaces.packages`:
+
+- All packages in `packages/*` (e.g., `packages/app`, `packages/common`, `packages/components`)
+- `standalone-packages/sse-loading-screen` (added to workspaces for Node 24 compatibility)
+
+Yarn handles dependency installation and hoisting for these packages automatically.
+
+### Lerna
+
+Lerna is configured to manage packages independently from Yarn workspaces. It uses its own package discovery (`packages/*` and `standalone-packages/*`) as defined in `lerna.json`. This allows Lerna to:
+
+- Run scripts (like `install-dependencies`) across both workspace packages and standalone packages
+- Manage versioning independently for each package
+- Execute commands in parallel across all packages
+
+### Standalone Packages
+
+Some packages in `standalone-packages/` are **not** part of Yarn workspaces:
+
+- `codesandbox-browserfs`: Runs `yarn` to install dependencies
+- `sse-loading-screen`: Conditionally runs `yarn install` only if not in workspace context (checks for `../../node_modules`)
+- `vscode-extensions`: Runs `yarn decompress-extensions` to extract compressed extension files
+- `vscode-textmate`: Runs `npm install --ignore-scripts` to install dependencies without running postinstall scripts
+
+These packages have their own `install-dependencies` scripts that are run via Lerna during `yarn postinstall`. They are managed separately because:
+
+- They have different installation processes (some use npm, some have special setup scripts)
+- They may have different dependency resolution needs
+- They're built and deployed independently
+
+### Lerna Workspaces Warning
+
+When running `yarn install`, you may see a warning:
+
+```
+lerna WARN EWORKSPACES Workspaces exist in the root package.json, but Lerna is not configured to use them.
+```
+
+**This warning is expected and can be safely ignored.** It occurs because Lerna is intentionally configured to use its own package discovery (`useWorkspaces: false` in `lerna.json`) rather than delegating to Yarn workspaces. This allows Lerna to manage standalone packages that aren't part of the Yarn workspace configuration.
+
+The `postinstall` script runs `lerna run install-dependencies` to execute each package's `install-dependencies` script, ensuring all packages are properly set up regardless of whether they're in Yarn workspaces or not.
+
 ## Setting Up the project locally
 
 To install the project you need to have `yarn` and `node`
@@ -58,8 +107,8 @@ To install the project you need to have `yarn` and `node`
     cd codesandbox-client
     ```
 
-2.  Your environment needs to be running Node v. 10
-    - `.nvmrc` config exists in the repo root, specifying a v.10.x.x version
+2.  Your environment needs to be running Node v. 24
+    - `.nvmrc` config exists in the repo root, specifying a v.24.x.x version
     - you can use [fnm](https://github.com/Schniz/fnm) (`fnm use`) to change
       your current node version to the one specified in `.nvmrc`
 3.  from the root of the project: `yarn` to install all dependencies

lerna.json.README.md

@@ -0,0 +1,36 @@
+# Lerna Configuration
+
+This file configures Lerna for the CodeSandbox monorepo.
+
+## Configuration Details
+
+- **`packages`**: Defines package discovery patterns (`packages/*` and `standalone-packages/*`)
+- **`version`**: Set to `"independent"` to allow each package to version independently
+- **`useNx`**: Disabled (set to `false`)
+- **`useWorkspaces`**: Not set (defaults to `false`)
+
+## Why `useWorkspaces` is not enabled
+
+Lerna is intentionally configured to use its own package discovery mechanism rather than delegating to Yarn workspaces. This is because:
+
+1. **Standalone packages** (`codesandbox-browserfs`, `vscode-extensions`, `vscode-textmate`) have their own installation processes:
+   - Some use `npm` instead of `yarn`
+   - Some require special setup scripts (e.g., decompressing extensions)
+   - They may have different dependency resolution needs
+
+2. **Independent management**: Standalone packages are built and deployed independently, so they don't need to be part of the Yarn workspace dependency graph.
+
+3. **Script execution**: Lerna's independent package discovery allows us to run `install-dependencies` scripts across all packages (both workspace and standalone) during the `postinstall` hook.
+
+## Expected Warning
+
+When running Lerna commands, you may see:
+
+```
+lerna WARN EWORKSPACES Workspaces exist in the root package.json, but Lerna is not configured to use them.
+```
+
+**This warning is expected and can be safely ignored.** It occurs because Lerna uses its own package discovery rather than Yarn workspaces. This configuration is intentional and working as designed.
+
+For more details, see the [Package Management](../CONTRIBUTING.md#package-management) section in CONTRIBUTING.md.
+

package.json

@@ -26,7 +26,8 @@
       "packages/sse-hooks",
       "packages/template-icons",
       "packages/vue3-browser-compiler",
-      "packages/vue3-transpiler"
+      "packages/vue3-transpiler",
+      "standalone-packages/sse-loading-screen"
     ],
     "nohoist": [
       "**/react-codemirror2",
@@ -116,6 +117,6 @@
     ]
   },
   "engines": {
-    "node": "^16.0.0"
+    "node": "^24.0.0"
   }
 }

packages/codesandbox-api/tsconfig.json

@@ -12,7 +12,8 @@
     "emitDecoratorMetadata": true,
     "declarationDir": "dist/types",
     "outDir": "compiled",
-    "typeRoots": ["node_modules/@types", "../../node_modules/@types"]
+    "typeRoots": ["node_modules/@types", "../../node_modules/@types"],
+    "skipLibCheck": true
   },
   "include": ["src"],
   "exclude": ["__tests__"]

packages/components/package.json

@@ -82,6 +82,6 @@
     "react-dom": "^16.9.0"
   },
   "engines": {
-    "node": "^16.0.0"
+    "node": "^24.0.0"
   }
 }

packages/vue3-browser-compiler/tsconfig.json

@@ -47,7 +47,7 @@
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "types": [],                              /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

standalone-packages/codesandbox-browserfs/package.json

@@ -42,6 +42,7 @@
     "bfs-process": "~0.1.6",
     "body-parser": "~1.18.3",
     "buffer": "~5.1.0",
+    "cross-env": "^6.0.0",
     "detect-browsers": "~2.0.0",
     "dropbox": "~4.0.9",
     "express": "~4.19.2",
@@ -69,8 +70,8 @@
     "tslint": "~5.11.0",
     "typedoc": "~0.11.1",
     "typescript": "^5.0.0",
-    "webpack": "~4.31.0",
-    "webpack-cli": "~3.3.2",
+    "webpack": "~4.46.0",
+    "webpack-cli": "~3.3.12",
     "webpack-dev-server": "~3.3.1"
   },
   "scripts": {
@@ -81,10 +82,10 @@
     "watch:scripts": "tsc -p scripts --watch",
     "build:rollup": "rollup -c src/rollup.config.js",
     "watch:rollup": "rollup -w -c src/rollup.config.js",
-    "build:webpack": "webpack  --mode development --config src/webpack.config.js",
-    "watch:webpack": "webpack -w  --mode development --config src/webpack.config.js",
-    "build:webpack-release": "webpack -p --config src/webpack.config.js",
-    "watch:webpack-release": "webpack -w -p --config src/webpack.config.js",
+    "build:webpack": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack  --mode development --config src/webpack.config.js",
+    "watch:webpack": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack -w  --mode development --config src/webpack.config.js",
+    "build:webpack-release": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack -p --config src/webpack.config.js",
+    "watch:webpack-release": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack -w -p --config src/webpack.config.js",
     "build": "npm-run-all --parallel build:tsc build:scripts --sequential build:rollup --parallel build:webpack build:webpack-release",
     "build:dev": "npm-run-all build script:make_dist dist:build:node",
     "watch": "npm-run-all build --parallel watch:tsc watch:scripts watch:rollup watch:webpack watch:webpack-release",
@@ -94,8 +95,8 @@
     "test:watch:rollup": "rollup -w -c test/rollup.config.js",
     "test:build:rollup-worker": "rollup -c test/rollup.worker.config.js",
     "test:watch:rollup-worker": "rollup -w -c test/rollup.worker.config.js",
-    "test:build:webpack": "webpack --config test/webpack.config.js",
-    "test:watch:webpack": "webpack -w --config test/webpack.config.js",
+    "test:build:webpack": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack --config test/webpack.config.js",
+    "test:watch:webpack": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" webpack -w --config test/webpack.config.js",
     "test:build": "npm-run-all test:build:tsc --parallel test:build:rollup test:build:rollup-worker --sequential test:build:webpack",
     "test:watch": "npm-run-all --parallel test:watch:tsc test:watch:rollup test:watch:rollup-worker test:watch:webpack",
     "dist:build:node": "tsc -p src/tsconfig.node.json",