search

chartjs / chartjs-plugin-zoom

Zoom and pan plugin for Chart.js
MIT License
596 stars 327 forks source link

import zoomPlugin from 'chartjs-plugin-zoom' causing GET 500 Error but still working #799

Open skorphil opened 12 months ago

skorphil commented 12 months ago

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 10 months ago

using dynamic import should fix the error 500

trungnguyeenpak commented 8 months ago

chartjs-zoom-plugin cannot be used for SSR. I think if you use NoRss or dynamic/import the error will go away. https://github.com/reactchartjs/react-chartjs-2/issues/43#issuecomment-253553931