🐛 bug report

I'm upgrading chart.js from 2.x to 3.x and it causes me problems when im developing (using parcel watch). However, when in production (parcel build) and even when I'm trying the parcel serve it works just fine.

Works:

parcel serve --no-cache --public-url /dist
NODE_ENV=development API_ENDPOINT=http://localhost:8000 parcel build --public-url /dist --no-content-hash --no-optimize --no-cache

Does not work:

parcel watch --public-url /dist
NODE_ENV=development API_ENDPOINT=http://localhost:8000 parcel watch --no-cache --no-hmr --no-content-hash --public-url /dist

🎛 Configuration (.babelrc, package.json, cli command)

Not using babel. My slightly censored package.json:

{
  "source": "index.html",
  "publicUrl": "/dist",
  "scripts": {
    "postinstall": "node ./scripts/post-npm-install.js",
    "parcel:start": "parcel",
    "parcel:build:dev": "rimraf dist && cross-env NODE_ENV=development API_ENDPOINT=http://localhost:8000 parcel build --public-url /dist --no-content-hash --no-optimize --no-cache",
    "parcel:build:dev:minimize": "rimraf dist && cross-env NODE_ENV=development API_ENDPOINT=http://localhost:8000 parcel build --public-url /dist --no-cache",
    "parcel:build": "rimraf dist && cross-env NODE_ENV=production API_ENDPOINT=https://api.XXXXxx.xxx parcel build --public-url /dist",
    "parcel:watch": "rimraf dist && cross-env NODE_ENV=development API_ENDPOINT=http://localhost:8000 parcel watch --no-cache --no-hmr --no-content-hash --public-url /dist",
    "generate:icons": "ts-node ./scripts/generate-icons.ts"
  },
  "dependencies": {
    "@elgorditosalsero/react-gtm-hook": "2.6.0",
    "@jschill/unistore": "3.4.2",
    "@parcel/transformer-sass": "2.7.0",
    "@parcel/transformer-typescript-tsc": "2.7.0",
    "@react-leaflet/core": "1.0.2",
    "@sentry/browser": "7.13.0",
    "@sentry/node": "7.13.0",
    "@types/koa": "2.13.5",
    "@use-cookie-consent/core": "0.3.6",
    "browserslist": "4.21.4",
    "buffer": "6.0.3",
    "chart.js": "3.9.1",
    "classnames": "2.3.2",
    "core-js": "3.25.2",
    "cross-env": "7.0.3",
    "feeder-react-feedback": "0.0.6",
    "formdata-polyfill": "4.0.10",
    "ga-4-react": "0.1.281",
    "isomorphic-fetch": "3.0.0",
    "koa": "2.13.4",
    "koa-static-server": "1.5.2",
    "leaflet": "1.7.1",
    "parcel": "2.2.0",
    "preact": "10.11.0",
    "preact-meta": "0.0.1",
    "preact-render-to-string": "5.1.4",
    "preact-router": "3.2.1",
    "prettier": "2.0.4",
    "react-chartjs-2": "4.3.1",
    "react-dropzone": "8.1.0",
    "react-emojional-feedback": "1.0.1",
    "react-ga": "3.3.0",
    "react-leaflet": "3.1.0",
    "react-leaflet-markercluster": "3.0.0-rc1",
    "react-phone-number-input": "3.2.11",
    "react-responsive-carousel": "3.2.11",
    "react-snowfall": "1.1.1",
    "react-to-print": "2.13.0",
    "react-virtuoso": "1.5.14",
    "rimraf": "3.0.2",
    "tachyons": "4.12.0",
    "tslib": "2.4.0",
    "typescript": "4.8.3"
  },
  "devDependencies": {
    "@svgr/cli": "6.3.1",
    "@svgr/core": "6.3.1",
    "@svgr/plugin-prettier": "6.3.1",
    "@svgr/plugin-svgo": "6.3.1",
    "@types/glob": "^8.0.0",
    "@types/leaflet": "1.7.6",
    "@types/react-leaflet-markercluster": "2.0.0",
    "@types/react-phone-number-input": "3.0.6"
  },
  "prettier": {
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 120
  },
  "alias": {
    "actions/*": "./src/shared/actions/$1",
    "api/*": "./src/shared/api/$1",
    "components/*": "./src/shared/components/$1",
    "constants/*": "./src/shared/constants/$1",
    "containers/*": "./src/shared/containers/$1",
    "helpers/*": "./src/shared/helpers/$1",
    "hoc/*": "./src/shared/hoc/$1",
    "hooks/*": "./src/shared/hooks/$1",
    "styles/*": "./src/shared/styles/$1",
    "routes/*": "./src/shared/routes/$1",
    "types": "./src/shared/types",
    "unistore": "./node_modules/@jschill/unistore",
    "unistore/preact": "./node_modules/@jschill/unistore/preact",
    "react": "./node_modules/preact/compat",
    "react-dom": "./node_modules/preact/compat",
    "@date-io/date-fns": "../node_modules/@date-io/date-fns",
    "date-fns": "../node_modules/date-fns",
    "@material-ui/styles": "../node_modules/@material-ui/styles",
    "@material-ui/core": "../node_modules/@material-ui/core",
    "@material-ui/icons": "../node_modules/@material-ui/icons",
    "preact": "./node_modules/preact",
    "yup": "../node_modules/yup",
    "query-string": "../node_modules/query-string",
    "components": "./src/shared/components",
    "file-saver": "../node_modules/file-saver",
    "process": false,
    "buffer": false,
    "chartjs": "./node_modules/chart.js",
    "chartjs/*": "./node_modules/chart.js/$1"
  },
  "overrides": {
    "react": "18.2.0",
    "react-dom": "17.0.2"
  },
  "@parcel/transformer-css": {
    "errorRecovery": true
  },
  "@parcel/bundler-default": {
    "minBundles": 1,
    "minBundleSize": 30000,
    "maxParallelRequests": 5
  },
  "browserslist": [
    "> 0.2%"
  ]
}

🤔 Expected Behavior

I expected the difference between parcel watch and parcel serve was the built in dev server when using parcel serve but it seems like it treats dependencies differently.

😯 Current Behavior

When using watch: The error message: RangeError: Maximum call stack size exceeded ..and it's pointing to this line in the code.

...
  set(scope, values) {
    return set(this, scope, values);
  }
...

💁 Possible Solution

A temp fix for me would be to switch to using parcel serve instead of parcel watch, but doesnt feel that good to have to run a complete dev server in the background, taking up an extra port etc. My poor mac is on its knees as it is :-)

🔦 Context

💻 Code Sample

My index.ts which is the only file transpiled:

import 'chart.js';
console.log('hello world');

🌍 Your Environment

Software	Version(s)
Parcel	2.7.0 and 2.2.0
Node	16.17
npm/Yarn	8.15
Operating System	macOS 12.6

parcel-bundler / parcel

chart.js v3.x does not work in watch mode #8513