chore: upgrade react and next

apps/web/custom.d.ts

@@ -1,4 +1,9 @@
-import { FC, SVGAttributes } from 'react'
+import {
+  type FC,
+  type SVGAttributes,
+  type DetailedHTMLProps,
+  type HTMLAttributes,
+} from 'react'
 
 declare module '*.svg' {
   const content: FC<SVGAttributes<SVGElement>>

apps/web/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/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/web/package.json

@@ -15,7 +15,7 @@
     "check:tailwind": "node ./scripts/check-tailwind.js",
     "codegen": "graphql-codegen",
     "codegen-production": "cross-env PRODUCTION=true graphql-codegen",
-    "dev": "next",
+    "dev": "next dev",
     "format": "npm-run-all --continue-on-error \"format:*\"",
     "format:eslint": "yarn _eslint --fix",
     "format:prettier": "yarn _prettier --write",
@@ -27,7 +27,9 @@
     "start": "next start"
   },
   "resolutions": {
-    "@serlo/katex-styles": "1.0.1"
+    "@serlo/katex-styles": "1.0.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2"
   },
   "dependencies": {
     "@cortex-js/compute-engine": "^0.22.0",
@@ -38,7 +40,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@hello-pangea/dnd": "^17.0.0",
     "@lumieducation/h5p-react": "^9.3.2",
-    "@next/third-parties": "latest",
+    "@next/third-parties": "15.3.1",
     "@ory/client": "^1.15.10",
     "@ory/integrations": "1.1.5",
     "@radix-ui/react-dialog": "^1.1.2",
@@ -54,7 +56,7 @@
     "clsx": "^2.1.1",
     "fast-xml-parser": "^4.5.0",
     "fp-ts": "^2.16.9",
-    "graphiql": "^3.7.2",
+    "graphiql": "^3.8.3",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
     "iframe-resizer": "^4.4.5",
@@ -65,15 +67,15 @@
     "katex": "^0.16.21",
     "mathjs": "^13.2.2",
     "mathlive": "^0.104.0",
-    "next": "^14.2.26",
+    "next": "15.3.1",
     "next-query-params": "^5.0.1",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.49",
     "qrcode.react": "^4.1.0",
     "ramda": "^0.30.1",
-    "react": "^18.2.0",
+    "react": "19.1.0",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.1.0",
     "react-hot-toast": "^2.4.1",
     "react-lazyload": "^3.2.1",
     "react-textarea-autosize": "^8.5.5",
@@ -87,13 +89,13 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.23.0",
-    "@graphiql/toolkit": "^0.11.0",
+    "@graphiql/toolkit": "^0.11.1",
     "@graphql-codegen/add": "^5.0.3",
     "@graphql-codegen/cli": "5.0.3",
     "@graphql-codegen/introspection": "4.0.3",
     "@graphql-codegen/typescript": "4.1.1",
     "@graphql-codegen/typescript-operations": "4.3.1",
-    "@next/bundle-analyzer": "^15.0.3",
+    "@next/bundle-analyzer": "15.3.1",
     "@serlo/eslint-config": "workspace:*",
     "@serlo/typescript-config": "workspace:*",
     "@svgr/webpack": "^8.1.0",
@@ -107,15 +109,15 @@
     "@types/nprogress": "^0.2.3",
     "@types/qrcode.react": "^1.0.5",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "@types/react-lazyload": "^3.2.3",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
     "eslint": "^9.23.0",
-    "eslint-config-next": "^15.2.4",
+    "eslint-config-next": "15.3.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.9.1",
     "eslint-plugin-import": "^2.31.0",
@@ -147,6 +149,9 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   },
+  "overrides": {
+    "@headlessui/react": "2.2.0"
+  },
   "postcss": {
     "plugins": {
       "postcss-import": {},

apps/web/src/components/author/revision/revision-header.tsx

@@ -1,5 +1,5 @@
 import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'
-import type { Dispatch, SetStateAction } from 'react'
+import type { Dispatch, SetStateAction, JSX } from 'react'
 
 import type { DisplayModes } from './display-modes'
 import { RevisionModeSwitcher } from './revision-mode-switcher'

apps/web/src/components/author/uuid-url-input.tsx

@@ -1,5 +1,5 @@
 import { gql } from 'graphql-request'
-import { useState } from 'react'
+import { useState, type JSX } from 'react'
 
 import { FaIcon } from '../fa-icon'
 import { useGraphqlSwr } from '@/api/use-graphql-swr'

apps/web/src/components/comments/dropdown-menu.tsx

@@ -5,6 +5,7 @@ import {
   faPencil,
 } from '@fortawesome/free-solid-svg-icons'
 import { Thread } from '@serlo/authorization'
+import type { JSX } from 'react'
 
 import { FaIcon } from '../fa-icon'
 import { useCanDo } from '@/auth/use-can-do'

apps/web/src/components/content/donations-banner-experiment/donations-banner.tsx

@@ -210,91 +210,93 @@ export function DonationsBanner({ id, entityData }: DonationsBannerProps) {
 
   return (
     <Lazy slim>
-      <aside
-        ref={bannerRef}
-        className={cn(`
+      <>
+        <aside
+          ref={bannerRef}
+          className={cn(`
             relative w-[100vw] overflow-x-hidden bg-[url("/_assets/img/landing/about-container.svg")] bg-[length:100vw_100%] bg-bottom bg-no-repeat 
             px-side py-6 text-center
             text-xl sm:-mx-2 sm:flex sm:max-w-[100vw] sm:justify-between
             sm:px-0 sm:text-left lg:my-16 lg:py-10 lg:text-2xl
           `)}
-      >
-        {renderHideButton()}
-        <figure className="mx-auto mt-6 max-w-[22rem] text-center sm:mr-0 sm:max-w-[15rem]">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={banner.imageSrc}
-            onLoad={() => {
-              const observer = new IntersectionObserver(
-                (entries, _observer) => {
-                  const entry = entries[0]
-                  if (
-                    entry.isIntersecting &&
-                    globalThis.hack__lastId !== globalThis.hack__id
-                  ) {
-                    globalThis.hack__lastId = globalThis.hack__id
-                    submitEvent(`spenden-seen-${banner.id}`)
+        >
+          {renderHideButton()}
+          <figure className="mx-auto mt-6 max-w-[22rem] text-center sm:mr-0 sm:max-w-[15rem]">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={banner.imageSrc}
+              onLoad={() => {
+                const observer = new IntersectionObserver(
+                  (entries, _observer) => {
+                    const entry = entries[0]
+                    if (
+                      entry.isIntersecting &&
+                      globalThis.hack__lastId !== globalThis.hack__id
+                    ) {
+                      globalThis.hack__lastId = globalThis.hack__id
+                      submitEvent(`spenden-seen-${banner.id}`)
+                    }
                   }
-                }
-              )
-              if (bannerRef.current) observer.observe(bannerRef.current)
-            }}
-            className={cn(
-              'mx-auto mb-3',
-              isTestimonial
-                ? 'max-w-[12rem] rounded-full sm:mt-2 sm:p-3'
-                : 'scale-x-[-1] px-16 sm:px-3'
-            )}
-          />
-          {isTestimonial ? (
-            <>
-              <p className="mt-1 text-base font-bold text-gray-700">
-                @{banner.username}
-              </p>
-              {renderRoles(banner.roles)}
-            </>
-          ) : null}
-        </figure>
-        <div className="mx-auto max-w-2xl px-side sm:ml-0 sm:mt-5">
-          <p className="mx-side my-5 font-handwritten text-[1.32em] text-brand">
-            {banner.call}
-          </p>
-          <div className="text-center sm:text-left">{banner.text}</div>
-
-          <p className="mx-auto mb-6 block sm:mb-10 sm:ml-side lg:mb-24">
-            <button
-              className="serlo-button-green"
-              onClick={() => {
-                submitEvent(`spenden-clicked-${banner.id}`)
-                void router.push('/spenden')
+                )
+                if (bannerRef.current) observer.observe(bannerRef.current)
               }}
-            >
-              {banner.buttonText ? banner.buttonText : 'Jetzt spenden'}{' '}
-            </button>
-          </p>
-        </div>
-      </aside>
-      <style jsx>{`
-        aside {
-          left: calc(-50vw + 50%);
-        }
-        @media (min-width: 800px) {
-          aside {
-            left: -51px;
-          }
-        }
-        @media (min-width: 1024px) {
+              className={cn(
+                'mx-auto mb-3',
+                isTestimonial
+                  ? 'max-w-[12rem] rounded-full sm:mt-2 sm:p-3'
+                  : 'scale-x-[-1] px-16 sm:px-3'
+              )}
+            />
+            {isTestimonial ? (
+              <>
+                <p className="mt-1 text-base font-bold text-gray-700">
+                  @{banner.username}
+                </p>
+                {renderRoles(banner.roles)}
+              </>
+            ) : null}
+          </figure>
+          <div className="mx-auto max-w-2xl px-side sm:ml-0 sm:mt-5">
+            <p className="mx-side my-5 font-handwritten text-[1.32em] text-brand">
+              {banner.call}
+            </p>
+            <div className="text-center sm:text-left">{banner.text}</div>
+
+            <p className="mx-auto mb-6 block sm:mb-10 sm:ml-side lg:mb-24">
+              <button
+                className="serlo-button-green"
+                onClick={() => {
+                  submitEvent(`spenden-clicked-${banner.id}`)
+                  void router.push('/spenden')
+                }}
+              >
+                {banner.buttonText ? banner.buttonText : 'Jetzt spenden'}{' '}
+              </button>
+            </p>
+          </div>
+        </aside>
+        <style jsx>{`
           aside {
             left: calc(-50vw + 50%);
           }
-        }
-        @media (min-width: 1216px) {
-          button {
-            /*zoom: 1.15;*/
-            position: absolute;
+          @media (min-width: 800px) {
+            aside {
+              left: -51px;
+            }
+          }
+          @media (min-width: 1024px) {
+            aside {
+              left: calc(-50vw + 50%);
+            }
+          }
+          @media (min-width: 1216px) {
+            button {
+              /*zoom: 1.15;*/
+              position: absolute;
+            }
           }
-        }
-      `}</style>
+        `}</style>
+      </>
     </Lazy>
   )
 

apps/web/src/components/content/lazy.tsx

@@ -1,12 +1,12 @@
 import { useRouter } from 'next/router'
-import { ReactNode } from 'react'
+import type { JSX } from 'react'
 import LazyLoad from 'react-lazyload'
 
 import { isPrintMode } from '../print-mode'
 import { cn } from '@/helper/cn'
 
 export interface LazyProps {
-  children: ReactNode
+  children: JSX.Element
   slim?: boolean
   noPrint?: boolean
 }

apps/web/src/components/content/light-box.tsx

@@ -1,5 +1,5 @@
 import * as Dialog from '@radix-ui/react-dialog'
-import { ReactNode } from 'react'
+import { ReactNode, type JSX } from 'react'
 
 import { ProxyImage } from '../landing/subjects/proxy-image'
 import { defaultModalOverlayStyles } from '../modal-with-close-button'

apps/web/src/components/content/page-title.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, type JSX } from 'react'
 
 import { cn } from '@/helper/cn'
 

apps/web/src/components/content/privacy-wrapper.tsx

@@ -1,6 +1,6 @@
 import { faHeart } from '@fortawesome/free-solid-svg-icons'
 import Image from 'next/image'
-import { useState, KeyboardEvent, useEffect } from 'react'
+import { useState, KeyboardEvent, useEffect, type JSX } from 'react'
 
 import { FaIcon } from '../fa-icon'
 import { useInstanceData } from '@/contexts/instance-context'

apps/web/src/components/entity/entity.tsx

@@ -11,6 +11,7 @@ import {
   faTrash,
 } from '@fortawesome/free-solid-svg-icons'
 import dynamic from 'next/dynamic'
+import type { JSX } from 'react'
 
 import { HSpace } from '../content/h-space'
 import { Link } from '../content/link'

apps/web/src/components/equations-app/math-field-2.tsx

@@ -8,6 +8,18 @@ interface MathFieldProps {
   onEnter?: () => void
 }
 
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'math-field': React.DetailedHTMLProps<
+        React.HTMLAttributes<MathfieldElement>,
+        MathfieldElement
+      >
+    }
+  }
+}
+
 export function MathField2(props: MathFieldProps) {
   const [value, setValue] = useState(props.value ?? '')
 
@@ -71,8 +83,8 @@ export function MathField2(props: MathFieldProps) {
       id="math-input-field"
       style={{ display: 'block' }}
       ref={mf}
-      onInput={(evt) => {
-        const v = (evt.target as MathfieldElement).value
+      onInput={(e) => {
+        const v = (e.target as MathfieldElement).value
         setValue(v)
         if (props.onChange) {
           props.onChange(v)

apps/web/src/components/equations-app/readonly-math-field.tsx

@@ -8,7 +8,7 @@ interface MathFieldProps {
   lazy?: boolean
 }
 
-declare global {
+declare module 'react' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {

apps/web/src/components/frontend-client-base/conditional-wrap.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 // from https://gist.github.com/kitze/23d82bb9eb0baabfd03a6a720b1d637f
 
 export interface ConditionalWrapProps {