Current behavior of import conditions

vercel · Jun 13, 2024 · 6ca4214 · 6ca4214
1 parent d7d5117
commit 6ca4214
Show file tree

Hide file tree

Showing 20 changed files with 447 additions and 0 deletions.
diff --git a/test/e2e/import-conditions/app/app/ClientPage.tsx b/test/e2e/import-conditions/app/app/ClientPage.tsx
@@ -0,0 +1,22 @@
+'use client'
+import * as React from 'react'
+import * as react from 'library-with-exports/react'
+import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
+import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
+
+export default function ClientPage({ server }: { server: unknown }) {
+  const [client, setClient] = React.useState<unknown | null>(null)
+  React.useEffect(() => {
+    setClient({
+      react: react.condition,
+      serverFavoringBrowser: serverFavoringBrowser.condition,
+      serverFavoringEdge: serverFavoringEdge.condition,
+    })
+  }, [])
+
+  return client === null ? (
+    <pre aria-busy={true}>{JSON.stringify({ server }, null, 2)}</pre>
+  ) : (
+    <pre>{JSON.stringify({ server, client }, null, 2)}</pre>
+  )
+}
diff --git a/test/e2e/import-conditions/app/app/edge-page/page.tsx b/test/e2e/import-conditions/app/app/edge-page/page.tsx
@@ -0,0 +1,18 @@
+import * as react from 'library-with-exports/react'
+import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
+import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
+import ClientPage from '../ClientPage'
+
+export const runtime = 'edge'
+
+export default function Page() {
+  return (
+    <ClientPage
+      server={{
+        react: react.condition,
+        serverFavoringBrowser: serverFavoringBrowser.condition,
+        serverFavoringEdge: serverFavoringEdge.condition,
+      }}
+    />
+  )
+}
diff --git a/test/e2e/import-conditions/app/app/node-page/page.tsx b/test/e2e/import-conditions/app/app/node-page/page.tsx
@@ -0,0 +1,18 @@
+import * as react from 'library-with-exports/react'
+import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
+import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
+import ClientPage from '../ClientPage'
+
+export const runtime = 'nodejs'
+
+export default function Page() {
+  return (
+    <ClientPage
+      server={{
+        react: react.condition,
+        serverFavoringBrowser: serverFavoringBrowser.condition,
+        serverFavoringEdge: serverFavoringEdge.condition,
+      }}
+    />
+  )
+}
diff --git a/test/e2e/import-conditions/app/edge-route/route.tsx b/test/e2e/import-conditions/app/edge-route/route.tsx
@@ -0,0 +1,13 @@
+import * as react from 'library-with-exports/react'
+import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
+import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
+
+export const runtime = 'edge'
+
+export function GET() {
+  return Response.json({
+    react: react.condition,
+    serverFavoringBrowser: serverFavoringBrowser.condition,
+    serverFavoringEdge: serverFavoringEdge.condition,
+  })
+}
diff --git a/test/e2e/import-conditions/app/layout.tsx b/test/e2e/import-conditions/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/import-conditions/app/node-route/route.tsx b/test/e2e/import-conditions/app/node-route/route.tsx
@@ -0,0 +1,13 @@
+import * as react from 'library-with-exports/react'
+import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
+import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
+
+export const runtime = 'nodejs'
+
+export function GET() {
+  return Response.json({
+    react: react.condition,
+    serverFavoringBrowser: serverFavoringBrowser.condition,
+    serverFavoringEdge: serverFavoringEdge.condition,
+  })
+}
diff --git a/test/e2e/import-conditions/import-conditions.test.ts b/test/e2e/import-conditions/import-conditions.test.ts
@@ -0,0 +1,209 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('react version', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('Pages Router page headers with edge runtime', async () => {
+    const response = await next.fetch('/pages/edge-page')
+
+    const middlewareHeaders = {
+      react: response.headers.get('x-react-condition'),
+      serverFavoringBrowser: response.headers.get(
+        'x-server-favoring-browser-condition'
+      ),
+      serverFavoringEdge: response.headers.get(
+        'x-server-favoring-edge-condition'
+      ),
+    }
+    expect(middlewareHeaders).toEqual({
+      react: 'react-server',
+      serverFavoringBrowser: 'worker',
+      serverFavoringEdge: 'worker',
+    })
+  })
+
+  it('Pages Router page with edge runtime', async () => {
+    const browser = await next.browser('/pages/edge-page')
+
+    const json = await browser.elementByCss('body').text()
+    expect(JSON.parse(json)).toEqual({
+      server: {
+        react: 'default',
+        serverFavoringBrowser: 'worker',
+        serverFavoringEdge: 'worker',
+      },
+      client: {
+        react: 'default',
+        serverFavoringBrowser: 'browser',
+        serverFavoringEdge: 'browser',
+      },
+    })
+  })
+
+  it('Pages Router page headers with nodejs runtime', async () => {
+    const response = await next.fetch('/pages/node-page')
+
+    const middlewareHeaders = {
+      react: response.headers.get('x-react-condition'),
+      serverFavoringBrowser: response.headers.get(
+        'x-server-favoring-browser-condition'
+      ),
+      serverFavoringEdge: response.headers.get(
+        'x-server-favoring-edge-condition'
+      ),
+    }
+    expect(middlewareHeaders).toEqual({
+      react: 'react-server',
+      serverFavoringBrowser: 'worker',
+      serverFavoringEdge: 'worker',
+    })
+  })
+
+  it('Pages Router page with nodejs runtime after hydration', async () => {
+    const browser = await next.browser('/pages/node-page')
+
+    const json = await browser.elementByCss('body').text()
+    expect(JSON.parse(json)).toEqual({
+      server: {
+        react: 'default',
+        serverFavoringBrowser: 'node',
+        serverFavoringEdge: 'node',
+      },
+      client: {
+        react: 'default',
+        serverFavoringBrowser: 'browser',
+        serverFavoringEdge: 'browser',
+      },
+    })
+  })
+
+  it('App Router page headers with edge runtime', async () => {
+    const response = await next.fetch('/app/edge-page')
+
+    const middlewareHeaders = {
+      react: response.headers.get('x-react-condition'),
+      serverFavoringBrowser: response.headers.get(
+        'x-server-favoring-browser-condition'
+      ),
+      serverFavoringEdge: response.headers.get(
+        'x-server-favoring-edge-condition'
+      ),
+    }
+    expect(middlewareHeaders).toEqual({
+      react: 'react-server',
+      serverFavoringBrowser: 'worker',
+      serverFavoringEdge: 'worker',
+    })
+  })
+
+  it('App Router page with edge runtime', async () => {
+    const browser = await next.browser('/app/edge-page')
+
+    const json = await browser.elementByCss('body').text()
+    expect(JSON.parse(json)).toEqual({
+      server: {
+        react: 'react-server',
+        serverFavoringBrowser: 'worker',
+        serverFavoringEdge: 'worker',
+      },
+      client: {
+        react: 'default',
+        serverFavoringBrowser: 'browser',
+        serverFavoringEdge: 'browser',
+      },
+    })
+  })
+
+  it('App Router page headers with nodejs runtime', async () => {
+    const response = await next.fetch('/app/node-page')
+
+    const middlewareHeaders = {
+      react: response.headers.get('x-react-condition'),
+      serverFavoringBrowser: response.headers.get(
+        'x-server-favoring-browser-condition'
+      ),
+      serverFavoringEdge: response.headers.get(
+        'x-server-favoring-edge-condition'
+      ),
+    }
+    expect(middlewareHeaders).toEqual({
+      react: 'react-server',
+      serverFavoringBrowser: 'worker',
+      serverFavoringEdge: 'worker',
+    })
+  })
+
+  it('App Router page with nodejs runtime after hydration', async () => {
+    const browser = await next.browser('/app/node-page')
+
+    const json = await browser.elementByCss('body').text()
+    expect(JSON.parse(json)).toEqual({
+      server: {
+        react: 'react-server',
+        serverFavoringBrowser: 'node',
+        serverFavoringEdge: 'node',
+      },
+      client: {
+        react: 'default',
+        serverFavoringBrowser: 'browser',
+        serverFavoringEdge: 'browser',
+      },
+    })
+  })
+
+  it('App Router Route Handler with nodejs runtime', async () => {
+    const response = await next.fetch('/node-route')
+
+    const middlewareHeaders = {
+      react: response.headers.get('x-react-condition'),
+      serverFavoringBrowser: response.headers.get(
+        'x-server-favoring-browser-condition'
+      ),
+      serverFavoringEdge: response.headers.get(
+        'x-server-favoring-edge-condition'
+      ),
+    }
+    const data = await response.json()
+    expect({ middlewareHeaders, data }).toEqual({
+      middlewareHeaders: {
+        react: 'react-server',
+        serverFavoringBrowser: 'worker',
+        serverFavoringEdge: 'worker',
+      },
+      data: {
+        react: 'react-server',
+        serverFavoringBrowser: 'node',
+        serverFavoringEdge: 'node',
+      },
+    })
+  })
+
+  it('App Router Route Handler with edge runtime', async () => {
+    const response = await next.fetch('/edge-route')
+
+    const middlewareHeaders = {
+      react: response.headers.get('x-react-condition'),
+      serverFavoringBrowser: response.headers.get(
+        'x-server-favoring-browser-condition'
+      ),
+      serverFavoringEdge: response.headers.get(
+        'x-server-favoring-edge-condition'
+      ),
+    }
+    const data = await response.json()
+    expect({ middlewareHeaders, data }).toEqual({
+      middlewareHeaders: {
+        react: 'react-server',
+        serverFavoringBrowser: 'worker',
+        serverFavoringEdge: 'worker',
+      },
+      data: {
+        react: 'react-server',
+        serverFavoringBrowser: 'worker',
+        serverFavoringEdge: 'worker',
+      },
+    })
+  })
+})
diff --git a/test/e2e/import-conditions/library-with-exports/browser.js b/test/e2e/import-conditions/library-with-exports/browser.js
@@ -0,0 +1 @@
+export const condition = 'browser'
diff --git a/test/e2e/import-conditions/library-with-exports/default.js b/test/e2e/import-conditions/library-with-exports/default.js
@@ -0,0 +1 @@
+export const condition = 'default'
diff --git a/test/e2e/import-conditions/library-with-exports/edge-light.js b/test/e2e/import-conditions/library-with-exports/edge-light.js
@@ -0,0 +1 @@
+export const condition = 'edge-light'
diff --git a/test/e2e/import-conditions/library-with-exports/netlify.js b/test/e2e/import-conditions/library-with-exports/netlify.js
@@ -0,0 +1 @@
+export const condition = 'netlify'
diff --git a/test/e2e/import-conditions/library-with-exports/never.js b/test/e2e/import-conditions/library-with-exports/never.js
@@ -0,0 +1,3 @@
+throw new Error(
+  'Imported entrypoint that should never be used. This is a bug in Next.js'
+)
diff --git a/test/e2e/import-conditions/library-with-exports/node.js b/test/e2e/import-conditions/library-with-exports/node.js
@@ -0,0 +1 @@
+export const condition = 'node'
diff --git a/test/e2e/import-conditions/library-with-exports/package.json b/test/e2e/import-conditions/library-with-exports/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "library-with-exports",
+  "version": "1.0.0",
+  "exports": {
+    "./server-favoring-edge": {
+      "worker": "./worker.js",
+      "workerd": "./workerd.js",
+      "edge-light": "./edge-light.js",
+      "node": "./node.js",
+      "browser": "./browser.js",
+      "default": "./default.js"
+    },
+    "./server-favoring-browser": {
+      "// Unused condition names we should never hit": "./never.js",
+      "worker": "./worker.js",
+      "workerd": "./workerd.js",
+
+      "browser": "./browser.js",
+      "node": "./node.js",
+      "edge-light": "./edge-light.js",
+      "default": "./default.js"
+    },
+    "./react": {
+      "react-server": "./react-server.js",
+      "default": "./default.js"
+    }
+  }
+}
diff --git a/test/e2e/import-conditions/library-with-exports/react-server.js b/test/e2e/import-conditions/library-with-exports/react-server.js
@@ -0,0 +1 @@
+export const condition = 'react-server'
diff --git a/test/e2e/import-conditions/library-with-exports/worker.js b/test/e2e/import-conditions/library-with-exports/worker.js
@@ -0,0 +1 @@
+export const condition = 'worker'
diff --git a/test/e2e/import-conditions/middleware.ts b/test/e2e/import-conditions/middleware.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server'
+import * as react from 'library-with-exports/react'
+import * as serverFavoringBrowser from 'library-with-exports/server-favoring-browser'
+import * as serverFavoringEdge from 'library-with-exports/server-favoring-edge'
+
+export function middleware() {
+  const response = NextResponse.next()
+
+  response.headers.set('x-react-condition', react.condition)
+  response.headers.set(
+    'x-server-favoring-browser-condition',
+    serverFavoringBrowser.condition
+  )
+  response.headers.set(
+    'x-server-favoring-edge-condition',
+    serverFavoringEdge.condition
+  )
+
+  return response
+}
diff --git a/test/e2e/import-conditions/package.json b/test/e2e/import-conditions/package.json
@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "name": "import-conditions",
+  "dependencies": {
+    "library-with-exports": "link:./library-with-exports"
+  }
+}