[英]Dependency Not found even defined in package.json and node_modules
[英]Error: No "exports" main defined in /app/node_modules/chart.js/package.json with nextjs and chartjs
我正在嘗試使用 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
經過無數小時的反復試驗,我通過注冊這樣的插件來修復錯誤:
if (typeof window !== 'undefined') {
(async () => {
const { default: zoomPlugin } = await import('chartjs-plugin-zoom');
Chart.register(
zoomPlugin
);
})();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.