nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.3k stars 2.32k forks source link

Conflicting values for 'process.env.NODE_ENV' ("'development'" !== "\"development\"") #28040

Open dangbert opened 2 days ago

dangbert commented 2 days ago

Current Behavior

NODE_ENV problem:

Initializing a new nx repo (with rspack) using npx create-nx-workspace@latest nxwarningdemo --preset=@nx/rspack --package-manager=yarn leads to a warning in the browser console upon running yarn start

[webpack-dev-server] Warnings while compiling. index.js:488
[webpack-dev-server] WARNING
  ⚠ DefinePlugin:
  │ Conflicting values for 'process.env.NODE_ENV' ("'development'" !== "\"development\"")

dev server port configuration problem

Additionally, this may be a separate issue but the port the dev server runs on is unclear:

  $ yarn start
yarn run v1.22.22
$ npx nx serve

> nx run nxwarningdemo:serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/
<i> [webpack-dev-server] 404s will fallback to '/index.html'
●  ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit                                                                                                       
 NX  Server ready at http://localhost:4200

In reality localhost:4200 seems to be unused, wherease the dev server is actually running on localhost:8080

If I update rspack.config.js as shown:

  --- a/rspack.config.js
+++ b/rspack.config.js
@@ -1,5 +1,6 @@
 const { composePlugins, withNx, withReact } = require('@nx/rspack');

 module.exports = composePlugins(withNx(), withReact(), (config) => {
+  config.devServer.port = 5555;
   return config;
 });

the output and port the dev server is running on doesn't change, the rspack dev-server port setting is not respected.

If I update project.json as shown:

  --- a/project.json
+++ b/project.json
@@ -31,7 +31,8 @@
     "serve": {
       "executor": "@nx/rspack:dev-server",
       "options": {
-        "buildTarget": "nxwarningdemo:build:development"
+        "buildTarget": "nxwarningdemo:build:development",
+        "port": 9999
       },
       "configurations": {
         "development": {},

the output then becomes consistent with the same port listed on both lines and actually runs on the desired port (9999 in this case)

 $ yarn start
yarn run v1.22.22
$ npx nx serve

> nx run nxwarningdemo:serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9999/, http://127.0.0.1:9999/
<i> [webpack-dev-server] 404s will fallback to '/index.html'
●  ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit                                                                                                       
 NX  Server ready at http://localhost:9999

Expected Behavior

no warning related to 'process.env.NODE_ENV

why does this bother me? Because on another repo, this warning is very disruptive to starting the dev server as it shows up in a pop-up immediately on page load: image

also the config.devServer.port field in rspack.config.js should be respected, and port 4200 shouldn't be listed in the yarn start output (I think, this is unclear to me at least why that port is listed).

GitHub Repo

https://github.com/dangbert/nxwarningdemo

Steps to Reproduce

git clone git@github.com:dangbert/nxwarningdemo.git && cd nxwarningdemo/
yarn && yarn start

then visit localhost:8080 and check the browser console logs

Alternatively you can npx create-nx-workspace@latest nxwarningdemo --preset=@nx/rspack --package-manager=yarn instead of cloning my repo (which was created on Sept 22, 204 using the above command)

Nx Report

$ npx nx report

 NX   Report complete - copy this into the issue template

Node           : 18.19.1
OS             : linux-x64
Native Target  : x86_64-linux
yarn           : 1.22.22

nx                 : 19.8.0
@nx/js             : 19.8.0
@nx/jest           : 19.8.0
@nx/linter         : 19.8.0
@nx/eslint         : 19.8.0
@nx/workspace      : 19.8.0
@nx/cypress        : 19.8.0
@nx/devkit         : 19.8.0
@nx/eslint-plugin  : 19.8.0
@nx/react          : 19.8.0
@nrwl/tao          : 19.8.0
@nx/web            : 19.8.0
@nx/webpack        : 19.8.0
typescript         : 5.5.4
---------------------------------------
Community plugins:
@nx/rspack : 19.7.1

Failure Logs

[webpack-dev-server] Warnings while compiling. index.js:488
[webpack-dev-server] WARNING
  ⚠ DefinePlugin:
  │ Conflicting values for 'process.env.NODE_ENV' ("'development'" !== "\"development\"")

Package Manager Version

No response

Operating System

Additional Information

I will make a separate issue for the port configuration problem if desired, let me know

samtsai commented 6 hours ago

Port issue seems to be the same as: https://github.com/nrwl/nx-labs/pull/422

Once #27969 gets merged, I'll open a PR for it in this main nx repo.