run time error: chroma__default.default.scale is not a function

[bjchris32]

After installing package, I tried to use the package in my application, but I got an error.

Uncaught runtime errors:
ERROR
chroma__default.default.scale is not a function
TypeError: chroma__default.default.scale is not a function
    at createColorScale (http://localhost:4001/static/js/bundle.js:51458:34)
    at createDefaultTheme (http://localhost:4001/static/js/bundle.js:51425:12)
    at createTheme (http://localhost:4001/static/js/bundle.js:51411:24)
    at http://localhost:4001/static/js/bundle.js:51485:17
    at renderWithHooks (http://localhost:4001/static/js/bundle.js:65155:22)
    at updateForwardRef (http://localhost:4001/static/js/bundle.js:68404:24)
    at beginWork (http://localhost:4001/static/js/bundle.js:70465:20)
    at HTMLUnknownElement.callCallback (http://localhost:4001/static/js/bundle.js:55411:18)
    at Object.invokeGuardedCallbackDev (http://localhost:4001/static/js/bundle.js:55455:20)
    at invokeGuardedCallback (http://localhost:4001/static/js/bundle.js:55512:35)

The following is my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@fontsource/roboto": "^5.0.14",
    "@mui/icons-material": "^6.0.0",
    "@mui/material": "^6.0.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.104",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "axios": "^1.7.3",
    "react": "^18.3.1",
    "react-activity-calendar": "^2.4.0",
    "react-dom": "^18.3.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"
    ]
  }
}

The snippet of the package-lock.json with dependencies is as followed:

...
    "node_modules/@types/chroma-js": {
      "version": "2.4.4",
      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.4.tgz",
      "integrity": "sha512-/DTccpHTaKomqussrn+ciEvfW4k6NAHzNzs/sts1TCqg333qNxOhy8TNIoQCmbGG3Tl8KdEhkGAssb1n3mTXiQ==",
      "license": "MIT"
    },
...

I do not know the root cause, but I resolved the issue by first install chroma-js with specific version.
Then, install react-activity-calendar.

npm install chroma-js@2.4.2
npm install react-activity-calendar

Lastly, my application is able to use the react-activity-calendar now.

Question 1: I am unsure about the root cause. Anyone to pinpoint the error?
Question 2: To prevent from error for now, should we update the package.json to restrict people from using chroma-js@2.4.4 temporarily?

Thank you!

[grubersjoe]

Please get into the habit of searching for the error in the existing issues first. This exact problem has been discussed here already: #105

[BenGWeeks]

"react-activity-calendar": "^2.4.0",

For reference, and for others who come upon this, you can go up to "react-activity-calendar": "2.5.1" before the dependency gets bumped from 'chroma-js': '^2.4.2' to 'chroma-js': '^3.1.1' (you shouldn't need list the dependency on chroma-js@2.4.2 directly)

Ref: BenGWeeks/Zapp.ie#39

[grubersjoe]

Additional note: Since v2.6.0 chroma.js no longer is a dependency. So that also should improve compatibility with CRA. CRA, however, is not officially supported for the reasons described in the README.

[BenGWeeks]

Thanks @grubersjoe

[BenGWeeks]

I did try v2.6.0 and v2.6.1 but I get:

dateFns.parseISO is not a function
TypeError: dateFns.parseISO is not a function
    at validateActivities (http://localhost:3000/static/js/bundle.js:47642:34)
    at http://localhost:3000/static/js/bundle.js:47920:3
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:61581:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:64830:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:66891:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:51837:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:51881:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:51938:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:71836:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:71084:16)

Where:

$ npm ls date-fns
tabs@0.1.0 C:\Users\benwe\.....\GitHub\Zapp.ie\tabs
└─┬ react-activity-calendar@2.6.1
  └── date-fns@4.1.0

[grubersjoe]

date-fns is ES modules first since v4. They still provide CommonJS modules via .cjs files but then you run into the same issue that CRA is unable to handle those.

I just tried this out with a fresh project created with CRA. If you use the overrides field to downgrade the date-fns version to v3 it works. Still, I would not recommend that and rather migrate to something like Vite. This is easier than it sounds. CRA is really outdated and has issues.