Error: No "exports" main defined in /app/node_modules/chart.js/package.json with nextjs and chartjs

Question

I am trying to implement zoom behavior using nextjs, react-chartjs-2 and chartjs-plugin-zoom.

Here is my package.json:

{
  "dependencies": {
    "@auth0/nextjs-auth0": "^2.0.1",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@types/node": "18.11.13",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "chart.js": "^4.0.1",
    "chartjs-plugin-zoom": "^2.0.0",
    "classnames": "^2.3.2",
    "eslint": "8.29.0",
    "eslint-config-next": "13.0.6",
    "next": "13.0.6",
    "nextjs-progressbar": "0.0.16",
    "react": "18.2.0",
    "react-chartjs-2": "^5.0.1",
    "react-cookie-consent": "^8.0.1",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "@types/chart.js": "^2.9.37",
    "autoprefixer": "^10.4.13",
    "moment": "^2.29.4",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4"
  }
}

and my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext", "ES2015"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "helpers/index.js"],
  "exclude": ["node_modules"]
}

I believe there is some error on my compiler options on tsconfig.json but I couldn't figure it out.

I didn't paste my chartjs code as to reproduce my problem, all I did was to register the zoom plugin like that:

import zoomPlugin from 'chartjs-plugin-zoom';

Chart.register(
  zoomPlugin
);

Here is you can reproduce the issue: https://stackblitz.com/edit/nextjs-yqgjsf?file=pages/index.js

Answer 1

After countless hours of trial and error, I fixed the error by registering plugins like this:

if (typeof window !== 'undefined') {
  (async () => {
    const { default: zoomPlugin } = await import('chartjs-plugin-zoom');
    Chart.register(
      zoomPlugin
    );
  })();
}