Search code examples
typescriptchart.jsreact-chartjsdate-fns

Typescript types for chartjs-adapter-date-fns


My code works but under my import statements I have 2 dots and if I hover over them it shows the error

Could not find a declaration file for module 'chartjs-adapter-date-fns'. '/home/user/dev/website/client/node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/chartjs-adapter-date-fns` if it exists or add a new declaration (.d.ts) file containing `declare module 'chartjs-adapter-date-fns';`ts(7016)

I tried yarn add -D @types/chartjs-adapter-date-fns but that seems not to exist. Is the problem that I am missing the typescript types? How can I get rid of this error?


My import statements just in case:

import {
  CategoryScale,
  Chart as ChartJS,
  Filler,
  Legend,
  LinearScale,
  LineElement,
  PointElement,
  TimeScale,
  Title,
  Tooltip,
} from 'chart.js'
import 'chartjs-adapter-date-fns'
import { enGB } from 'date-fns/locale'
import { Line } from 'react-chartjs-2'
import { useMarketDataQuery } from '../generated/graphql'
import BaseCard from './BaseCard'

Solution

  • You need to specify your own type definitions for this package.

    There are three ways how the library can be typed:

    • Bundled Types
    • DefinitelyTyped / @types
    • Your Own Definitions

    As the types aren't bundled with the chartjs-adapter-date-fns package and there are no @types for it in the DefinitelyTyped repository, the only option you have is to provide your own type definition for this package.

    The easiest way to do it is to add an empty declaration for it in a .d.ts file in your project with the content.

    declare module "chartjs-adapter-date-fns";
    

    It will silence warnings about this module