React 19 Support

[ChrisCrossCrash]

Would you like to work on this feature?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

When I try to install React 19 in my project, I get this warning:

npm warn Could not resolve dependency:
npm warn peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from [email protected]

Describe the solution you'd like

I would like react-chartjs-2 to support React 19 as a peer dependency.

Describe alternatives you've considered

None.

Documentation, Adoption, Migration Strategy

If React 19 can be added as a peer dependency, users should be able to install react-chartjs-2 in a React 19 project without a warning.

[ChrisCrossCrash]

For anyone interested in bringing this project up-to-date for React 19, I've started a fork that keeps the original src/ directory from this project and wraps it in an entirely new React TypeScript project:

https://github.com/ChrisCrossCrash/react-chartjs-3/tree/original-source-code

The linked tag has exactly the same source code as react-chartjs-2, with a slightly different Prettier configuration. It still does not build, but I could not get the original project to build either.

To the maintainers of react-chartjs-2, if you are interested, I will make a PR if I can get it to work. Since it's been over a year since the last commit, I'm just running with the assumption that this project has been abandoned. In any case, thank you for all the hard work you've put into this repository!

[anajavi]

@ChrisCrossCrash I made the tests pass in #1236, I think it builds alright but complains about types

[imjordanxd]

@ChrisCrossCrash what issues does this project actually have with React 19? I had a look at the source code, and it seems fine. A bump in peer deps version might be sufficient and perhaps modifying some of the types.

[Svish]

@imjordanxd Seems to work fine for me after upgrading to React 19, but I do get errors when running type-check on my project:

node_modules/react-chartjs-2/dist/types.d.ts(55,7): error TS2503: Cannot find namespace 'JSX'.
node_modules/react-chartjs-2/dist/types.d.ts(58,7): error TS2503: Cannot find namespace 'JSX'.

Probably related to https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript?

[anajavi]

After fixing the JSX.Element to import from react, there is still one type failure:

src/chart.tsx:48:23 - error TS2345: Argument of type 'Chart<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>' is not assignable to parameter of type 'Chart<TType, TData, TLabel>'.
  Types of property 'config' are incompatible.
    Type 'ChartConfiguration<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown> | ChartConfigurationCustomTypesPerDataset<...>' is not assignable to type 'ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>'.
      Type 'ChartConfiguration<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>' is not assignable to type 'ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>'.
        Type 'ChartConfiguration<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>' is not assignable to type 'ChartConfiguration<TType, TData, TLabel>'.
          Types of property 'type' are incompatible.
            Type 'keyof ChartTypeRegistry' is not assignable to type 'TType'.
              'keyof ChartTypeRegistry' is assignable to the constraint of type 'TType', but 'TType' could be instantiated with a different subtype of constraint 'keyof ChartTypeRegistry'.

48     reforwardRef(ref, chartRef.current);
                         ~~~~~~~~~~~~~~~~


Found 1 error in src/chart.tsx:48

[anajavi]

I managed to fix the types in #1236

So it passes the tests with react 19.
Also it builds and emits type declarations. Appreciate if somebody finds the time to test it.

[ChrisCrossCrash]

@ChrisCrossCrash what issues does this project actually have with React 19? I had a look at the source code, and it seems fine. A bump in peer deps version might be sufficient and perhaps modifying some of the types.

@imjordanxd Sorry for not getting back to you sooner. I was on vacation last week.

I'm not aware of any runtime issues with React 19, but I wasn't really interested in getting it working without properly sorting fixing some of the type issues that prevented it from building correctly. Also, a lot of the tooling for the repository is quite outdated. For example, it requires an old version of PNPM to install everything if you want to use the lock file. That's why I thought it would be easier to start by just copying the src/ directory into a new React TypeScript project. I got as far as I could on that path, and I just thought I'd share my results so that others could possibly build on it. I had thought it might be fun to make a fork of this repository if it's no longer maintained, but I'm not really interested in that anymore.

[ChrisCrossCrash]

@ChrisCrossCrash I made the tests pass in #1236, I think it builds alright but complains about types

Nice @anajavi! Hopefully it will get merged soon! If not, and you or anybody else is interested in maintaining a fork of this repo, I think that would be great!

I managed to fix the types in #1236

So it passes the tests with react 19. Also it builds and emits type declarations. Appreciate if somebody finds the time to test it.

Just saw this too! That's awesome!

A user named @pieterbergwerff made a pull request on my fork that also fixes the TypeScript build errors. It might be worth checking out if you want to see an alternate approach. I'm not planning on maintaining that fork. I'm just throwing it out there in case you would like to see those changes.