Upgrade to Yarn 4, remove support for Node 16 (#27073)

.devcontainer/Dockerfile

@@ -4,7 +4,7 @@ FROM mcr.microsoft.com/devcontainers/ruby:1-3.2-bullseye
 # Install Rails
 # RUN gem install rails webdrivers
 
-ARG NODE_VERSION="16"
+ARG NODE_VERSION="20"
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"
 
 # [Optional] Uncomment this section to install additional OS packages.

.devcontainer/post-create.sh

@@ -11,7 +11,7 @@ bundle install
 git checkout -- Gemfile.lock
 
 # Fetch Javascript dependencies
-yarn --frozen-lockfile
+yarn install --immutable
 
 # [re]create, migrate, and seed the test database
 RAILS_ENV=test ./bin/rails db:setup

.github/actions/setup-javascript/action.yml

@@ -11,9 +11,32 @@ runs:
     - name: Set up Node.js
       uses: actions/setup-node@v3
       with:
-        cache: yarn
         node-version-file: '.nvmrc'
 
+    # The following is needed because we can not use `cache: true` for `setup-node`, as it does not support Corepack yet and mess up with the cache location if ran after Node is installed
+    - name: Enable corepack
+      shell: bash
+      run: corepack enable
+
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      shell: bash
+      run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
     - name: Install all yarn packages
       shell: bash
-      run: yarn --frozen-lockfile ${{ inputs.onlyProduction != 'false' && '--production' || '' }}
+      run: yarn install --immutable
+      if: inputs.onlyProduction == 'false'
+
+    - name: Install all production yarn packages
+      shell: bash
+      run: yarn workspaces focus --production
+      if: inputs.onlyProduction != 'false'

.gitignore

@@ -55,6 +55,15 @@ npm-debug.log
 yarn-error.log
 yarn-debug.log
 
+# From https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Ignore vagrant log files
 *-cloudimg-console.log
 

.yarn/patches/babel-plugin-lodash-npm-3.3.4-c7161075b6.patch

@@ -0,0 +1,13 @@
+diff --git a/lib/index.js b/lib/index.js
+index 16ed6be8be8f555cc99096c2ff60954b42dc313d..d009c069770d066ad0db7ad02de1ea473a29334e 100644
+--- a/lib/index.js
++++ b/lib/index.js
+@@ -99,7 +99,7 @@ function lodash(_ref) {
+ 
+         var node = _ref3;
+ 
+-        if ((0, _types.isModuleDeclaration)(node)) {
++        if ((0, _types.isImportDeclaration)(node)  || (0, _types.isExportDeclaration)(node)) {
+           isModule = true;
+           break;
+         }

.yarn/patches/compression-webpack-plugin-npm-6.1.1-3a2a65987e.patch

@@ -0,0 +1,22 @@
+diff --git a/dist/index.js b/dist/index.js
+index 57e375592d984e9a429bcd9f800fa2d15cd662e4..0c47d96df3608e23adfd77d887a8f72abbd501c0 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
+ });
+ exports.default = void 0;
+ 
+-var _crypto = _interopRequireDefault(require("crypto"));
++var _createHash = _interopRequireDefault(require("webpack/lib/util/createHash"));
+ 
+ var _path = _interopRequireDefault(require("path"));
+ 
+@@ -227,7 +227,7 @@ class CompressionPlugin {
+             originalAlgorithm: this.options.algorithm,
+             compressionOptions: this.options.compressionOptions,
+             name,
+-            contentHash: _crypto.default.createHash("md4").update(input).digest("hex")
++            contentHash: _createHash.default("md4").update(input).digest("hex")
+           };
+         } else {
+           cacheData.name = (0, _serializeJavascript.default)({

.yarnclean

@@ -1,49 +0,0 @@
-# test directories
-__tests__
-test
-tests
-powered-test
-
-# asset directories
-docs
-doc
-website
-images
-# assets
-
-# examples
-example
-examples
-
-# code coverage directories
-coverage
-.nyc_output
-
-# build scripts
-Makefile
-Gulpfile.js
-Gruntfile.js
-
-# configs
-.tern-project
-.gitattributes
-.editorconfig
-.*ignore
-.eslintrc
-.jshintrc
-.flowconfig
-.documentup.json
-.yarn-metadata.json
-.*.yml
-*.yml
-
-# misc
-*.gz
-*.md
-
-# for specific ignore
-!.svgo.yml
-!sass-lint/**/*.yml
-
-# breaks lint-staged or generally anything using https://github.com/eemeli/yaml/issues/384
-!**/yaml/dist/**/doc

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

Dockerfile

@@ -13,7 +13,6 @@ ENV DEBIAN_FRONTEND="noninteractive" \
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]
 
 WORKDIR /opt/mastodon
-COPY Gemfile* package.json yarn.lock /opt/mastodon/
 
 # hadolint ignore=DL3008
 RUN apt-get update && \
@@ -36,8 +35,14 @@ RUN apt-get update && \
     bundle config set --local deployment 'true' && \
     bundle config set --local without 'development test' && \
     bundle config set silence_root_warning true && \
-    bundle install -j"$(nproc)" && \
-    yarn install --pure-lockfile --production --network-timeout 600000 && \
+    corepack enable
+
+COPY Gemfile* package.json yarn.lock .yarnrc.yml /opt/mastodon/
+COPY .yarn /opt/mastodon/.yarn
+
+RUN bundle install -j"$(nproc)"
+
+RUN yarn workspaces focus --all --production && \
     yarn cache clean
 
 FROM node:${NODE_VERSION}
@@ -78,7 +83,8 @@ RUN apt-get update && \
         tzdata \
         libreadline8 \
         tini && \
-    ln -s /opt/mastodon /mastodon
+    ln -s /opt/mastodon /mastodon && \
+    corepack enable
 
 # Note: no, cleaning here since Debian does this automatically
 # See the file /etc/apt/apt.conf.d/docker-clean within the Docker image's filesystem

README.md

@@ -96,7 +96,7 @@ To set up **MacOS** for native development, complete the following steps:
 - Run `brew install imagemagick`
 - Install Foreman or a similar tool (such as [overmind](https://github.com/DarthSim/overmind)) to handle multiple process launching.
 - Navigate to Mastodon's root directory and run `brew install nvm` then `nvm use` to use the version from .nvmrc
-- Run `corepack enable && yarn set version classic`
+- Run `corepack enable && corepack prepare`
 - Run `bundle exec rails db:setup` (optionally prepend `RAILS_ENV=development` to target the dev environment)
 - Finally, run `overmind start -f Procfile.dev`
 

Vagrantfile

@@ -112,11 +112,11 @@ bundle install
 
 # Install node modules
 sudo corepack enable
-yarn set version classic
+corepack prepare
 yarn install
 
 # Build Mastodon
-export RAILS_ENV=development 
+export RAILS_ENV=development
 export $(cat ".env.vagrant" | xargs)
 bundle exec rails db:setup
 

config/webpack/production.js

@@ -4,7 +4,7 @@ const { createHash } = require('crypto');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
 
-const CompressionPlugin = require('@renchap/compression-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { merge } = require('webpack-merge');

jest.config.js

@@ -16,6 +16,8 @@ const config = {
     '!app/javascript/mastodon/service_worker/entry.js',
     '!app/javascript/mastodon/test_setup.js',
   ],
+  // Those packages are ESM, so we need them to be processed by Babel
+  transformIgnorePatterns: ['/node_modules/(?!(redent|strip-indent)/)'],
   coverageDirectory: '<rootDir>/coverage',
   moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/app/javascript'],
   moduleNameMapper: {

lib/tasks/webpacker.rake

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# Disable this task as we use pnpm
+
+require 'semantic_range'
+
+Rake::Task['webpacker:check_yarn'].clear
+
+namespace :webpacker do
+  desc 'Verifies if Yarn is installed'
+  task check_yarn: :environment do
+    begin
+      yarn_version = `yarn --version`.strip
+      raise Errno::ENOENT if yarn_version.blank?
+
+      yarn_range = '>=4 <5'
+      is_valid = begin
+        SemanticRange.satisfies?(yarn_version, yarn_range)
+      rescue
+        false
+      end
+
+      unless is_valid
+        warn "Mastodon and Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
+        warn 'Exiting!'
+        exit!
+      end
+    rescue Errno::ENOENT
+      warn 'Yarn not installed. Please see the Mastodon documentation to install the correct version.'
+      warn 'Exiting!'
+      exit!
+    end
+  end
+end

package.json

@@ -2,8 +2,11 @@
   "name": "@mastodon/mastodon",
   "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
+  "workspaces": [
+    "."
+  ],
   "scripts": {
     "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpack",
     "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack",
@@ -47,7 +50,6 @@
     "@material-symbols/svg-600": "^0.13.1",
     "@rails/ujs": "^7.1.1",
     "@reduxjs/toolkit": "^1.9.5",
-    "@renchap/compression-webpack-plugin": "^6.1.4",
     "@svgr/webpack": "^5.5.0",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.4.0",
@@ -55,7 +57,7 @@
     "axios": "^1.4.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-formatjs": "^10.5.1",
-    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-lodash": "patch:babel-plugin-lodash@npm%3A3.3.4#~/.yarn/patches/babel-plugin-lodash-npm-3.3.4-c7161075b6.patch",
     "babel-plugin-preval": "^5.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "blurhash": "^2.0.5",
@@ -63,6 +65,7 @@
     "classnames": "^2.3.2",
     "cocoon-js-vanilla": "^1.3.0",
     "color-blend": "^4.0.0",
+    "compression-webpack-plugin": "patch:compression-webpack-plugin@npm%3A6.1.1#~/.yarn/patches/compression-webpack-plugin-npm-6.1.1-3a2a65987e.patch",
     "core-js": "^3.30.2",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
@@ -215,10 +218,20 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "@types/react": "^18.0.26",
     "kind-of": "^6.0.3",
     "webpack/terser-webpack-plugin": "^4.2.3"
   },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
   "optionalDependencies": {
     "bufferutil": "^4.0.7",
     "utf-8-validate": "^6.0.3"
@@ -228,5 +241,6 @@
     "Capfile|Gemfile|*.{rb,ruby,ru,rake}": "bundle exec rubocop --force-exclusion -a",
     "*.{js,jsx,ts,tsx}": "eslint --fix",
     "*.{css,scss}": "stylelint --fix"
-  }
+  },
+  "packageManager": "yarn@4.0.1"
 }