nx: fileReplacements no longer work with react and webpack
Current Behavior
When building a react app using @nx/webpack:webpack, file replacements are no longer working. Looks like this commit https://github.com/nrwl/nx/commit/395eb70336cb1346548705d7c41d896b4a6c6cbb is the culprit
Expected Behavior
file replacements should work when building or serving a react application
GitHub Repo
No response
Steps to Reproduce
- Set up a nx workspace with a react app.
- Create a production config using a file replacement
- Build the production config
- Notice that the file replacements do not work
Nx Report
Node : 20.9.0
OS : darwin-arm64
yarn : 3.6.4
nx : 17.1.1
@nx/js : 17.1.1
@nx/jest : 17.1.1
@nx/linter : 17.1.1
@nx/eslint : 17.1.1
@nrwl/linter : 15.9.2
@nx/workspace : 17.1.1
@nx/cypress : 17.1.1
@nx/devkit : 17.1.1
@nx/esbuild : 17.1.1
@nx/eslint-plugin : 17.1.1
@nx/node : 17.1.1
@nx/react : 17.1.1
@nx/storybook : 17.1.1
@nrwl/tao : 17.1.1
@nx/vite : 17.1.1
@nx/web : 17.1.1
@nx/webpack : 17.1.1
typescript : 5.2.2
Failure Logs
No response
Package Manager Version
No response
Operating System
- macOS
- Linux
- Windows
- Other (Please specify)
Additional Information
No response
About this issue
- Original URL
- State: closed
- Created 8 months ago
- Reactions: 24
- Comments: 26 (5 by maintainers)
👋 Hey Nx team,
I want to express the urgency and critical nature of this issue. The problem with file replacements not working in React or Nestjs applications using @nx/webpack:webpack, as highlighted in this thread, is having a severe impact on multiple users, hindering their build and serve processes.
🔍 Observations:
🌐 Community Impact:
👥 Community Confirmation:
📅 Timeline:
🙏 Request:
This bug is affecting a substantial number of users and has become a blocker for those relying on the latest Nx versions in production. Addressing this promptly will have a positive impact on the community and their projects.
Thank you for your attention to this matter.
@jaysoo , any update? It’s critical blocker for use last NX versions on live environments
@AgentEnder Any ETA on the fix?
I am experiencing the same thing, just with a Nest app.
Seems like it works if using relative paths like this
The same is happening for me after migrating from nx 17.0.3 to 17.1.1
Nx Report
same issue. Downgrading to 17.0.3 fixed it for me
I believe we have encountered this issue upon migrating from
nx@17.02tonx@17.1.2with a NodeJS application built with@nrwl/webpack:webpackand served with@nx/js:node, as environment variable values do not appear to be available at runtime unless the values are manually entered intoenvironment.ts.(
@nx/devkit&@nrwl/devkitare not in ourpackage.json, so I’m not sure why they keep showing up even after deletingnode_modulesand runningnpm install.)I think we’re waiting on the release of
nx@17.2.0, @jacqueslareau, as a fix closing the issue was merged intonx@17.20-beta.8, though I have not personally tested.So it appears this format works IF your import looks like
import {} from './environments/environment';however if you use a barrel inenvironments/index.tsthis format doesn’t work and you need to use something like this.Also note: The
replacedoes NOT have.tsObserved the same here: running build with
@nx/webpackexecutor results in artifacts getting created under duplicate “dist” folder. ( e.g. C:\my_repo\dist\dist\libs.… instead of C:\my_repo\dist\libs.…)Note: In our case, it could be due to the fact that we are also using the webpack CopyPlugin
Like mention in the issue 20253, relative paths are no more working. Absolute paths does, but it is not something that I can commit. Thanksfully I’m not yet in production …
I can confirm this is an issue. Downgrading to 17.0.* fixed it for me.