错误：在 /app/node_modules/chart.js/package.json 中没有使用 nextjs 和 chartjs 定义“导出”主要内容

Question

我正在尝试使用 nextjs、react-chartjs-2 和 chartjs-plugin-zoom 实现缩放行为。

这是我的 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"
  }
}

和我的 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"]
}

我相信我在 tsconfig.json 上的编译器选项有一些错误，但我无法弄清楚。

我没有粘贴我的 chartjs 代码来重现我的问题，我所做的只是像这样注册缩放插件：

import zoomPlugin from 'chartjs-plugin-zoom';

Chart.register(
  zoomPlugin
);

您可以在此处重现该问题： https ://stackblitz.com/edit/nextjs-yqgjsf?file=pages/index.js

Answer 1

经过无数小时的反复试验，我通过注册这样的插件来修复错误：

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