Update e2e tests to Next 16 (webpack)

.changeset/cold-rivers-bathe.md

@@ -0,0 +1,5 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+Update e2e tests to Next 16 (webpack)

examples/bugs/gh-219/package.json

@@ -40,7 +40,7 @@
 		"zod": "^3.24.1"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20241224.0",
+		"@cloudflare/workers-types": "catalog:",
 		"@eslint/eslintrc": "^3",
 		"@opennextjs/cloudflare": "workspace:*",
 		"@playwright/test": "catalog:",

examples/bugs/gh-223/package.json

@@ -21,7 +21,7 @@
 		"react-dom": "^19.0.0"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20241224.0",
+		"@cloudflare/workers-types": "catalog:",
 		"@opennextjs/cloudflare": "workspace:*",
 		"@playwright/test": "catalog:",
 		"@types/node": "^22.10.2",

examples/create-next-app/tsconfig.json

@@ -19,7 +19,8 @@
 		],
 		"paths": {
 			"@/*": ["./src/*"]
-		}
+		},
+		"target": "ES2017"
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules", "open-next.config.ts"]

examples/e2e/app-pages-router/app/parallel/layout.tsx

@@ -9,29 +9,13 @@ export default function Layout({ a, b, children }: { children: ReactNode; a: Rea
 
 	return (
 		<div>
-			<div className="flex flex-col mb-10">
-				<label htmlFor="a">
-					Enable A
-					<input
-						name="a"
-						type="checkbox"
-						checked={routeA}
-						onChange={(e) => {
-							setRouteA(e.target.checked);
-						}}
-					/>
-				</label>
-				<label htmlFor="b">
-					Enable B
-					<input
-						name="b"
-						type="checkbox"
-						checked={routeB}
-						onChange={(e) => {
-							setRouteB(e.target.checked);
-						}}
-					/>
-				</label>
+			<div className="flex flex-col items-start mb-10">
+				<button onClick={() => setRouteA(!routeA)} data-testid="enable-a">
+					{routeA ? "Disable A" : "Enable A"}
+				</button>
+				<button onClick={() => setRouteB(!routeB)} data-testid="enable-b">
+					{routeB ? "Disable B" : "Enable B"}
+				</button>
 			</div>
 
 			{routeA && a}

examples/e2e/app-pages-router/e2e/parallel.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("Parallel routes", async ({ page }) => {
 	await page.goto("/");
-	await page.locator('[href="/parallel"]').click();
+	await page.getByRole("link", { name: "Parallel" }).click();
 
 	await page.waitForURL("/parallel");
 
@@ -13,13 +13,13 @@ test("Parallel routes", async ({ page }) => {
 	await expect(routeB).not.toBeVisible();
 
 	// Enable A, which should be visible but not B
-	await page.locator('input[name="a"]').check();
+	await page.getByTestId("enable-a").click();
 	routeA = page.getByText("Parallel Route A");
 	await expect(routeA).toBeVisible();
 	await expect(routeB).not.toBeVisible();
 
 	// Enable B, both should be visible
-	await page.locator('input[name="b"]').check();
+	await page.getByTestId("enable-b").click();
 	routeB = page.getByText("Parallel Route B");
 	await expect(routeA).toBeVisible();
 	await expect(routeB).toBeVisible();

examples/e2e/app-pages-router/next.config.ts

@@ -3,15 +3,10 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
 	poweredByHeader: false,
 	cleanDistDir: true,
-	transpilePackages: ["@example/shared"],
 	output: "standalone",
-	// outputFileTracingRoot: "../sst",
 	typescript: {
 		ignoreBuildErrors: true,
 	},
-	eslint: {
-		ignoreDuringBuilds: true,
-	},
 	trailingSlash: true,
 	skipTrailingSlashRedirect: true,
 };

examples/e2e/app-pages-router/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
 		"dev": "next dev --turbopack --port 3003",
-		"build": "next build",
+		"build": "next build --webpack",
 		"start": "next start --port 3003",
 		"lint": "next lint",
 		"clean": "rm -rf .turbo node_modules .next .open-next",

examples/e2e/app-pages-router/tsconfig.json

@@ -12,7 +12,7 @@
 		"moduleResolution": "NodeNext",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"plugins": [
 			{
@@ -24,6 +24,13 @@
 			"@example/shared": ["../shared"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../utils.ts"],
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		"../utils.ts",
+		".next/dev/types/**/*.ts"
+	],
 	"exclude": ["node_modules", "open-next.config.ts"]
 }

examples/e2e/app-router/app/api/after/revalidate/route.ts

@@ -6,7 +6,10 @@ export function POST() {
 		() =>
 			new Promise<void>((resolve) =>
 				setTimeout(() => {
-					revalidateTag("date");
+					revalidateTag("date", {
+						// We want to expire the "date" tag immediately
+						expire: 0,
+					});
 					resolve();
 				}, 5000)
 			)

examples/e2e/app-router/app/api/after/ssg/route.ts

@@ -4,7 +4,7 @@ import { NextResponse } from "next/server";
 export const dynamic = "force-static";
 
 export async function GET() {
-	const dateFn = unstable_cache(() => new Date().toISOString(), ["date"], {
+	const dateFn = unstable_cache(async () => new Date().toISOString(), ["date"], {
 		tags: ["date"],
 	});
 	const date = await dateFn();

examples/e2e/app-router/app/api/revalidate-tag/route.ts

@@ -3,7 +3,7 @@ import { revalidateTag } from "next/cache";
 export const dynamic = "force-dynamic";
 
 export async function GET() {
-	revalidateTag("revalidate");
+	revalidateTag("revalidate", { expire: 0 });
 
 	return new Response("ok");
 }

examples/e2e/app-router/app/isr-data-cache/page.tsx

@@ -4,7 +4,7 @@ async function getTime() {
 	return new Date().toISOString();
 }
 
-const cachedTime = unstable_cache(getTime, { revalidate: false });
+const cachedTime = unstable_cache(getTime, ["getTime"], { revalidate: false });
 
 export const revalidate = 10;
 

examples/e2e/app-router/app/og/opengraph-image.tsx

@@ -33,6 +33,9 @@ export default async function Image() {
 			// For convenience, we can re-use the exported opengraph-image
 			// size config to also set the ImageResponse's width and height.
 			...size,
+			headers: {
+				"cache-control": "public, immutable, no-transform, max-age=31536000",
+			},
 		}
 	);
 }

examples/e2e/app-router/app/parallel/layout.tsx

@@ -9,29 +9,13 @@ export default function Layout({ a, b, children }: { children: ReactNode; a: Rea
 
 	return (
 		<div>
-			<div className="flex flex-col mb-10">
-				<label htmlFor="a">
-					Enable A
-					<input
-						name="a"
-						type="checkbox"
-						checked={routeA}
-						onChange={(e) => {
-							setRouteA(e.target.checked);
-						}}
-					/>
-				</label>
-				<label htmlFor="b">
-					Enable B
-					<input
-						name="b"
-						type="checkbox"
-						checked={routeB}
-						onChange={(e) => {
-							setRouteB(e.target.checked);
-						}}
-					/>
-				</label>
+			<div className="flex flex-col items-start mb-10">
+				<button onClick={() => setRouteA(!routeA)} data-testid="enable-a">
+					{routeA ? "Disable A" : "Enable A"}
+				</button>
+				<button onClick={() => setRouteB(!routeB)} data-testid="enable-b">
+					{routeB ? "Disable B" : "Enable B"}
+				</button>
 			</div>
 
 			{routeA && a}

examples/e2e/app-router/e2e/og.test.ts

@@ -34,6 +34,5 @@ test("next/og (vercel/og) to work in API route", async ({ request }) => {
 	const response = await request.get("api/og?title=opennext");
 	expect(response.status()).toBe(200);
 	expect(response.headers()["content-type"]).toBe("image/png");
-	expect(response.headers()["cache-control"]).toBe("public, immutable, no-transform, max-age=31536000");
 	expect(validateMd5(await response.body(), API_OG_MD5)).toBe(true);
 });

examples/e2e/app-router/e2e/parallel.test.ts

@@ -13,13 +13,13 @@ test("Parallel routes", async ({ page }) => {
 	await expect(routeB).not.toBeVisible();
 
 	// Enable A, which should be visible but not B
-	await page.locator('input[name="a"]').check();
+	await page.getByTestId("enable-a").click();
 	routeA = page.getByText("Parallel Route A");
 	await expect(routeA).toBeVisible();
 	await expect(routeB).not.toBeVisible();
 
 	// Enable B, both should be visible
-	await page.locator('input[name="b"]').check();
+	await page.getByTestId("enable-b").click();
 	routeB = page.getByText("Parallel Route B");
 	await expect(routeA).toBeVisible();
 	await expect(routeB).toBeVisible();

examples/e2e/app-router/next.config.ts

@@ -9,9 +9,6 @@ const nextConfig: NextConfig = {
 	typescript: {
 		ignoreBuildErrors: true,
 	},
-	eslint: {
-		ignoreDuringBuilds: true,
-	},
 	images: {
 		remotePatterns: [
 			{

examples/e2e/app-router/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"openbuild": "node ../../packages/open-next/dist/index.js build --streaming --build-command \"npx turbo build\"",
 		"dev": "next dev --turbopack --port 3001",
-		"build": "next build --turbopack",
+		"build": "next build --webpack",
 		"start": "next start --port 3001",
 		"lint": "next lint",
 		"clean": "rm -rf .turbo node_modules .next .open-next",

examples/e2e/app-router/tsconfig.json

@@ -12,7 +12,7 @@
 		"moduleResolution": "NodeNext",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"plugins": [
 			{
@@ -24,6 +24,13 @@
 			"@example/shared": ["../shared"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../utils.ts"],
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		"../utils.ts",
+		".next/dev/types/**/*.ts"
+	],
 	"exclude": ["node_modules", "open-next.config.ts"]
 }

examples/e2e/pages-router/next.config.ts

@@ -13,9 +13,6 @@ const nextConfig: NextConfig = {
 	typescript: {
 		ignoreBuildErrors: true,
 	},
-	eslint: {
-		ignoreDuringBuilds: true,
-	},
 	headers: async () => [
 		{
 			source: "/",

examples/e2e/pages-router/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"openbuild": "node ../../packages/open-next/dist/index.js build --build-command \"npx turbo build\"",
 		"dev": "next dev --turbopack --port 3002",
-		"build": "next build",
+		"build": "next build  --webpack",
 		"start": "next start --port 3002",
 		"lint": "next lint",
 		"clean": "rm -rf .turbo node_modules .next .open-next",

examples/e2e/pages-router/src/pages/ssg/index.tsx

@@ -1,5 +1,4 @@
 import type { InferGetStaticPropsType } from "next";
-import Link from "next/link";
 
 export async function getStaticProps() {
 	return {
@@ -15,7 +14,7 @@ export default function Page({ time }: InferGetStaticPropsType<typeof getStaticP
 			<div className="flex" data-testid="time">
 				Time: {time}
 			</div>
-			<Link href="/">Home</Link>
+			<a href="/">Home</a>
 		</div>
 	);
 }

examples/e2e/pages-router/tsconfig.json

@@ -12,7 +12,7 @@
 		"moduleResolution": "NodeNext",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"baseUrl": ".",
 		"paths": {

examples/overrides/d1-tag-next/next.config.ts

@@ -5,7 +5,6 @@ initOpenNextCloudflareForDev();
 
 const nextConfig: NextConfig = {
 	typescript: { ignoreBuildErrors: true },
-	eslint: { ignoreDuringBuilds: true },
 };
 
 export default nextConfig;

examples/overrides/d1-tag-next/tsconfig.json

@@ -11,7 +11,7 @@
 		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"plugins": [
 			{
@@ -22,6 +22,6 @@
 			"@/*": ["./*"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
 	"exclude": ["node_modules"]
 }

examples/overrides/kv-tag-next/next.config.ts

@@ -5,7 +5,6 @@ initOpenNextCloudflareForDev();
 
 const nextConfig: NextConfig = {
 	typescript: { ignoreBuildErrors: true },
-	eslint: { ignoreDuringBuilds: true },
 };
 
 export default nextConfig;

examples/overrides/kv-tag-next/tsconfig.json

@@ -11,7 +11,7 @@
 		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
+		"jsx": "react-jsx",
 		"incremental": true,
 		"plugins": [
 			{
@@ -22,6 +22,6 @@
 			"@/*": ["./*"]
 		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
 	"exclude": ["node_modules"]
 }

examples/overrides/memory-queue/next.config.ts

@@ -5,7 +5,6 @@ initOpenNextCloudflareForDev();
 
 const nextConfig: NextConfig = {
 	typescript: { ignoreBuildErrors: true },
-	eslint: { ignoreDuringBuilds: true },
 };
 
 export default nextConfig;