nrwl
nx graph file output html RangeError: Invalid string length
Current Behavior
When I try to execute the command yarn nx graph --file=./index.html I got this error :
RangeError: Invalid string length
at JSON.stringify (<anonymous>)
at buildEnvironmentJs (/node_modules/nx/src/command-line/graph/graph.js:74:70)
at Object.generateGraph (/node_modules/nx/src/command-line/graph/graph.js:223:35)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.handler (/node_modules/nx/src/command-line/graph/command-object.js:20:30)
Expected Behavior
The command should generate the html output. It works with json files.
GitHub Repo
No response
Steps to Reproduce
- yarn nx graph --file=./index.html
Nx Report
> NX Report complete - copy this into the issue template
Node : 20.9.0
OS : darwin-arm64
yarn : 1.22.19
nx : 17.2.3
@nx/js : 17.2.3
@nrwl/js : 14.8.9
@nx/jest : 17.2.3
@nrwl/jest : 14.8.9
@nx/linter : 17.2.3
@nx/eslint : 17.2.3
@nx/workspace : 17.2.3
@nrwl/workspace : 14.8.9
@nx/cypress : 17.2.3
@nrwl/cypress : 14.8.9
@nx/devkit : 17.2.3
@nrwl/devkit : 14.8.9
@nx/eslint-plugin : 17.2.3
@nx/express : 17.2.3
@nx/nest : 17.2.3
@nx/next : 17.2.3
@nx/node : 17.2.3
@nx/plugin : 17.2.3
@nx/react : 17.2.3
@nx/rollup : 17.2.3
@nx/storybook : 17.2.3
@nrwl/tao : 17.2.3
@nx/web : 17.2.3
@nx/webpack : 17.2.3
@nrwl/webpack : 14.8.9
typescript : 5.2.2
---------------------------------------
Community plugins:
@jscutlery/semver : 2.26.0
@nrwl/remix : 14.7.0
@nx-plus/docusaurus : 15.0.0-rc.0
@nx-tools/nx-container : 4.0.2
---------------------------------------
Local workspace plugins:
@tozzi/tools/i18n
@tozzi/workspace-plugin
---------------------------------------
The following packages should match the installed version of nx
- @nrwl/[email protected]
- @nrwl/[email protected]
- @nrwl/[email protected]
- @nrwl/[email protected]
- @nrwl/[email protected]
- @nrwl/[email protected]
To fix this, run `nx migrate [email protected]`
Failure Logs
RangeError: Invalid string length
at JSON.stringify (<anonymous>)
at buildEnvironmentJs (/node_modules/nx/src/command-line/graph/graph.js:74:70)
at Object.generateGraph (/node_modules/nx/src/command-line/graph/graph.js:223:35)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.handler (/node_modules/nx/src/command-line/graph/command-object.js:20:30)
Package Manager Version
No response
Operating System
- [X] macOS
- [ ] Linux
- [ ] Windows
- [ ] Other (Please specify)
Additional Information
No response
A repro would help a lot in our investigation. The error could be due to JSON.stringify not being able to handle a large payload, but I need to confirm that is indeed the case since I haven't run into this limit yet on some pretty large monorepos.
I also notice old @nrwl/ scoped packages, you can safely remove them.
Sadly I can't share a reproduction for you, but it's quite large monorepo with 103 projects inside
Yes nx graph is working fine. If I do nx graph --file=./index.json it works as well, it's really specific to the html output
Yes --file=output.json is working fine, just the HTML output seems broken. The json is generated in 0.80s, the HTML takes minutes and then crash.
Hi @jaysoo I have the same problem, in my case too my monorepo have more than 100 projects, I can easily generate the json output, but when I try to generate the html output it fails and timeout with the same error message.
If we share with you the json output, would it allow you to try the thing in your side?
RangeError: Invalid string length
at JSON.stringify (<anonymous>)
at buildEnvironmentJs (/node_modules/nx/src/command-line/graph/graph.js:74:70)
at Object.generateGraph (/node_modules/nx/src/command-line/graph/graph.js:223:35)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.handler (/node_modules/nx/src/command-line/graph/command-object.js:20:30)
The JSON is too big for json stringify, even when using an "optimized" version it still fail because the generated string is too big :
function JSONstringifyOptimized(obj) {
if (Array.isArray(obj)) {
return '[' +
obj.map( (value) => {
return JSONstringifyOptimized(value);
}).join(', ') +
']';
} else if (obj && typeof obj === 'object') {
return Object.keys(obj).length === 0
? '{}'
: '{' +
Object.keys(obj).map( (key) => {
return '"key"' + ': ' +
JSONstringifyOptimized(obj[key]);
}).join(', ') +
'}';
}
return obj;
}
function buildEnvironmentJs(exclude, watchMode, localMode, depGraphClientResponse, taskGraphClientResponse, expandedTaskInputsReponse, sourceMapsResponse) {
let environmentJs = `window.exclude = ${JSONstringifyOptimized(exclude)};
window.watch = ${!!watchMode};
window.environment = 'release';
window.localMode = '${localMode}';
window.appConfig = {
showDebugger: false,
showExperimentalFeatures: false,
workspaces: [
{
id: 'local',
label: 'local',
projectGraphUrl: 'project-graph.json',
taskGraphUrl: 'task-graph.json',
taskInputsUrl: 'task-inputs.json',
sourceMapsUrl: 'source-maps.json'
}
],
defaultWorkspaceId: 'local',
};
`;
if (localMode === 'build') {
environmentJs += `window.projectGraphResponse = ${JSONstringifyOptimized(depGraphClientResponse)};
`;
environmentJs += `window.taskGraphResponse = ${JSONstringifyOptimized(taskGraphClientResponse)};
`;
environmentJs += `window.expandedTaskInputsResponse = ${JSONstringifyOptimized(expandedTaskInputsReponse)};`;
environmentJs += `window.sourceMapsResponse = ${JSONstringifyOptimized(sourceMapsResponse)};`;
}
else {
environmentJs += `window.projectGraphResponse = null;`;
environmentJs += `window.taskGraphResponse = null;`;
environmentJs += `window.expandedTaskInputsResponse = null;`;
environmentJs += `window.sourceMapsResponse = null;`;
}
return environmentJs;
}
@jaysoo It might be caused by this commit https://github.com/nrwl/nx/commit/75cc561e9d28368c8f827ed62ba9f8f08fabff67 , now there is the source map displayed and it might be too big if you have a lot of project.
Hey!
I've tried reproducing the issue but interestingly haven't managed yet. For the record I've created a repo with over 550 projects & 70 targets each. The environment.js that is generated was more than 230MB large.
Could you reproduce the error again and tell me exactly on which call is causing the issue? Is it the expandedTaskInputsReponse or the sourceMapsResponse? Then I can maybe repro it better myself.
Hey! Just checked and it fail at the JSON.stringify of the expandedTaskInputsReponse
Same issue for us too
Monrepo of +300 projects & 5-10 tasks per each & some 4 env for build & serve
It's taking around 15 minutes to generate the object at createExpandedTaskInputResponse(), then fail on the JSON.strigify() for the window.expandedTaskInputsResponse, with the same error:
RangeError: Invalid string length
at JSON.stringify (<anonymous>)
at buildEnvironmentJs (**/node_modules/nx/src/command-line/graph/graph.js:74:70)
at Object.generateGraph (**/node_modules/nx/src/command-line/graph/graph.js:223:35)
at async Object.handler (**/node_modules/nx/src/command-line/graph/command-object.js:20:30)
Only when using --file=*.html, serve localhost graph and JSON file are working fine
@MaxKless @jaysoo did any of your got to reproduce it or suggest an alternative?
Please notice my message above https://github.com/nrwl/nx/issues/20734#issuecomment-2327412355
Hey, sorry for the long wait. I haven't managed to repro it yet even in a huge repo with lots of projects. I guess i just don't have enough yet? I'll have to construct a larger repo
I was getting the same issue and the following fixed it for me.
npx nx reset
npm i
npx nx graph
Thanks @christo8989, running npx nx reset fixed this issue for me as well. Took me a while to find this issue though. Would be great if the root issue could be fixed.
