Nx: [BUG] Nx NextJS Runtime config variables are "undefined" while running production build

Created on 27 Feb 2020  路  3Comments  路  Source: nrwl/nx

Prerequisites

  • [x] I am running the latest version
  • [x] I checked the documentation (nx.dev) and found no answer
  • [x] I checked to make sure that this issue has not already been filed
  • [x] I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

In NextJs apps that is bootstrapped via NX NextJs schematics based on instructions specified here, the
_publicRuntimeConfig_ variables specified in _next.config.js_ should be available in _getInitialProps_ during runtime both in production and dev mode as specified in orignal nextjs documentation here.

Similar project bootstrapped via create-next-app works perfectly where _publicRuntimeConfig_ variables specified in _next.config.js_ are. available in _getInitialProps_ during runtime both in production and dev mode.

Current Behavior

Nextjs app that is created via Nx Nextjs schematics gives _undefined_ for _publicRuntimeConfig_ accessed in _getInitialProps_ during runtime of production build but in development mode it works perfectly

next.config.js
module.exports = { serverRuntimeConfig: { // Will only be available on the server side mySecret: 'secret', secondSecret: process.env.SECOND_SECRET // Pass through env variables }, publicRuntimeConfig: { // Will be available on both server and client staticFolder: '/static' } };

getInitialProps
import getConfig from 'next/config'; const { publicRuntimeConfig } = getConfig(); ... Index.getInitialProps = async ctx => { console.log('I am here'); console.log(publicRuntimeConfig.staticFolder); // Undefined when running prod build return {}; };

Failure Information (for bugs)

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. clone repo
  2. Change directory to code directory
  3. run npm install
  4. run npm start tuskdesk
  5. Open http://localhost:4200/ in your browser
  6. You will see run time config variables consoled in terminal like below
    image
  7. Now run npm run build tuskdesk to create a production build
  8. Run a custom command npm run start-prod:nextjs In short it copies dist file to root and run next app (There could be a better way, I am not sure)
  9. Open http://localhost:3000 in browser
  10. You will see as contrast to previous output variables are consoled as undefined like below
    image

Context

NX Report

@nrwl/angular : Not Found @nrwl/cli : 9.0.4 @nrwl/cypress : 9.0.4 @nrwl/eslint-plugin-nx : 9.0.4 @nrwl/express : Not Found @nrwl/jest : 9.0.4 @nrwl/linter : 9.0.4 @nrwl/nest : Not Found @nrwl/next : 9.0.4 @nrwl/node : Not Found @nrwl/react : 9.0.4 @nrwl/schematics : Not Found @nrwl/tao : 9.0.4 @nrwl/web : 9.0.4 @nrwl/workspace : 9.0.4 typescript : 3.7.5

Other

As I tried to reproduce the issue in bare bone NextJs setup but it works perfectly there. To reproduce follow below steps

  1. Clone repo
  2. Change directory to code directory
  3. run npm install
  4. For _Dev Mode_ run npm run dev
  5. Go to http://localhost:3000 and you will see runtime variables in terminal like below
    image
  6. For _Prod Mode_ run npm run build and npm run start
  7. Go to http://localhost:3000 and you will see runtime variables in terminal like below
    image

Most helpful comment

The issue is resolved. I was missing coping of next.config.js also while moving dist output to root.

_Instead of this_
"start-prod:nextjs": "rm -rf .next && mv dist/apps/tuskdesk .next && node ./node_modules/.bin/next start"

_Do this_
"start-prod:nextjs": "rm -rf .next && mv dist/apps/tuskdesk .next && cp apps/tuskdesk/next.config.js next.config.js && node ./node_modules/.bin/next start"

_Suggestion_
When next.config.js was missing while running the next start command, a descriptive error message could be helpful. Instead, it was using the default next.config with empty fields

All 3 comments

The issue is resolved. I was missing coping of next.config.js also while moving dist output to root.

_Instead of this_
"start-prod:nextjs": "rm -rf .next && mv dist/apps/tuskdesk .next && node ./node_modules/.bin/next start"

_Do this_
"start-prod:nextjs": "rm -rf .next && mv dist/apps/tuskdesk .next && cp apps/tuskdesk/next.config.js next.config.js && node ./node_modules/.bin/next start"

_Suggestion_
When next.config.js was missing while running the next start command, a descriptive error message could be helpful. Instead, it was using the default next.config with empty fields

Ok, this was a total pain due to it kinda just failing silently. Took me a while to realise it was NX and not something wrong with the underlying next/config and build cycle. Thank you @suwigyarathore .

Just ran into this as well and spent a few hours trying to find the issue. Thanks @suwigyarathore

Was this page helpful?
0 / 5 - 0 ratings

Related issues

joelmuskwe picture joelmuskwe  路  3Comments

olakara picture olakara  路  3Comments

MichaelWarneke picture MichaelWarneke  路  3Comments

zpydee picture zpydee  路  3Comments

IonFoXx picture IonFoXx  路  3Comments