1

I am currently moving from craco (react-scripts) to Next.js but I have a problem in the build step. If I run the app in development it works perfectly but when I try to build it I get an error on the "Collecting page data", I tried

  • Updating Nodejs from 14 to 16 (also npm)
  • I reinstalled all the packages multiple times in different ways
  • Also tried installing an older version of chart.js but it seems it breaks other things
  • Removing any reference to chart.js (this is the only thing that works)

The error that I am getting is

npm run build

> ui@0.1.0 build
> cross-env GENERATE_SOURCEMAP=false next build

info  - Linting and checking validity of types .error - ESLint must be installed in order to run during builds: npm install --save-dev eslint
info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data ...Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /home/pol/Projects/projects/studio/ui/node_modules/chart.js/package.json
    at new NodeError (node:internal/errors:372:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:472:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:693:7)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/home/pol/Projects/projects/studio/ui/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

> Build error occurred
Error: Failed to collect page data for /metrics
    at /home/pol/Projects/projects/studio/ui/node_modules/next/dist/build/utils.js:959:15
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  type: 'Error'
}
info  - Collecting page data .%      

The dependencies of my package.json are

"dependencies": {
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^2.0.13",
    "@next/font": "^13.0.4",
    "@tailwindcss/forms": "^0.5.3",
    "antd": "^5.0.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.2.0",
    "chart.js": "^4.0.1",
    "chartjs-adapter-moment": "^1.0.1",
    "chartjs-plugin-annotation": "^2.1.0",
    "chonky": "^2.3.2",
    "chonky-icon-fontawesome": "^2.3.2",
    "cross-env": "^7.0.3",
    "jsonwebtoken": "^8.5.1",
    "md5": "^2.3.0",
    "moment": "^2.29.4",
    "next": "^13.0.4",
    "postcss": "^8.4.19",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.0.1",
    "react-checkbox-tree": "^1.8.0",
    "react-chrono": "^1.19.2",
    "react-csv": "^2.2.2",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-indiana-drag-scroll": "^2.2.0",
    "react-loader-spinner": "^5.3.4",
    "tailwindcss": "^3.2.4",
    "unique-names-generator": "^4.7.1",
    "web-vitals": "^3.1.0"
  },

In case it is useful the exports of chart.js are

{
  "name": "chart.js",
  "homepage": "https://www.chartjs.org",
  "description": "Simple HTML5 charts using the canvas element.",
  "version": "4.0.1",
  "license": "MIT",
  "type": "module",
  "sideEffects": [
    "./auto/auto.js",
    "./dist/chart.umd.js"
  ],
  "jsdelivr": "./dist/chart.umd.js",
  "unpkg": "./dist/chart.umd.js",
  "main": "./dist/chart.js",
  "exports": {
    ".": {
      "import": "./dist/chart.js",
      "types": "./dist/types.d.ts"
    },
    "./auto": {
      "import": "./auto/auto.js",
      "types": "./auto/auto.d.ts"
    },
    "./helpers": {
      "import": "./helpers/helpers.js",
      "types": "./helpers/helpers.d.ts"
    }
  },

And finally the way I am using the package

import 'chart.js/auto';
import {Line, Bar} from 'react-chartjs-2'
import 'chartjs-adapter-moment';
import 'chartjs-plugin-annotation';

Really don't know what else to do, hopefully someone can help me, thanks!

Update

I just tried to create a new project with create-next-app and I just installed chartjs and imported it and it does NOT work. So it seems to be an issue with the package itself.

polmonroig
  • 937
  • 4
  • 12
  • 22
  • This is a bug that seems to affect chartjs-plugin-annotation and chartjs-plugin-zoom, see: https://github.com/chartjs/chartjs-plugin-annotation/issues/814, https://github.com/chartjs/chartjs-plugin-zoom/issues/709 – Alexander Cardosi Dec 09 '22 at 18:31
  • 1
    Yeah, hope they fix it, I removed the plugins for now and I am trying to create the date stamps manually Thanks! – polmonroig Dec 09 '22 at 19:19

0 Answers0