Use bundler module resolution in TSConfig

dotcom-rendering/package.json

@@ -52,8 +52,8 @@
 		"@guardian/ophan-tracker-js": "2.1.1",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source-foundations": "14.2.2",
-		"@guardian/source-react-components": "22.1.0",
-		"@guardian/source-react-components-development-kitchen": "19.0.0",
+		"@guardian/source-react-components": "23.0.1",
+		"@guardian/source-react-components-development-kitchen": "20.0.1",
 		"@guardian/support-dotcom-components": "2.1.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.40.1",

dotcom-rendering/src/components/FollowButtons.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import { space, textSans15 } from '@guardian/source-foundations';
 import {
 	SvgCheckmark,
@@ -11,8 +11,8 @@ import { palette } from '../palette';
 
 type IconProps = {
 	isFollowing?: boolean;
-	iconIsFollowing: EmotionJSX.Element;
-	iconIsNotFollowing: EmotionJSX.Element;
+	iconIsFollowing: JSX.Element;
+	iconIsNotFollowing: JSX.Element;
 };
 
 const FollowIcon = ({

dotcom-rendering/src/components/marketing/lib/ReactComponent.tsx

@@ -3,7 +3,7 @@
  * This file was migrated from:
  * https://github.com/guardian/support-dotcom-components/blob/9c3eae7cb0b159db4a1c40679d6b37710b0bb937/packages/modules/src/types.ts#L12
  */
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import type { JSX } from '@emotion/react/jsx-runtime';
 
 // This type can be used in place of React.FC<T> which was previously widespread
 // in this codebase but is no longer recommended. In many cases it's possible to
@@ -17,4 +17,4 @@ import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 
 export type ReactComponent<GenericProps = Record<string, never>> = (
 	props: GenericProps,
-) => EmotionJSX.Element;
+) => JSX.Element;

dotcom-rendering/src/components/marketing/shared/ModuleWrapper.tsx

@@ -3,12 +3,10 @@
  * This file was migrated from:
  * https://github.com/guardian/support-dotcom-components/blob/a482b35a25ca59f66501c4de02de817046206298/packages/modules/src/modules/shared/ModuleWrapper.tsx
  */
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import type { JSX } from '@emotion/react/jsx-runtime';
 import type { ReactComponent } from '../lib/ReactComponent';
 
-export function withParsedProps<
-	ModuleProps extends EmotionJSX.IntrinsicAttributes,
->(
+export function withParsedProps<ModuleProps extends JSX.IntrinsicAttributes>(
 	Module: ReactComponent<ModuleProps>,
 	validate: (props: unknown) => props is ModuleProps,
 ): ReactComponent<unknown> {

dotcom-rendering/tsconfig.json

@@ -7,6 +7,7 @@
 		"jsx": "react-jsx",
 		"jsxImportSource": "@emotion/react",
 		"lib": ["esnext", "es2015", "dom"],
+		"moduleResolution": "bundler",
 		"noEmit": true,
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedIndexedAccess": true,

dotcom-rendering/webpack/webpack.config.dev-server.js

@@ -77,7 +77,6 @@ module.exports = {
 			// webpack-hot-server-middleware needs to run after webpack-dev-middleware
 			middlewares.push({
 				name: 'server',
-				// @ts-expect-error -- it’s a MultiCompiler
 				middleware: webpackHotServerMiddleware(devServer.compiler, {
 					chunkName: 'server',
 				}),

dotcom-rendering/webpack/webpack.config.js

@@ -71,7 +71,6 @@ const commonConfigs = ({ platform }) => ({
 		...(DEV
 			? // DEV plugins
 			  [
-					// @ts-expect-error -- somehow the type declaration isn’t playing nice
 					new WebpackMessages({
 						name: platform,
 					}),

package.json

@@ -30,5 +30,10 @@
 		"prettier": "3.0.3",
 		"tslib": "2.6.2"
 	},
-	"packageManager": "pnpm@8.15.7"
+	"packageManager": "pnpm@8.15.7",
+	"pnpm": {
+		"patchedDependencies": {
+			"@guardian/support-dotcom-components@2.1.1": "patches/@guardian__support-dotcom-components@2.1.1.patch"
+		}
+	}
 }

patches/@guardian__support-dotcom-components@2.1.1.patch

@@ -0,0 +1,58 @@
+diff --git a/dist/shared/src/types/props/banner.d.ts b/dist/shared/src/types/props/banner.d.ts
+index d2f4dc973a9639b837eae8d79746f841006247d0..b1fdb7d3ac81c8cf98efe56e7f78080874357abc 100644
+--- a/dist/shared/src/types/props/banner.d.ts
++++ b/dist/shared/src/types/props/banner.d.ts
+@@ -1,4 +1,5 @@
+-import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
++
++
+ import { Cta, SecondaryCta, TickerSettings, Tracking } from './shared';
+ import { OphanComponentEvent } from '../ophan';
+ import * as z from 'zod';
+@@ -102,7 +103,7 @@ export declare const bannerContentSchema: z.ZodObject<{
+         type: import("./shared").SecondaryCtaType.ContributionsReminder;
+     } | undefined;
+ }>;
+-export interface BannerProps extends EmotionJSX.IntrinsicAttributes {
++export interface BannerProps extends JSX.IntrinsicAttributes {
+     tracking: Tracking;
+     bannerChannel: BannerChannel;
+     content?: BannerContent;
+diff --git a/dist/shared/src/types/props/epic.d.ts b/dist/shared/src/types/props/epic.d.ts
+index cbf676de646eed52b884ea891688d6d509bcee82..b2e4698a2567c6041c0a189dfd80d35486f6b407 100644
+--- a/dist/shared/src/types/props/epic.d.ts
++++ b/dist/shared/src/types/props/epic.d.ts
+@@ -1,4 +1,4 @@
+-import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
++import type { JSX } from '@emotion/react/jsx-runtime';
+ import * as z from 'zod';
+ import { Stage, Tracking } from './shared';
+ import { OphanComponentEvent } from '../ophan';
+@@ -7,7 +7,7 @@ export type ArticleCountType = 'for52Weeks' | 'forTargetedWeeks';
+ export type ArticleCounts = {
+     [type in ArticleCountType]: number;
+ };
+-export interface EpicProps extends EmotionJSX.IntrinsicAttributes {
++export interface EpicProps extends JSX.IntrinsicAttributes {
+     variant: EpicVariant;
+     tracking: Tracking;
+     countryCode?: string;
+diff --git a/dist/shared/src/types/props/header.d.ts b/dist/shared/src/types/props/header.d.ts
+index cdb021c85d8b68a867e3bda690cc15174fba7e66..9532cff79854993d0b2e406eb16aa85da2b15ce5 100644
+--- a/dist/shared/src/types/props/header.d.ts
++++ b/dist/shared/src/types/props/header.d.ts
+@@ -1,4 +1,4 @@
+-import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
++import { JSX } from '@emotion/react/jsx-runtime';
+ import * as z from 'zod';
+ import { OphanComponentEvent } from '../ophan';
+ import { Tracking, Cta } from './shared';
+@@ -58,7 +58,7 @@ export declare const headerContentSchema: z.ZodObject<{
+     } | undefined;
+     benefits?: string[] | undefined;
+ }>;
+-export interface HeaderProps extends EmotionJSX.IntrinsicAttributes {
++export interface HeaderProps extends JSX.IntrinsicAttributes {
+     content: HeaderContent;
+     tracking: Tracking;
+     mobileContent?: HeaderContent;