[Bug]: No "exports" main defined in react-chartjs-2

[dfortem]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I am using chart.js and react-chartjs-2 in a Next.js app with the latest versions:
chart.js: v4.1.0 and react-chartjs-2: v5.0.1.

Here is my component:

import { Line } from "react-chartjs-2";

export function LineChart() {
  const { theme } = useThemeUI();

  const data = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [{
      data: [
        1034,
        912814618,
        5274032620,
        6003627234,
        8123816903,
        10002538129,
        22351271232,
        31600091837,
        35001234553,
        40012144202,
        45000382956,
        60000043234
      ],
      tension: 0,
      borderWidth: 2,
      fill: "start",
    }]
  };

  return  (<div>
    <h1>Number of records History</h1>
      <Line
        data={data}
        width={100}
        height={50}
        options={undefined}
      />
    </div>);
}

Compilation has no issue but when I access a page with a chart I get this Server error:

error - Error: No "exports" main defined in /Users/.../repository/node_modules/react-chartjs-2/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:453:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:669:7)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.call (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/Users/Daniel/Documents/TokenFlow/Repos/landing/node_modules/next/build/webpack/require-hook.ts:23:28)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/Daniel/Documents/TokenFlow/Repos/landing/.next/server/pages/stats.js:122:15
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED',
  page: '/stats'
}

I tried many different things such as adding @ts-ignoreabove the import statement but it didn't work. I also tried adding "type": "modules" in my package.json but it breaks the app.

I eventually downgraded to the following versions: chart.js v3.5.0 and react-chartjs-2 v4.3.1 and the issue went away.

Any idea if the new versions will work eventually with a Next.js app?

Reproduction

Create a next.js app (v.13.0.6) and add the given component above.

chart.js version

v4.1.0

react-chartjs-2 version

v5.0.1

Possible solution

No response

[dangreen]

@dfortem Hi. Please read:

https://react-chartjs-2.js.org/docs/migration-to-v5

https://react-chartjs-2.js.org/faq/esm-only