After importing jsPDF, I get an error in the build part.

[burakfircasiguzel]

Describe the bug

I want to use jsPDF library on React JS. I added the library with 'npm i jspdf' Then I imported jsPDF like this => import { jsPDF } from "jspdf";

In this way, I can get PDF outputs. So far, no problem. However, when I want to build with Vite, I get this error.

Could not resolve '../internals/define-globalThis-property' from ../internals/define-globalThis-property?commonjs-external error during build: Error: Could not resolve '../internals/define-globalThis-property' from ../internals/define-globalThis-property?commonjs-external at error (file:///C:/Users/BurakFircasig%C3%BCzel/Documents/react-projects/bf-v02-generator/node_modules/rollup/dist/es/shared/rollup.js:1858:30) at ModuleLoader.handleResolveId (file:///C:/Users/BurakFircasig%C3%BCzel/Documents/react-projects/bf-v02-generator/node_modules/rollup/dist/es/shared/rollup.js:22156:24) at file:///C:/Users/BurakFircasig%C3%BCzel/Documents/react-projects/bf-v02-generator/node_modules/rollup/dist/es/shared/rollup.js:22119:26

In this way, I can get PDF outputs. So far, no problem. However, when I want to build with Vite, I get this error.

This is my vite.config.js file.

I examined the steps one by one, I tried. import { jsPDF } from "jspdf"; If I remove it, I get the build without any problems. And of course I can't use jsPDF.

Is this issue related to Vite or jsPDF? How can I solve this problem?

Reproduction

https://www.npmjs.com/package/vite/v/3.2.4

Steps to reproduce

npm run build

System Info

{
  "name": "vuexy-react-admin-dashboard",
  "version": "9.0.0",
  "private": true,
  "dependencies": {
    "@casl/ability": "^6.3.2",
    "@casl/react": "^3.1.0",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@formkit/auto-animate": "^1.0.0-beta.5",
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/list": "^5.11.0",
    "@fullcalendar/react": "^5.11.1",
    "@fullcalendar/timegrid": "^5.11.0",
    "@fullcalendar/timeline": "^5.11.0",
    "@hookform/resolvers": "^2.8.10",
    "@popperjs/core": "^2.11.3",
    "@reduxjs/toolkit": "^1.2.5",
    "animate.css": "4.1.1",
    "apexcharts": "^3.35.2",
    "apexcharts-clevision": "^3.28.5",
    "axios": "^1.1.3",
    "axios-mock-adapter": "^1.20.0",
    "bootstrap": "^5.2.2",
    "bs-stepper": "1.7.0",
    "buffer": "^6.0.3",
    "chart.js": "^4.0.1",
    "classnames": "^2.3.2",
    "cleave.js": "1.6.0",
    "crypto-browserify": "^3.12.0",
    "draft-js": "0.11.7",
    "draftjs-to-html": "0.9.1",
    "events": "^3.3.0",
    "file-saver": "^2.0.5",
    "flatpickr": "^4.6.13",
    "history": "^5.3.0",
    "html-to-draftjs": "1.5.0",
    "i18next": "^22.0.5",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-http-backend": "^2.0.1",
    "jquery": "^3.6.0",
    "jsonwebtoken": "8.5.1",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.28",
    "moment": "^2.29.3",
    "nouislider": "^15.5.0",
    "nouislider-react": "^3.4.1",
    "postcss": "7.0.33",
    "postcss-custom-properties": "^12.1.10",
    "postcss-import": "12.0.0",
    "postcss-rtl": "^1.5.0",
    "prismjs": "^1.28.0",
    "process": "^0.11.10",
    "rc-input-number": "^7.3.11",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-chartjs-2": "^5.0.1",
    "react-copy-to-clipboard": "^5.1.0",
    "react-country-flag": "^3.0.2",
    "react-data-table-component": "^7.5.2",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.14.7",
    "react-dropzone": "^14.2.1",
    "react-feather": "~2.0.3",
    "react-flatpickr": "^3.10.12",
    "react-hook-form": "^7.39.4",
    "react-hot-toast": "^2.4.0",
    "react-i18next": "^12.0.0",
    "react-paginate": "^8.1.3",
    "react-perfect-scrollbar": "^1.5.8",
    "react-rating": "2.0.5",
    "react-redux": "^8.0.1",
    "react-router-dom": "^6.3.0",
    "react-select": "^5.6.1",
    "react-shepherd": "^4.1.0",
    "react-slidedown": "^2.4.7",
    "react-sortablejs": "6.0.0",
    "reactstrap": "^9.1.5",
    "recharts": "^2.1.9",
    "redux": "^4.2.0",
    "redux-debounced": "0.5.0",
    "redux-thunk": "^2.4.1",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "sass": "^1.51.0",
    "screenfull": "^6.0.2",
    "sortablejs": "^1.12.0",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.5",
    "sweetalert2": "^11.4.14",
    "sweetalert2-react-content": "^5.0.0",
    "swiper": "^8.1.5",
    "wnumb": "1.2.0",
    "xlsx": "^0.18.5",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "format": "prettier --write \"src/**/*.js\"",
    "lint": "eslint src/**/*.js src/**/*.js",
    "lint:fix": "eslint src/**/*.js --fix"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "resolutions": {
    "sass-loader/webpack": "^5.0.0",
    "recharts/prop-types": "^15.6.0",
    "styled-components/react-is": "^16.8.0",
    "react-hot-toast/goober/csstype": "^3.0.10",
    "html-to-draftjs/immutable": "^4.0.0",
    "postcss-custom-properties/postcss": "^8.2",
    "@esbuild-plugins/node-globals-polyfill/esbuild": "^0.15.15"
  },
  "overrides": {
    "sass-loader": {
      "webpack": "^5.0.0"
    },
    "recharts": {
      "prop-types": "^15.6.0"
    },
    "styled-components": {
      "react-is": "^16.8.0"
    },
    "react-hot-toast": {
      "goober": {
        "csstype": "^3.0.10"
      }
    },
    "html-to-draftjs": {
      "immutable": "^4.0.0"
    },
    "postcss-custom-properties": {
      "postcss": "^8.2"
    },
    "@esbuild-plugins/node-globals-polyfill": {
      "esbuild": "^0.15.15"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/preset-react": "^7.18.6",
    "@types/sortablejs": "^1.10.6",
    "@vitejs/plugin-react": "2.2.0",
    "eslint": "^8.19.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.29.4",
    "prettier": "^2.6.2",
    "sass-loader": "^13.1.0",
    "vite": "^3.2.4"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

Used Package Manager

npm

Logs

vite v3.2.5 building for production... ✓ 859 modules transformed. Could not resolve '../internals/define-globalThis-property' from ../internals/define-globalThis-property?commonjs-external error during build: Error: Could not resolve '../internals/define-globalThis-property' from ../internals/define-globalThis-property?commonjs-external at error (file:///C:/Users/BurakFircasig%C3%BCzel/Documents/react-projects/bf-v02-generator/node_modules/rollup/dist/es/shared/rollup.js:1858:30) at ModuleLoader.handleResolveId (file:///C:/Users/BurakFircasig%C3%BCzel/Documents/react-projects/bf-v02-generator/node_modules/rollup/dist/es/shared/rollup.js:22156:24) at file:///C:/Users/BurakFircasig%C3%BCzel/Documents/react-projects/bf-v02-generator/node_modules/rollup/dist/es/shared/rollup.js:22119:26

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[github-actions[bot]]

Hello @burakfircasiguzel. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.