Merge branch 'canary' into future-fill

packages/next/bin/next.ts

@@ -2,7 +2,6 @@
 import * as log from '../build/output/log'
 import arg from 'next/dist/compiled/arg/index.js'
 import { NON_STANDARD_NODE_ENV } from '../lib/constants'
-import { shouldUseReactRoot } from '../server/utils'
 ;['react', 'react-dom'].forEach((dependency) => {
   try {
     // When 'npm link' is used it checks the clone location. Not the project.
@@ -107,6 +106,9 @@ if (process.env.NODE_ENV) {
 ;(process.env as any).NODE_ENV = process.env.NODE_ENV || defaultEnv
 ;(process.env as any).NEXT_RUNTIME = 'nodejs'
 
+// In node.js runtime, react has to be required after NODE_ENV is set,
+// so that the correct dev/prod bundle could be loaded into require.cache.
+const { shouldUseReactRoot } = require('../server/utils')
 if (shouldUseReactRoot) {
   ;(process.env as any).__NEXT_REACT_ROOT = 'true'
 }

test/e2e/ssr-react-context/app/pages/consumer.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const NumberContext = React.createContext(0)
+
+export default function page() {
+  return (
+    <NumberContext.Provider value={12345}>
+      <NumberContext.Consumer>
+        {(value) => <p>Value: {value}</p>}
+      </NumberContext.Consumer>
+    </NumberContext.Provider>
+  )
+}
+
+export async function getServerSideProps() {
+  return { props: {} }
+}

test/e2e/ssr-react-context/index.test.ts

@@ -0,0 +1,46 @@
+import { join } from 'path'
+import { renderViaHTTP, check } from 'next-test-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { createNext, FileRef } from 'e2e-utils'
+
+describe('React Context', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(join(__dirname, 'app/pages')),
+        'context.js': new FileRef(join(__dirname, 'app/context.js')),
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should render a page with context', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toMatch(/Value: .*?hello world/)
+  })
+
+  it('should render correctly with context consumer', async () => {
+    const html = await renderViaHTTP(next.url, '/consumer')
+    expect(html).toMatch(/Value: .*?12345/)
+  })
+
+  if ((globalThis as any).isNextDev) {
+    it('should render with context after change', async () => {
+      const aboutAppPagePath = 'pages/_app.js'
+      const originalContent = await next.readFile(aboutAppPagePath)
+      await next.patchFile(
+        aboutAppPagePath,
+        originalContent.replace('hello world', 'new value')
+      )
+
+      try {
+        await check(() => renderViaHTTP(next.url, '/'), /Value: .*?new value/)
+      } finally {
+        await next.patchFile(aboutAppPagePath, originalContent)
+      }
+      await check(() => renderViaHTTP(next.url, '/'), /Value: .*?hello world/)
+    })
+  }
+})