Parcel 2.11.0 and ChartJS incompatibility

[samjarrett]

🐛 bug report

Hello, I think this is a re-surfacing of #8792 with Parcel 2.11.x. Chart.JS 4.4.1 and parcel 2.11.0 seem to produce

ReferenceError: $e24bb3f4f01060dd$exports is not defined

on production builds.

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

package.json:

{
  "name": "cost-management-static",
  "version": "1.0.0",
  "license": "ISC",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "@types/chart.js": "^2.9.41",
    "@types/node": "20.11.17",
    "@types/prettier": "^3.0.0",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "parcel": "~2.11.0",
    "postcss": "^8.4.35",
    "prettier": "^3.2.5",
    "process": "^0.11.10",
    "source-map-support": "^0.5.21",
    "tailwindcss": "^3.4.1",
    "ts-node": "^10.9.2",
    "typescript": "~5.3.3"
  },
  "dependencies": {
    "chart.js": "^4.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "speed-date": "^1.0.0",
    "swr": "^2.2.4",
    "wouter": "^2.12.1"
  }
}

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.json": ["@parcel/transformer-raw"]
  }
}

command:

npm run build

Note: parcel in dev mode seems to work fine. It's only when this is compiled for production use that it causes the error.

🤔 Expected Behavior

It should be consistent with 2.10.2 and render correctly.

😯 Current Behavior

Page bails with an error

react-dom.production.min.js:189 ReferenceError: $e24bb3f4f01060dd$exports is not defined
    at Chart.tsx:56:19
    at sJ (react-dom.production.min.js:244:332)
    at o0 (react-dom.production.min.js:286:111)
    at react-dom.production.min.js:283:409
    at oJ (react-dom.production.min.js:283:486)
    at oB (react-dom.production.min.js:273:439)
    at rc (react-dom.production.min.js:127:105)
    at react-dom.production.min.js:267:273

💻 Code Sample

Chart.tsx referenced above is fairly basic - rendering a line chart of costs over time

import * as ChartJS from "chart.js/auto";
import * as React from "react";

interface ChartProps {
  readonly costCentre: CostCentre;
  readonly months: Month[];
}
export const Chart = ({ costCentre, months }: ChartProps) => {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const randomColors = drawTwoColours();
    const chart = new ChartJS.Chart(canvasRef.current!, {
      type: "line",
      data: {
        labels: months.map((month) => monthFormat(new Date(month.month))),
        datasets: [
          {
            label: "Total",
            data: months.map(
              (month) => month.costs[costCentre.code]?.total ?? 0
            ),
            yAxisID: "y",
            borderColor: "rgb(214 211 209)" /* bg-stone-300 */,
            backgroundColor: "rgb(231 229 228)" /* bg-stone-200 */,
            hidden: true,
          },
          {
            label: "Usage",
            data: months.map(
              (month) => month.costs[costCentre.code]?.usage ?? 0
            ),
            yAxisID: "y",
            ...randomColors.one,
          },
          {
            label: "Marketplace",
            data: months.map(
              (month) => month.costs[costCentre.code]?.marketplace ?? 0
            ),
            yAxisID: "y",
            ...randomColors.two,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });

    return function cleanup() {
      chart.destroy();
    };
  }, [canvasRef, months]);

  return (
    <div className="w-full h-52 mb-6">
      <canvas className="w-full h-70" ref={canvasRef} />
    </div>
  );
};

[MylesWardell]

I am experiencing the same error for @mui/material with baseClockPoint is not defined when attempting to update package

[kobaj]

I'm also experiencing this issues with react-tooltip, I get the error $d16c9053f2285eda$exports is not defined on parcel 2.11.0 and also parcel 2.10.3 (whereas it worked previously in parcel 2.8.3).

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.