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.