nrwl
Unexpected behavior with next build executor and outputPath. Resulting in vercel deployment error: "routes-manifest.json couldn't be found"
Current Behavior
When my Next's project configuration points to an output path in the dist folder at the root of the monorepo I end up with part of my build output in the correct dist folder (the nx part) and the other part (the next.js files, the actual applization) ends up in the .next folder within my project.
The command I am using is: npx nx build dora-whitelabel-web-app --prod --verbose --skip-nx-cache
Here is my project.json:
{
"name": "dora-whitelabel-web-app",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/dora-whitelabel-web-app",
"projectType": "application",
"tags": [],
"targets": {
"build": {
"executor": "@nx/next:build",
"outputs": [
"{options.outputPath}",
"{options.outputPath}/.next/**",
"!{options.outputPath}/.next/cache/**"
],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/apps/dora-whitelabel-web-app"
},
"configurations": {
"development": {
"outputPath": "dist/apps/dora-whitelabel-web-app/"
},
"production": {
"outputPath": "dist/apps/dora-whitelabel-web-app/"
}
}
},
"serve": {
"executor": "@nx/next:server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "dora-whitelabel-web-app:build",
"dev": true
},
"configurations": {
"development": {
"buildTarget": "dora-whitelabel-web-app:build:development",
"dev": true
},
"production": {
"buildTarget": "dora-whitelabel-web-app:build:production",
"dev": false
}
}
},
"export": {
"executor": "@nx/next:export",
"options": {
"buildTarget": "dora-whitelabel-web-app:build:production"
}
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "apps/dora-whitelabel-web-app/jest.config.ts"
}
},
"lint": {
"executor": "@nx/eslint:lint",
"outputs": ["{options.outputFile}"]
}
}
}
And the output folders look like this:
The project's folder:
The dist folder:
As a result of this my deployments to Vercel using the CLI are failing with the error:
Error: The file "/vercel/path0/dist/apps/dora-whitelabel-web-app/.next/routes-manifest.json" couldn't be found. This is often caused by a misconfiguration in your project.
Solution:
point the output path to the .next file inside the project:
{
"name": "dora-whitelabel-web-app",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/dora-whitelabel-web-app",
"projectType": "application",
"tags": [],
"targets": {
"build": {
"executor": "@nx/next:build",
"outputs": [
"{options.outputPath}",
"{options.outputPath}/.next/**",
"!{options.outputPath}/.next/cache/**"
],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/apps/dora-whitelabel-web-app"
},
"configurations": {
"development": {
"outputPath": "apps/dora-whitelabel-web-app/.next"
},
"production": {
"outputPath": "apps/dora-whitelabel-web-app/.next" //NOTICE HERE I AM POINTING TO THE .NEXT FILE INSIDE THE PROJECT. THIS WAY THE NX AND THE NEXT FILESS END UP IN THE SAME LOCATION
}
}
},
"serve": {
"executor": "@nx/next:server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "dora-whitelabel-web-app:build",
"dev": true
},
"configurations": {
"development": {
"buildTarget": "dora-whitelabel-web-app:build:development",
"dev": true
},
"production": {
"buildTarget": "dora-whitelabel-web-app:build:production",
"dev": false
}
}
},
"export": {
"executor": "@nx/next:export",
"options": {
"buildTarget": "dora-whitelabel-web-app:build:production"
}
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "apps/dora-whitelabel-web-app/jest.config.ts"
}
},
"lint": {
"executor": "@nx/eslint:lint",
"outputs": ["{options.outputFile}"]
}
}
}
Expected Behavior
The output of the build (all of it, NX and Next.js files) should be dropped in the location specified in the outputPath of the project.json
GitHub Repo
No response
Steps to Reproduce
- Create a Next project
- Ensure the outputPath in the project.json points to a folder in the dist file
- Build the app using nx "npx nx build dora-whitelabel-web-app --prod --verbose --skip-nx-cache "
- Notice how the .next files are created in the .next folder inside of the project and not in the dist folder specified in the outputPath of the project.json
Nx Report
nx report
NX @nx-dotnet/core is a v1 plugin.
Nx has recently released a v2 model for project graph plugins. The `processProjectGraph` method is deprecated. Plugins should use some combination of `createNodes` and `createDependencies` instead.
NX @nx-dotnet/core is a v1 plugin.
Nx has recently released a v2 model for project graph plugins. The `processProjectGraph` method is deprecated. Plugins should use some combination of `createNodes` and `createDependencies` instead.
NX Report complete - copy this into the issue template
Node : 21.6.2
OS : darwin-arm64
yarn : 1.22.21
nx : 18.3.2
@nx/js : 18.3.2
@nx/jest : 18.3.2
@nx/linter : 18.3.2
@nx/eslint : 18.3.2
@nx/workspace : 18.3.2
@nx/cypress : 18.3.2
@nx/devkit : 18.3.2
@nrwl/devkit : 15.8.5
@nx/eslint-plugin : 18.3.2
@nx/next : 18.3.2
@nx/react : 18.3.2
@nrwl/tao : 18.3.2
@nx/web : 18.3.2
@nx/webpack : 18.3.2
typescript : 5.4.5
---------------------------------------
Registered Plugins:
@nx-dotnet/core
---------------------------------------
Community plugins:
@nx-dotnet/core : 1.23.0
---------------------------------------
The following packages should match the installed version of nx
- @nrwl/[email protected]
To fix this, run `nx migrate [email protected]`
Failure Logs
No response
Package Manager Version
No response
Operating System
- [X] macOS
- [ ] Linux
- [ ] Windows
- [ ] Other (Please specify)
Additional Information
As a bonus: it seems like the nx cache is not working inside vercel even though in there i do not have the --skip-nx-cache flag.
After you made your changes to project.json
Can you delete your dist/apps/dora-whitelabel-web-app/ and your apps/dora-whitelabel-web-app/.next folders and re-run your build. It should only generate artifacts at specified path based on your configuration.
Meaning only inside apps/dora-whitelabel-web-app/.next
Tried that multiple times without success. The build output continues to be split between dist/apps/dora-whitelabel-web-app/ for NX related files and apps/dora-whitelabel-web-app/.next for next related
Update TLDR
New projects (generated with NX V14). are unable to reproduce the behavior described in this issue. However, my original Next.js project which was generated with and older version of NX does exhibit the problem described in this issue.
Detailed update
Here is an update on this whole saga.
Some context - the dora-whitelabl-web-app has existed since the NX version that used workspace.json. Hence it has gone through many migrations.
Second - this week we added a brand new Next.js project.
When configuring our CI/CD I replicated the configuration that worked in dora-whitelabl-web-app (see issue description. TLDR: setting the output to a .next folder within the project, instead of the dist folder. Something like: apps/new-app/.next). This configuration failed:
- The output of the build ended up in a double nested .next folder (i.e.
apps/new-app/.next/.next/as opposed to theapps/new-app/.nextfolder. However, in the original project this same configuration generates the output inapps/dora-whitelabel-web-app/.next- see screenshot in issue description). - To avoid the double nested problem, I configured the output folder to only
apps/new-app/. However, when I did this apackage.jsonfile was being generated within my project (apps/new-app/package.json).
My first instinct was to set the generatePackageJson option to false in my project.json (which seemed weird as I am using an integrated repo). This of course failed, as this option had nothing to do with my problem.
Solution to this new problem
Finally, I realized the package.json was part of the build output. So I configured the output of the new-app project to the dist folder in the root of the monorepo. This worked! For this project both the nx and the .next files do end up in the correct location.
However, the original dora-whitelabel-web-app continues to exhibit the behavior described in this issue when I set the output to the dist folder (NX filed in the dist folder and .next files in the project folder).
This issue has been automatically marked as stale because more information has not been provided within 7 days. It will be closed in 21 days if no information is provided. If information has been provided, please reply to keep it active. Thanks for being a part of the Nx community! 🙏
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
At least 3 of us are stuck on this still. https://discord.com/channels/1143497901675401286/1193555742909800549 https://discord.com/channels/1143497901675401286/1231841387289513984
This issue has been automatically marked as stale because more information has not been provided within 7 days. It will be closed in 21 days if no information is provided. If information has been provided, please reply to keep it active. Thanks for being a part of the Nx community! 🙏
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.