RangeError: Maximum call stack size exceeded on build after installing @nivo/radial-bar": "^0.83.0

[LironHazan]

Hey!
I just started to use Nivo :) and not sure why, but after installing:
@nivo/radial-bar": "^0.83.0"
I cannot bundle to prod with vite, getting a tsc error,
it didn't happen when installed
"@nivo/line": "^0.83.0",
I also have

        "@nivo/bar": "^0.83.0",
        "@nivo/core": "^0.83.0",

> tsc && cross-env NODE_OPTIONS=--max-old-space-size=8192 P_ENV=production vite build

/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:96888
                throw e;
                ^

RangeError: Maximum call stack size exceeded
    at Object.isPartOfTypeNode (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:11786:30)
    at containsReference (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:52596:53)
    at visitNode (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:24472:24)
    at Object.forEachChild (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:24621:24)
    at containsReference (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:52607:29)
    at visitNode (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:24472:24)
    at Object.forEachChild (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:24657:24)
    at containsReference (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:52607:29)
    at visitNode (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:24472:24)
    at Object.forEachChild (/Users/lironhazan/dev/cloud-apps/services/dashboard/client/node_modules/typescript/lib/tsc.js:24640:24)

using typescript version: "typescript": "^4.5.4",
npm 8.19.3 + node v16.19.1

Will really appreciate any advice

[LironHazan]

@plouc Hey I hope it's ok I'm tagging you, appreciate your effort,
Do you have any lead on why this could happen?

[echarles]

Same issue here with compiling with tsc. Works fine with webpack devserver but fails when with tsc. Will need to look to another lib for now...

[plouc]

@LironHazan, I don't know what could cause that, it would need to be investigated.

[LironHazan]

Thanks, I'm looking into more charts of Nivo, will update if see more issues of if I'll have a lead of the root cause

[LironHazan]

@plouc impressive work on the make file! :)
I've tried to look into the way the lib is built and couldn't find mention to any active typechecking in the rollup config,
I'm not an expert in rollup but maybe using @rollup/plugin-typescript would add the typechecking phase and help tracing such issues?

[Xantier]

This looks to be introduced somewhere in version 0.81.0.
Dependencies

    "@nivo/bar": "^0.80.0",
    "@nivo/core": "^0.80.0",
    "@nivo/pie": "^0.80.0",

Compile properly, though additional type dev dependencies need to be added in:

    "@types/d3-scale": "^4.0.3",
    "@types/d3-color": "^3.1.0",
    "@types/d3-scale-chromatic": "^3.0.0",

Bumping @nivo/ deps to 0.81.0, we'll hit the typescript error (due to some introduced recursive typing?)

[LironHazan]

@Xantier I can't downgrade, it causes other conflicts in the project
Any chart with arcs has the issue, so far we tested:

Pie Chart
Sunburst Chart
Radial Bar Chart

[benellatalon]

The errors seems to be coming from @nivo/arcs

[plouc]

@plouc impressive work on the make file! :) I've tried to look into the way the lib is built and couldn't find mention to any active typechecking in the rollup config, I'm not an expert in rollup but maybe using @rollup/plugin-typescript would add the typechecking phase and help tracing such issues?

Thank you 😊 The type checking is done via pkgs-types, and it's run on CI via:

pkgs-build: pkgs-types ##@1 packages build all packages

Initially @rollup/plugin-typescript didn't support type checking, that's why I used another approach.

[Xantier]

Here is a minimal reproduction: https://github.com/Xantier/nivo-ts-stackoverflow

[Xantier]

Flipping around version on the minimal reproduction, this actually looks to work on 0.81.0 version as well. 0.82.x doesn't build at all so my assumption is that the issue was introduced in 82 or 83

[Jule-]

Hi, same issue here.

I have debugged tsc and it crashes when evaluating this file: @nivo/arcs/dist/types/centers.d.ts.

In fact, when you look at it there is a loooooot of import stuff from @react-spring/*, I am pretty sure this is what is killing the stack.

Can you see a quick fix or workaround for this? 😬

[Jule-]

I think this issue appears due to: #2280 (released in v0.82.0)

[Jule-]

Unfortunately downgrading @react-spring/[email protected] is not enough, maybe a false lead... I think the generation of the centers.d.ts file should be responsible for this issue.

nivo/packages/arcs/src/centers.ts

Lines 54 to 72 in 2671ca4

	const transition = useTransition<
	Datum,
	{
	progress: number
	startAngle: number
	endAngle: number
	innerRadius: number
	outerRadius: number
	} & ExtraProps
	>(data, {
	keys: datum => datum.id,
	initial: phases.update,
	from: phases.enter,
	enter: phases.update,
	update: phases.update,
	leave: phases.leave,
	config: springConfig,
	immediate: !animate,
	})

Maybe if you can type the transition property with a less wordy type than the one generated it could help tsc to compile. And I am not sure if/how we should report this to the @react-spring/web project.

[Jule-]

Same issue here:

nivo/packages/arcs/src/useArcsTransition.ts

Lines 21 to 39 in 2671ca4

	const transition = useTransition<
	Datum,
	{
	progress: number
	startAngle: number
	endAngle: number
	innerRadius: number
	outerRadius: number
	} & ExtraProps
	>(data, {
	keys: datum => datum.id,
	initial: phases.update,
	from: phases.enter,
	enter: phases.update,
	update: phases.update,
	leave: phases.leave,
	config: springConfig,
	immediate: !animate,
	})

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[Jule-]

bump

[acrylicode]

The issue is still there. For anyone interested, I deleted the types folder before running the tsc and it works.
So under node_modules/@nivo/bar there is a types folder. Just delete that. Do the same for all the charts you are using. If you want to get fancy you can wrap the tsc in another command that automatically deletes the types, executes tsc and then reinstalls it again.

[HendrikGrobler]

Bump. This issue is prevent us from using Nivo.

[ashwin-gairola]

@plouc This issue still exists even for @nivo/bar. Providing a large data array is causing ResponsiveBar and ResponsiveBarCanvas to break with the same error message. Can you please address this?

[AdamJPcars]

I am also having the same issue, i noticed that when i delete the "keys" prop, the chart get displayed with empty y-axis data. but if i remove any other prop it still gives me the error en breaks the applications. In that case it might have something to do with the keys prop.

This issue is quite blocking and should be fixed asap, since the point of this library is to show big sets of data.