Revert "Upgrade to React 19, Next 15.1 and enable React Compiler (#6996)"

This reverts commit 855ce23.

Author: lumirlumir

.eslintrc

@@ -6,8 +6,7 @@
   "rules": {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
-    "react-hooks/exhaustive-deps": "error",
-    "react/no-unknown-property": ["error", { "ignore": ["meta"] }]
+    "react-hooks/exhaustive-deps": "error"
   },
   "env": {
     "node": true,

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -9,8 +9,10 @@ const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   reactStrictMode: true,
   experimental: {
+    // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
+    appDir: false,
     scrollRestoration: true,
-    reactCompiler: true,
+    legacyBrowsers: false,
   },
   env: {},
   webpack: (config, {dev, isServer, ...options}) => {

package.json

@@ -17,7 +17,7 @@
     "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss lint-editorconfig",
     "tsc": "tsc --noEmit",
     "start": "next start",
-    "postinstall": "is-ci || husky install .husky",
+    "postinstall": "patch-package && (is-ci || husky install .husky)",
     "check-all": "npm-run-all prettier lint:fix tsc rss",
     "rss": "node scripts/generateRss.js",
     "cache-reset": "rm -rf node_modules/.cache && rm -rf .next && yarn cache clean",
@@ -32,18 +32,17 @@
     "@docsearch/react": "^3.6.1",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "babel-plugin-react-compiler": "0.0.0-experimental-696af53-20240625",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "15.1.0",
+    "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "^19.0.0",
+    "react": "^0.0.0-experimental-16d053d59-20230506",
     "react-collapsed": "4.0.4",
-    "react-dom": "^19.0.0",
+    "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
   },
@@ -59,8 +58,8 @@
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "asyncro": "^3.0.0",
@@ -85,6 +84,7 @@
     "metro-cache": "0.72.2",
     "mocha": "^10.6.0",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^6.2.2",
     "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-preset-env": "^6.7.0",

patches/next+13.4.1.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
+index a1f8648..1b3d608 100644
+--- a/node_modules/next/dist/server/render.js
++++ b/node_modules/next/dist/server/render.js
+@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) {
+         // Always using react concurrent rendering mode with required react version 18.x
+         const renderShell = async (EnhancedApp, EnhancedComponent)=>{
+             const content = renderContent(EnhancedApp, EnhancedComponent);
+-            return await (0, _nodewebstreamshelper.renderToInitialStream)({
+-                ReactDOMServer: _serverbrowser.default,
+-                element: content
++            return new Promise((resolve, reject) => {
++                (0, _nodewebstreamshelper.renderToInitialStream)({
++                    ReactDOMServer: _serverbrowser.default,
++                    element: content,
++                    streamOptions: {
++                        onError: reject
++                    }
++                }).then(resolve, reject);
+             });
+         };
+         const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{

patches/next-remote-watch+1.0.0.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch
+index c055b66..a2f749c 100755
+--- a/node_modules/next-remote-watch/bin/next-remote-watch
++++ b/node_modules/next-remote-watch/bin/next-remote-watch
+@@ -66,7 +66,10 @@ app.prepare().then(() => {
+             }
+           }
+ 
+-          app.server.hotReloader.send('reloadPage')
++          app.server.hotReloader.send({
++            event: 'serverOnlyChanges',
++            pages: ['/[[...markdownPath]]']
++          });
+         }
+       )
+   }

src/components/ExternalLink.tsx

@@ -1,17 +1,13 @@
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
-import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react';
 
 export function ExternalLink({
   href,
   target,
   children,
   ...props
-}: DetailedHTMLProps<
-  AnchorHTMLAttributes<HTMLAnchorElement>,
-  HTMLAnchorElement
->) {
+}: JSX.IntrinsicElements['a']) {
   return (
     <a href={href} target={target ?? '_blank'} rel="noopener" {...props}>
       {children}

src/components/Icon/IconArrow.tsx

@@ -4,10 +4,9 @@
 
 import {memo} from 'react';
 import cn from 'classnames';
-import type {SVGProps} from 'react';
 
 export const IconArrow = memo<
-  SVGProps<SVGSVGElement> & {
+  JSX.IntrinsicElements['svg'] & {
     /**
      * The direction the arrow should point.
      * `start` and `end` are relative to the current locale.

src/components/Icon/IconArrowSmall.tsx

@@ -4,10 +4,9 @@
 
 import {memo} from 'react';
 import cn from 'classnames';
-import type {SVGProps} from 'react';
 
 export const IconArrowSmall = memo<
-  SVGProps<SVGSVGElement> & {
+  JSX.IntrinsicElements['svg'] & {
     /**
      * The direction the arrow should point.
      * `start` and `end` are relative to the current locale.

src/components/Icon/IconBsky.tsx

@@ -3,9 +3,10 @@
  */
 
 import {memo} from 'react';
-import type {SVGProps} from 'react';
 
-export const IconBsky = memo<SVGProps<SVGSVGElement>>(function IconBsky(props) {
+export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
+  props
+) {
   return (
     <svg
       aria-label="Bluesky"