From 0c6685150422d614e4e6b51509baacb477adc534 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 12 Jun 2024 20:36:23 +0200 Subject: [PATCH 1/3] Set `workerd` condition name instead of `worker` `workerd` is for Cloudflare Workers. `worker` is more for Service Workers but there's no clear community consensus that I could find around `worker` --- packages/next/src/build/webpack-config-rules/resolve.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/src/build/webpack-config-rules/resolve.ts b/packages/next/src/build/webpack-config-rules/resolve.ts index 35f9f56969ef4..5626bbf5c49f4 100644 --- a/packages/next/src/build/webpack-config-rules/resolve.ts +++ b/packages/next/src/build/webpack-config-rules/resolve.ts @@ -6,7 +6,7 @@ import { // exports. export const edgeConditionNames = [ 'edge-light', - 'worker', + 'workerd', // inherits the default conditions '...', ] From 905a9a7caef0d3d7eb778cbd8f63d75f8cbd6b70 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 12 Jun 2024 21:48:14 +0200 Subject: [PATCH 2/3] Stop using edge condition names as main fields --- packages/next/src/build/webpack-config-rules/resolve.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/next/src/build/webpack-config-rules/resolve.ts b/packages/next/src/build/webpack-config-rules/resolve.ts index 5626bbf5c49f4..ba70766248d40 100644 --- a/packages/next/src/build/webpack-config-rules/resolve.ts +++ b/packages/next/src/build/webpack-config-rules/resolve.ts @@ -11,14 +11,10 @@ export const edgeConditionNames = [ '...', ] -const mainFieldsPerCompiler: Record< - CompilerNameValues | 'server-esm', - string[] -> = { +const mainFieldsPerCompiler = { // For default case, prefer CJS over ESM on server side. e.g. pages dir SSR [COMPILER_NAMES.server]: ['main', 'module'], [COMPILER_NAMES.client]: ['browser', 'module', 'main'], - [COMPILER_NAMES.edgeServer]: edgeConditionNames, // For bundling-all strategy, prefer ESM over CJS 'server-esm': ['module', 'main'], } From f085c7a448ab3bc15dfdda9046f5112da459437e Mon Sep 17 00:00:00 2001 From: eps1lon Date: Thu, 13 Jun 2024 13:49:28 +0200 Subject: [PATCH 3/3] Stop using `workerd` Vercel Edge Functions don't necessarily implement the same APIs as CF Workers. If a library supports both, the library has to provide entries for each in `exports`. --- .../next-swc/crates/next-core/src/util.rs | 2 +- .../src/build/webpack-config-rules/resolve.ts | 1 - .../import-conditions.test.ts | 40 +++++++++---------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/next-swc/crates/next-core/src/util.rs b/packages/next-swc/crates/next-core/src/util.rs index 40841e28cf8fa..58bf8b5837d1b 100644 --- a/packages/next-swc/crates/next-core/src/util.rs +++ b/packages/next-swc/crates/next-core/src/util.rs @@ -150,7 +150,7 @@ impl NextRuntime { pub fn conditions(&self) -> &'static [&'static str] { match self { NextRuntime::NodeJs => &["node"], - NextRuntime::Edge => &["edge-light", "worker"], + NextRuntime::Edge => &["edge-light"], } } } diff --git a/packages/next/src/build/webpack-config-rules/resolve.ts b/packages/next/src/build/webpack-config-rules/resolve.ts index ba70766248d40..b9c546bc6ad78 100644 --- a/packages/next/src/build/webpack-config-rules/resolve.ts +++ b/packages/next/src/build/webpack-config-rules/resolve.ts @@ -6,7 +6,6 @@ import { // exports. export const edgeConditionNames = [ 'edge-light', - 'workerd', // inherits the default conditions '...', ] diff --git a/test/e2e/import-conditions/import-conditions.test.ts b/test/e2e/import-conditions/import-conditions.test.ts index a6dc66f27c7c3..53c44c9ada2c3 100644 --- a/test/e2e/import-conditions/import-conditions.test.ts +++ b/test/e2e/import-conditions/import-conditions.test.ts @@ -22,8 +22,8 @@ describe('react version', () => { } expect(middlewareHeaders).toEqual({ react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }) }) @@ -34,8 +34,8 @@ describe('react version', () => { expect(JSON.parse(json)).toEqual({ server: { react: 'default', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }, client: { react: 'default', @@ -59,8 +59,8 @@ describe('react version', () => { } expect(middlewareHeaders).toEqual({ react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }) }) @@ -96,8 +96,8 @@ describe('react version', () => { } expect(middlewareHeaders).toEqual({ react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }) }) @@ -111,8 +111,8 @@ describe('react version', () => { expect(JSON.parse(json)).toEqual({ server: { react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }, client: { react: 'default', @@ -121,8 +121,8 @@ describe('react version', () => { }, action: { react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }, }) }) @@ -141,8 +141,8 @@ describe('react version', () => { } expect(middlewareHeaders).toEqual({ react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }) }) @@ -188,8 +188,8 @@ describe('react version', () => { expect({ middlewareHeaders, data }).toEqual({ middlewareHeaders: { react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }, data: { react: 'react-server', @@ -215,13 +215,13 @@ describe('react version', () => { expect({ middlewareHeaders, data }).toEqual({ middlewareHeaders: { react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }, data: { react: 'react-server', - serverFavoringBrowser: 'worker', - serverFavoringEdge: 'worker', + serverFavoringBrowser: 'browser', + serverFavoringEdge: 'edge-light', }, }) })