feat: react 19 ftw

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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -33,36 +33,38 @@
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "^13.4.1",
+    "next": "15.0.4",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "^0.0.0-experimental-16d053d59-20230506",
+    "react": "19.0.0",
     "react-collapsed": "4.0.4",
-    "react-dom": "^0.0.0-experimental-16d053d59-20230506",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1"
+    "react-dom": "19.0.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-unwrap-images": "^1.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
-    "@mdx-js/mdx": "^2.1.3",
+    "@babel/preset-react": "^7.26.3",
+    "@mdx-js/mdx": "^3.1.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/debounce": "^1.2.1",
     "@types/github-slugger": "^1.3.0",
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "eslint": "7.x",
-    "eslint-config-next": "12.0.3",
+    "eslint-config-next": "15.0.4",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",
@@ -84,12 +86,12 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.5.1",
     "reading-time": "^1.2.0",
-    "remark": "^12.0.1",
-    "remark-external-links": "^7.0.0",
-    "remark-html": "^12.0.0",
-    "remark-images": "^2.0.0",
-    "remark-slug": "^7.0.0",
-    "remark-unwrap-images": "^2.0.0",
+    "remark": "^15.0.1",
+    "remark-external-links": "^10.0.0",
+    "remark-html": "^16.0.1",
+    "remark-images": "^4.1.0",
+    "remark-slug": "^8.0.0",
+    "remark-unwrap-images": "^5.0.0",
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
@@ -109,5 +111,9 @@
   "lint-staged": {
     "*.{js,ts,jsx,tsx,css}": "yarn prettier",
     "src/**/*.md": "yarn fix-headings"
+  },
+  "resolutions": {
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0"
   }
 }

plugins/markdownToHtml.js

@@ -1,10 +1,10 @@
-const remark = require('remark');
-const externalLinks = require('remark-external-links'); // Add _target and rel to external links
-const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
-const images = require('remark-images'); // Improved image syntax
-const unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images
-const smartyPants = require('./remark-smartypants'); // Cleans up typography
-const html = require('remark-html');
+const remark = import('remark');
+const externalLinks = import('rehype-external-links'); // Add _target and rel to external links
+const customHeaders = import('./remark-header-custom-ids'); // Custom header id's for i18n
+const images = import('remark-images'); // Improved image syntax
+const unrwapImages = import('rehype-unwrap-images'); // Removes <p> wrapper around images
+const smartyPants = import('./remark-smartypants'); // Cleans up typography
+const html = import('remark-html');
 
 module.exports = {
   remarkPlugins: [

src/components/MDX/InlineCode.tsx

@@ -3,6 +3,7 @@
  */
 
 import cn from 'classnames';
+import {JSX} from 'react';
 
 interface InlineCodeProps {
   isLink?: boolean;

src/components/MDX/MDXComponents.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {Children, useContext, useMemo} from 'react';
+import {Children, JSX, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 

src/pages/[[...markdownPath]].js

@@ -89,12 +89,15 @@ function reviveNodeOnClient(key, val) {
       type = Fragment;
     }
     return {
-      $$typeof: Symbol.for('react.element'),
+      $$typeof: Symbol.for('react.transitional.element'),
       type: type,
       key: key,
       ref: null,
       props: props,
       _owner: null,
+      _store: {
+        validate: false,
+      },
     };
   } else {
     return val;

src/pages/errors/[errorCode].tsx

@@ -71,7 +71,7 @@ function reviveNodeOnClient(key: unknown, val: any) {
       type = Fragment;
     }
     return {
-      $$typeof: Symbol.for('react.element'),
+      $$typeof: Symbol.for('react.transitional.element'),
       type: type,
       key: key,
       ref: null,

src/utils/compileMDX.ts

@@ -3,7 +3,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 9;
+const DISK_CACHE_BREAKER = 11;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 export default async function compileMDX(
@@ -36,13 +36,13 @@ export default async function compileMDX(
       lockfile: fs.readFileSync(process.cwd() + '/yarn.lock', 'utf8'),
     })
   );
-  const cached = await store.get(hash);
-  if (cached) {
-    console.log(
-      'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
-    );
-    return cached;
-  }
+  // const cached = await store.get(hash);
+  // if (cached) {
+  //   console.log(
+  //     'Reading compiled MDX for /' + path + ' from ./node_modules/.cache/'
+  //   );
+  //   return cached;
+  // }
   if (process.env.NODE_ENV === 'production') {
     console.log(
       'Cache miss for MDX for /' + path + ' from ./node_modules/.cache/'
@@ -60,13 +60,15 @@ export default async function compileMDX(
       .join('\n');
 
   // Turn the MDX we just read into some JS we can execute.
-  const {remarkPlugins} = require('../../plugins/markdownToHtml');
+  // const {remarkPlugins} = require('../../plugins/markdownToHtml');
   const {compile: compileMdx} = await import('@mdx-js/mdx');
   const visit = (await import('unist-util-visit')).default;
   const jsxCode = await compileMdx(mdxWithFakeImports, {
     remarkPlugins: [
-      ...remarkPlugins,
-      (await import('remark-gfm')).default,
+      // ...remarkPlugins,
+      (
+        await import('remark-gfm')
+      ).default,
       (await import('remark-frontmatter')).default,
     ],
     rehypePlugins: [
@@ -144,7 +146,10 @@ export default async function compileMDX(
 
   // Serialize a server React tree node to JSON.
   function stringifyNodeOnServer(key: unknown, val: any) {
-    if (val != null && val.$$typeof === Symbol.for('react.element')) {
+    if (
+      val != null &&
+      val.$$typeof === Symbol.for('react.transitional.element')
+    ) {
       // Remove fake MDX props.
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const {mdxType, originalType, parentName, ...cleanProps} = val.props;