Running nx serve on a React app serves it in production mode

[cristian-aldea]

Current Behavior

A react application being served with nx serve is served in production mode. Also, you get the following warning:

WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'

See #7924

Expected Behavior

I expect that when I run my frontend application with nx serve, it is run in development mode with no warnings.

This seems to be a regression. I was not getting this issue in 13.8.3, and in fact reverting the @nrwl/* package versions back to 13.8.3 fixed the issue.

Steps to Reproduce

1. Create a new react+express workspace using npx create-nx-workspace temp
   • Make sure to pick react-express for "What to create in the new workspace"
   • Make sure to pick scss for "Default stylesheet format"
2. add console.log(environment.production); somewhere in the function definition of the App component. Make sure to import environment from ../environments/environment, and not ../environments/environment.prod
3. run nx serve temp to run the react application
4. You will notice the following warning pop up in the logs:

   WARNING in DefinePlugin
   Conflicting values for 'process.env.NODE_ENV'
   

5. You will see true printing in the browser console, indicating that the environment.ts file replacement was done, and therefore that the production mode was turned on

Failure Logs

$ nx serve temp

> nx run temp:serve

<i> [webpack-dev-server] [HPM] Proxy created: /api  -> http://localhost:3333
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/, http://127.0.0.1:4200/
<i> [webpack-dev-server] 404s will fallback to '/index.html'

>  NX  Web Development Server is listening at http://localhost:4200/

Entrypoint main [big] 1.2 MiB = runtime.js 47.4 KiB main.js 1.15 MiB
Entrypoint polyfills [big] 528 KiB = runtime.js 47.4 KiB polyfills.js 480 KiB
Entrypoint styles 219 KiB = runtime.js 47.4 KiB styles.js 172 KiB styles.ef46db3751d8e999.css 0 bytes
chunk (runtime: runtime) main.js (main) 1.15 MiB [initial] [rendered]
chunk (runtime: runtime) polyfills.js (polyfills) 446 KiB [initial] [rendered]
chunk (runtime: runtime) styles.js, styles.ef46db3751d8e999.css (styles) 167 KiB (javascript) 0 bytes (css/mini-extract) [initial] [rendered]
chunk (runtime: runtime) runtime.js (runtime) 31.8 KiB [entry] [rendered]

WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'

webpack compiled with 1 warning (2cea0dd97d817b81)

Environment

$ nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.13.2
   OS   : linux x64
   npm  : 8.1.2
   
   nx : 13.8.5
   @nrwl/angular : undefined
   @nrwl/cli : 13.8.5
   @nrwl/cypress : 13.8.5
   @nrwl/detox : undefined
   @nrwl/devkit : 13.8.5
   @nrwl/eslint-plugin-nx : 13.8.5
   @nrwl/express : 13.8.5
   @nrwl/jest : 13.8.5
   @nrwl/js : 13.8.5
   @nrwl/linter : 13.8.5
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : 13.8.5
   @nrwl/nx-cloud : undefined
   @nrwl/react : 13.8.5
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.8.5
   @nrwl/tao : 13.8.5
   @nrwl/web : 13.8.5
   @nrwl/workspace : 13.8.5
   typescript : 4.5.5
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:

(node:148486) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/cris/dev/temp/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

[owen26]

You should be able to fix this by either

change your serve target buildTarget option from PROJECT_NAME:build to PROJECT_NAME:build:development

or

change your build target defaultConfiguration option from production to development, or simply removes this setting

[cristian-aldea]

Thanks, I'll try and see if that helps

[rhiadj]

@owen26 thanks for the suggestions - these worked for us in the end after some trial and error.

Like @cristian-aldea if we switch between versions we were getting:
@nrwl/*@13.8.3 - everything works as expected (no warning)
@nrwl/*@13.8.4 - app served in prod mode (with above warning)

We updated to @nrwl/*@13.8.5 because we needed the fix to publishable js modules:

fix(js): add publishable to library generator schema
229f71e

Any idea why this change needed additional tweaks to config? This still feels like a regression given no code changes give different results between versions?

Any help anyone can give would be gratefully received. Thanks!

[rhiadj]

Found the cause of this issue - see comment here:
#7924 (comment)

Thanks.

[cristian-aldea]

I'm thinking of closing down this issue, since it seems my issue has the same root cause as #7924

thank you to all who looked into the issue and informed everyone of how to address it.

[72gm]

seems a bit odd that this is the default... this causes each recompile to take 10 to 15 seconds... changing defaultConfiguration to development in the project json brings this down to 1 or 2 seconds

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.