import zoomPlugin from 'chartjs-plugin-zoom' causing GET 500 Error but still working
skorphil opened this issue · 2 comments
skorphil commented
Hi, in NextJS import zoomPlugin from 'chartjs-plugin-zoom' cause GET http://localhost:3000/ 500 (Internal Server Error) while continue to work normally.
<!DOCTYPE html>
<html id="__next_error__">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack.js"/>
<script src="/_next/static/chunks/main-app.js" async=""></script>
<script src="/_next/static/chunks/app-pages-internals.js" async=""></script>
<meta name="robots" content="noindex"/>
<meta name="next-error" content="not-found"/>
<title>piggy tracker</title>
<meta name="description" content="222"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<meta name="next-size-adjust"/>
<script src="/_next/static/chunks/polyfills.js" noModule=""></script>
</head>
<body>
<script src="/_next/static/chunks/webpack.js" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/app/layout.css?v=1700923517134\",\"style\"]\n0:\"$L3\"\n"])
</script>
<script>
self.__next_f.push([1, "4:HL[\"/_next/static/css/app/page.css?v=1700923517134\",\"style\"]\n"])
</script>
<script>
self.__next_f.push([1, "5:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n7:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\n8:I[\"(app-pages-browser)/./node_modules/@mantine/core/esm/core/MantineProvider/ColorSchemeScript/ColorSchemeScript.mjs\",[\"app/page\",\"static/chunks/app/page.js\"],\"ColorSchemeScript\"]\n9:I[\"(app-pages-browser)/."])
</script>
<script>
self.__next_f.push([1, "/node_modules/@mantine/core/esm/core/MantineProvider/MantineProvider.mjs\",[\"app/page\",\"static/chunks/app/page.js\"],\"MantineProvider\"]\na:I[\"(app-pages-browser)/./src/theme.ts\",[\"app/layout\",\"static/chunks/app/layout.js\"],\"theme\"]\nb:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js\",[\"app-pages-internals\",\"static/chunks/app-pages-internals.js\"],\"\"]\nc:I[\"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js\",[\"app-pages-internals\",\"stati"])
</script>
<script>
self.__next_f.push([1, "c/chunks/app-pages-internals.js\"],\"\"]\ne:I[\"(app-pages-browser)/./src/components/SummaryChart/SummaryChart.jsx\",[\"app/page\",\"static/chunks/app/page.js\"],\"SummaryChart\"]\n"])
</script>
<script>
self.__next_f.push([1, "3:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/app/layout.css?v=1700923517134\",\"precedence\":\"next_static/css/app/layout.css\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"development\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/\",\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialHead\":[false,\"$L6\"],\"globalErrorComponent\":\"$7\",\"children\":[null,[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"$L8\",null,{}],[\"$\",\"link\",null,{\"rel\":\"shortcut icon\",\"href\":\"/favicon.svg\"}],[\"$\",\"meta\",null,{\"name\":\"viewport\"}]]}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$L9\",null,{\"theme\":\"$a\",\"children\":[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"initialChildNode\":[\"$Ld\",[\"$\",\"main\",null,{\"children\":[\"$\",\"$Le\",null,{}]}],null],\"childPropSegment\":\"__PAGE__\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/app/page.css?v=1700923517134\",\"precedence\":\"next_static/css/app/page.css\",\"crossOrigin\":\"$undefined\"}]]}]}]}]]}],null]}]]\n"])
</script>
<script>
self.__next_f.push([1, "6:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"piggy tracker\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"222\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"meta\",\"5\",{\"name\":\"next-size-adjust\"}]]\nd:null\n"])
</script>
<script>
self.__next_f.push([1, ""])
</script>
</body>
</html>
FlorysiakSimon commented
using dynamic import should fix the error 500
trungnguyeenpak commented
chartjs-zoom-plugin cannot be used for SSR.
I think if you use NoRss or dynamic/import the error will go away.
reactchartjs/react-chartjs-2#43 (comment)