fix: force React to use production env (#1056)

* fix: force React to use production env

* chore: add cypress test

Author: ascorbic

cypress/integration/default/default.spec.ts

@@ -5,20 +5,24 @@ describe('Default site', () => {
 
   it('loads home page', () => {
     cy.findByText('Next Demo!')
-    cy.findByTestId("list-server-side").within(() => {
-      cy.findAllByRole("link").should('have.length', 5)
+    cy.findByTestId('list-server-side').within(() => {
+      cy.findAllByRole('link').should('have.length', 5)
     })
 
-    cy.findByTestId("list-dynamic-pages").within(() => {
-      cy.findAllByRole("link").should('have.length', 3)
+    cy.findByTestId('list-dynamic-pages').within(() => {
+      cy.findAllByRole('link').should('have.length', 3)
     })
 
-    cy.findByTestId("list-catch-all").within(() => {
-      cy.findAllByRole("link").should('have.length', 3)
+    cy.findByTestId('list-catch-all').within(() => {
+      cy.findAllByRole('link').should('have.length', 3)
     })
 
-    cy.findByTestId("list-static").within(() => {
-      cy.findAllByRole("link").should('have.length', 2)
+    cy.findByTestId('list-static').within(() => {
+      cy.findAllByRole('link').should('have.length', 2)
     })
   })
-})
+
+  it('sets NODE_ENV', () => {
+    cy.findByText('NODE_ENV: production')
+  })
+})

demos/default/pages/index.js

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic'
 const Header = dynamic(() => import(/* webpackChunkName: 'header' */ '../components/Header'), { ssr: true })
 import { useRouter } from 'next/router'
 
-const Index = ({ shows }) => {
+const Index = ({ shows, nodeEnv }) => {
   const { locale } = useRouter()
 
   return (
@@ -23,6 +23,7 @@ const Index = ({ shows }) => {
         <br />
         Refresh this page to see it change.
       </p>
+      <p>NODE_ENV: {nodeEnv}</p>
 
       <ul data-testid="list-server-side">
         {shows.map(({ id, name }) => (
@@ -215,7 +216,7 @@ Index.getInitialProps = async function () {
   const res = await fetch(server)
   const data = await res.json()
 
-  return { shows: data.slice(0, 5) }
+  return { shows: data.slice(0, 5), nodeEnv: process.env.NODE_ENV || null }
 }
 
 export default Index

src/templates/getHandler.ts

@@ -11,6 +11,10 @@ const { Bridge } = require('@vercel/node/dist/bridge')
 
 const { augmentFsModule, getMaxAge, getMultiValueHeaders, getNextServer } = require('./handlerUtils')
 
+type Mutable<T> = {
+  -readonly [K in keyof T]: T[K]
+}
+
 const makeHandler =
   () =>
   // We return a function and then call `toString()` on it to serialise it as the launcher function
@@ -21,13 +25,16 @@ const makeHandler =
       // eslint-disable-next-line node/no-missing-require
       require.resolve('./pages.js')
     } catch {}
-    // eslint-disable-next-line no-underscore-dangle
-    process.env._BYPASS_SSG = 'true'
 
     const ONE_YEAR_IN_SECONDS = 31536000
 
+    // React assumes you want development mode if NODE_ENV is unset.
+    ;(process.env as Mutable<NodeJS.ProcessEnv>).NODE_ENV ||= 'production'
+
     // We don't want to write ISR files to disk in the lambda environment
     conf.experimental.isrFlushToDisk = false
+    // eslint-disable-next-line no-underscore-dangle
+    process.env._BYPASS_SSG = 'true'
 
     // Set during the request as it needs the host header. Hoisted so we can define the function once
     let base