if i import jspdf as "import jspdf from 'jspdf';" in laravel vue project, it produce an error!

[z41dth3c0d3r]

Mix
  Compiled with some errors in 44.30s

ERROR in ./node_modules/canvg/lib/index.es.js 1933:16-23
Module not found: Error: Can't resolve 'process/browser' in '/mnt/user/projects/my_projects/node_modules/canvg/lib'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 1 error

I can't explain correctly because I am totally new to npm and package management in javascript. and this is my package.json file

    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "build-tailwind": "npx tailwindcss-cli@latest build resources\\css\\tailwind.css -o public\\css\\tailwind.css"
    },
    "devDependencies": {
        "@types/tailwindcss": "^2.0.3",
        "autoprefixer": "^10.2.5",
        "axios": "^0.21",
        "bootstrap-icons": "^1.5.0",
        "inline-worker": "^1.1.0",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "moment": "^2.29.1",
        "postcss": "^8.2.15",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.13",
        "sass-loader": "^11.1.1",
        "tailwindcss": "^2.1.2",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.8",
        "vue-particles": "^1.0.9",
        "vue-router": "^3.5.1",
        "vue-template-compiler": "^2.6.12",
        "vuex": "^3.6.2"
    },
    "dependencies": {
        "@popperjs/core": "^2.9.2",
        "@tailwindcss/forms": "^0.3.2",
        "aos": "^2.3.4",
        "bootstrap": "^5.0.2",
        "bootstrap-vue": "^2.21.2",
        "jquery": "^3.6.0",
        "jspdf": "^2.4.0",
        "particles.js": "^2.0.0",
        "popper.js": "^1.16.1",
        "vee-validate": "^3.4.9",
        "vue-route-middleware": "^1.0.7"
    }
}

[z41dth3c0d3r]

please any solution!???

[z41dth3c0d3r]

found solution on https://github.com/laravel-mix/laravel-mix/issues/2737

[jringeisen]

This solution doesn't seem to work on Macbook Pro's with the M1 chip for some reason. It compiles without error but I get a bunch of errors in my console and my site is broken. But when I do this on my iMac with an Intel chip everything works as expected. My environments on both machines are exactly the same, the only difference is the CPU chip.

[Uzlopak]

What errors are shown?

[jringeisen]

@Uzlopak

[Uzlopak]

Doesn't look jsPDF specific? Also it is type checks that fail

[jringeisen]

@Uzlopak if I comment out import { jsPDF } from "jspdf"; and the code that uses the import the errors disappear, wouldn’t that imply that it’s jspdf?

[pagegwood]

I can confirm that this is an issue in another project leveraging Laravel Mix. We are not using Vue.

[pagegwood]

And I can also confirm that updating Laravel mix to v 6.0.38 fixed the issue :)

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[innocces]

emmmm~ i just use ext to avoid this error

{
   "resolve": {
     "alias": {  'process/browser': 'process/browser.js' }
  }
}