I'm currently working on implementing zoom functionality in my project using Next.js, React-Chartjs-2, and Chartjs-plugin-zoom.
Below is the content of my package.json file:
{
"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"
}
}
In addition, here is my tsconfig.json file:
{
"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 suspect there may be an issue with the compiler options in my tsconfig.json file, but I haven't been able to identify it yet.
As for the chartjs code, I haven't included it here to replicate the problem. All I've done is register the zoom plugin like this:
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(
zoomPlugin
);
If you'd like to see how the issue can be reproduced, please visit the following link: https://stackblitz.com/edit/nextjs-yqgjsf?file=pages/index.js