Warning: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[MyStarrySpace]

Describe the bug
When using React with Next.JS, I am getting the warning: "Warning: (component name): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead." This occurs for many different components, such as FlyOut, Curve, VictoryLabel, and many others.

Victory version
[email protected]
Which npm version are you using? 9.8.1

Code Sandbox link
Just make the following page in Next.js:

'use client'
import React, { ReactNode, useState, useEffect, useRef } from 'react';
import { VictoryLine, VictoryChart, VictoryTooltip, VictoryVoronoiContainer, VictoryAxis } from 'victory';

function generateSampleData(minAge = 16, maxAge = 100, numSamples = 100) {
    const sampleData = [];
    for (let i = 0; i < numSamples; i++) {
        const age = Math.floor(Math.random() * (maxAge - minAge + 1)) + minAge;
        const completes = Math.floor(Math.random() * 101);  // Replace with an appropriate range for your use case
        sampleData.push({ age, completes });
    }
    return sampleData;
}

export const PlotAgeCompletes = () => {

    const data = generateSampleData();
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true); // doing this to prevent hydration error
    }, [])

    return (
        <>
            {isClient ? (
                <VictoryChart
                    containerComponent={
                        <VictoryVoronoiContainer
                            voronoiDimension="x"
                            labels={({ datum }) => `Age: ${datum.age}, Completes: ${datum.completes}`}
                            labelComponent={
                                <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />
                            }
                        />
                    }
                >
                    <VictoryAxis label="Age" />
                    <VictoryAxis dependentAxis label="Completes" />
                    <VictoryLine
                        data={data}
                        x="age"
                        y="completes"
                    />
                </VictoryChart>
            ) : (
                <div></div>
            )}
        </>
    );
};

export default PlotAgeCompletes;

To Reproduce
Steps to reproduce the behavior:

1. Create a Next.JS project
2. Create a graph with Victory
3. Get the warning in the console

Expected behavior
No warning appears

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro, 64-bit operating system, x64-based processor
• Browser: Google Chrome
• Version: 117.0.5938.92 (Official Build) (64-bit)

[Yomyer]

I have the same problem using NextJS 13 with AppRouter.

[danteyc]

Any update?

[Zhumatic]

same problem here, but the chart is rendering correctly.

[Renatofujimoto]

i have the same issue in the next13, any news?

[carbonrobot]

Just an update on this one. We are working on a solution to removing defaultProps from all components and will release it in multiple minor-point releases.

Internally, Victory uses defaultProps in unique ways to pass values to components that are linked/chained together in a container, so some of the code is difficult to untangle.

Roughly, I will release it with the following plan, over the next couple weeks (depending on holidays)

1. Remove default props from React functional components PR converted all functional components to use default parameters instead of defaultProps #2679
2. Remove default props from Core React Class components
3. Remove default props from remaining components

[carbonrobot]

Released in https://github.com/FormidableLabs/victory/releases/tag/v36.8.1