Multiple warnings when using Nivo >= 0.85.0 line chart

[pitininja]

Describe/explain the bug

A bunch of warnings related to default props are thrown in the console after upgrading Nivo to v0.85.0 and using the line chart.

Example of warning :

Warning: Failed prop type: The prop `layers` is marked as required in `We`, but its value is `undefined`.
We@https://8dh6jx.csb.app/node_modules/@nivo/line/dist/nivo-line.es.js:721:11
n@https://8dh6jx.csb.app/node_modules/@nivo/core/dist/nivo-core.es.js:1897:16
div
Jt@https://8dh6jx.csb.app/node_modules/@nivo/core/dist/nivo-core.es.js:1403:11
Pe
div
App

To Reproduce

Sandbox : https://codesandbox.io/p/sandbox/nivo-line-chart-bottom-tick-values-forked-8dh6jx

Steps to reproduce the behavior:

1. Use Nivo >= 0.85.0 (@nivo/core and @nivo/line)
2. Use a ResponsiveLine component without specifying all the available props
3. Open the console and see the multiple warnings

Expected behavior

No warnings in the console because the related props are not required.

Screenshots

Desktop :

• OS: Kubuntu 23.10
• Browser: Firefox 123.0.1
• Version 0.85.0

Additional context

This problem occurs after upgrading to v0.85.0, I didn't had the problem with previous versions.

[ryanmio]

I am having this same issue. Been troubleshooting since yesterday and not found a good fix. I'll stay tuned here.

[GreenAsJade]

^^ that's the likely cause.

[hilyas786]

having the same isssues

[Evirtual]

I can confirm that adding missing props solves the issue.

[GreenAsJade]

Do you mean "adding all the optional props in the client code explicitly"? If so, that's not really a "solution" :)

[hilyas786786]

adding in all the props is the only way to get rid of the console warnings currently

[GreenAsJade]

Or - drop back to the previous version until the bug is fixed 😝

That's what I've done.

[mswezey23]

Damn... well... misery loves company and here we are <3

FML... I migrating from cra/craco to vite and updating all my libs in on shot was not ideal. This wasn't the only lib to break on update. Optimizely had to be downgraded and so did Playwright, both had regressions.

Gonna go back on this one too. PR is already big enough.

[codeams]

if you go back to the previous version you get back to get the "defaultProps" deprecated warning (depending on your version of react).

[codeams]

what could I set as "tooltip" and "sliceTooltip" props to get rid of their warnings without affecting the behavior of the line chart component?

[m3360202]

dude,i've resolve this problem by update nodejs to version 18.0.0 above, i use 18.2.0 now,and this function can render svg/canvas components normally

[m3360202]

it seems that nodejs 17 may trigger this multiple errors

[hilyas786786]

im using node js 21, still get the same console.log warnings

[qm210]

Same.

Can this be interpreted - no offense please - as "the devs do not really use this project themselves (anymore)"? Which can happen everywhere, but in that case, a deprecation warning on the front page would be nice, I guess.

[Ojay]

I'm also experiencing this with @nivo/line 0.85.1 - node V20.11.

Downgrading to @nivo0.84.0 removed a ton of warnings, but introduced the Support for defaultProps error that @codeams mentioned.

[nikitadubyk]

I'm also experiencing this with @nivo/line 0.85.1 - node V20.11.

Downgrading to @nivo0.84.0 removed a ton of warnings, but introduced the Support for defaultProps error that @codeams mentioned.

Same issue

[Magdan4ik]

The same issue here with node 20.11 & @nivo/line 0.85.1.
Any updates?

[codeams]

As the project I'm working on uses TS I suppressed warnings using a hook:

import { useEffect } from 'react'

const useSuppressConsoleWarnings = () => {
  useEffect(() => {
    const originalConsoleWarn = console.error

    console.error = (message, ...args) => {
      if (
        message.includes('Warning: Failed %s type: %s%s')
      ) {
        return
      }
      originalConsoleWarn(message, ...args)
    }

    return () => {
      // Restore original console.error on cleanup
      console.error = originalConsoleWarn
    }
  }, [])
}

export default useSuppressConsoleWarnings

It uses useEffect to ensure the warning is supresed in the client in case you're using server components.

You can bring this hook into components that use @nivo/line.

Hopefully this is resolved soon, but if you take a look at nivo projects in github, you'll notice the intention to move @nivo/line to TS has been open for more than a couple of years. It doesn't seem simple so I don't think this will be resolved in the short term.

Downgrading the react/node version is not a satisfactory solution, as warnings of "defaultProps" being deprecated might appear instead. In fact, the attempt to solve this deprecation warning is what triggered this even more annoying issue.

[GreenAsJade]

Thanks for sharing that. We'll stick on 0.84 till something compelling makes us move, but that's handy to know.

[mib00038]

Unfortunately, 0.84 contains multiple high severity ReDoS vulnerabilities related to the d3-color dependency.

[GreenAsJade]

Great news! Thanks!