From efdb87d134563c379807f96dcdc952f08125dd36 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 16 Mar 2022 16:14:49 +0100
Subject: [PATCH] Drop browser field for edge runtime (#35335)

Related to #31678

For streaming pages,

Nodejs runtime: setting global runtime to `"nodejs"` will work with default module resolution.
Edge runtime: previously next.js will pick up browser field since it's the "similar" asset (unlike nodejs) to edge runtime but browser specific things like DOM api could breaks cause edge runtime is more like worker without dom runtime.

This PR is to revert the main field resolution behavior. And if you have a library targeting multiple runtime with different fields, ideally is to make it more isomorphic and will be easy to use in edge runtime
---
 packages/next/build/webpack-config.ts                     | 4 +++-
 .../app/node_modules/non-isomorphic-text/browser.js       | 1 +
 .../app/node_modules/non-isomorphic-text/index.js         | 1 +
 .../app/node_modules/non-isomorphic-text/package.json     | 5 +++++
 .../app/pages/external-imports.server.js                  | 8 +++++++-
 .../react-streaming-and-server-components/test/rsc.js     | 5 +++++
 6 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/browser.js
 create mode 100644 test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/index.js
 create mode 100644 test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/package.json

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 48d208912cb7..a42abcae003e 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -646,7 +646,9 @@ export default async function getBaseWebpackConfig(
           },
         }
       : undefined),
-    mainFields: !targetWeb ? ['main', 'module'] : ['browser', 'module', 'main'],
+    mainFields: targetWeb
+      ? (isEdgeRuntime ? [] : ['browser']).concat(['module', 'main'])
+      : ['main', 'module'],
     plugins: [],
   }
 
diff --git a/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/browser.js b/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/browser.js
new file mode 100644
index 000000000000..76b38b7d2ad9
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/browser.js
@@ -0,0 +1 @@
+export default () => 'browser-field-export'
diff --git a/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/index.js b/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/index.js
new file mode 100644
index 000000000000..41865ae5aa7d
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/index.js
@@ -0,0 +1 @@
+export default () => 'isomorphic-export'
diff --git a/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/package.json b/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/package.json
new file mode 100644
index 000000000000..bf2f13567110
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/node_modules/non-isomorphic-text/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "non-isomorphic-text",
+  "module": "./index.js",
+  "browser": "./browser.js"
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/external-imports.server.js b/test/integration/react-streaming-and-server-components/app/pages/external-imports.server.js
index 6627e3067542..40a41e569a75 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/external-imports.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/external-imports.server.js
@@ -1,5 +1,11 @@
 import moment from 'moment'
+import nonIsomorphicText from 'non-isomorphic-text'
 
 export default function Page() {
-  return <div>date:{moment().toString()}</div>
+  return (
+    <div>
+      <div>date:{moment().toString()}</div>
+      <div>{nonIsomorphicText()}</div>
+    </div>
+  )
 }
diff --git a/test/integration/react-streaming-and-server-components/test/rsc.js b/test/integration/react-streaming-and-server-components/test/rsc.js
index 5e7c60d3f4f5..8b4a8185022c 100644
--- a/test/integration/react-streaming-and-server-components/test/rsc.js
+++ b/test/integration/react-streaming-and-server-components/test/rsc.js
@@ -157,6 +157,11 @@ export default function (context, { runtime, env }) {
     })
   }
 
+  it('should not pick browser field from package.json for external libraries', async () => {
+    const html = await renderViaHTTP(context.appPort, '/external-imports')
+    expect(html).toContain('isomorphic-export')
+  })
+
   it('should handle various kinds of exports correctly', async () => {
     const html = await renderViaHTTP(context.appPort, '/various-exports')
     const content = getNodeBySelector(html, '#__next').text()