Uncaught TypeError: chroma__default.default.scale is not a function in theme.ts:65

[franky358]

Hi.
I am encountering an error when using react-activity-calendar in a React with TypeScript project. The error appears in the browser console and is as follows:

theme.ts:65 Uncaught TypeError: chroma__default.default.scale is not a function at createColorScale (theme.ts:65:1) at createDefaultTheme (theme.ts:25:1) at createTheme (theme.ts:6:1) at ActivityCalendar.tsx:192:1 at renderWithHooks (react-dom.development.js:15486:1) at updateForwardRef (react-dom.development.js:19245:1) at beginWork (react-dom.development.js:21675:1) at beginWork$1 (react-dom.development.js:27465:1) at performUnitOfWork (react-dom.development.js:26596:1) at workLoopSync (react-dom.development.js:26505:1)

Could you help me please?

[grubersjoe]

Hey. What kind of framework/bundler are you using? Next.js, Remix, Astro? Vite, Webpack?

Also please post how you wanted to render the component (the props you passed).

[franky358]

Hi!

I'm using create-react-app. Here's the component I wanted to render:

import React from "react";

import ActivityCalendar from "react-activity-calendar";

const data = [
  {
    date: "2023-06-14",
    count: 2,
    level: 1,
  },
  {
    date: "2023-06-22",
    count: 16,
    level: 3,
  },
];

const Calendar: React.FC = () => <ActivityCalendar data={data} />;

export default Calendar;

And here is my package.json:

{
  "name": "semillero-de-fe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/chroma-js": "^2.4.3",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.104",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-select": "^5.0.1",
    "chroma-js": "^2.4.2",
    "lottie-react": "^2.4.0",
    "react": "^18.3.1",
    "react-activity-calendar": "^2.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.4.7"
  }
}

I appreciate your response!

[grubersjoe]

Apparently, the issue stems from CRA not supporting libraries that distribute CommonJS files with .cjs extension like chroma.js does. There is at last one issue and a MR adressing this, but it seems unlikely that CRA will support this any time soon. There are workarounds to override the Webpack config, though.

But honestly apparently CRA is pretty much dead anyways. There's also an insightful answer from @gaearon about its future. Personally, I would suggest you use Vite instead. It's powerful, up-to-date and offers everything that CRA does and more.