search

vue-pdf-viewer / vue-pdf-viewer

Vue PDF Viewer – Flexible and Powerful Vue.js PDF Component to display PDF smoothly on a Vue.js website
https://www.vue-pdf-viewer.dev/
18 stars 0 forks source link

UnknownErrorException: The API version "4.6.82" does not match the Worker version "4.4.168". #14

Closed edanweis closed 1 month ago

edanweis commented 1 month ago

I have registered vue-pdf-viewer in a local module, and have tried pnpm overrides for "pdfjs-dist": "4.4.168" and installing variations of pdfjs-dist library. Nothing seems to work. PDFS won't load.

vuepdfviewer commented 1 month ago

@edanweis thanks for reaching out! Could you try the following steps to see if it resolves the issue:

  1. Ensure that pnpm overrides for "pdfjs-dist": "4.4.168" is correctly added in your package.json file
  2. Remove both the node_modules folder and pnpm-lock.yaml file
  3. Run a clean pnpm install

If this doesn’t resolve the problem, it would be helpful if you could provide the following details so we can further investigate:

  1. Your Node version
  2. The Vue/Nuxt version you’re using
  3. Your package.json file

Let me know how it goes, and we’ll be happy to assist further!

edanweis commented 1 month ago

@vuepdfviewer

The problem didn't resolve following those steps.

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "repository": "",
  "homepage": "",
  "scripts": {
    "build": "nuxt build && pnpm run postinstall",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "release": "npm run lint && npx nuxi typecheck && changelogen --release && git push --follow-tags",
    "lint": "eslint .",
    "postinstall": "if [ \"$NODE_ENV\" = \"production\" ]; then pnpm add @nuxt/image; fi",
    "generate-tailwind": "node generate.js"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "^1.3.1",
    "@nuxt/fonts": "^0.7.2",
    "@nuxtjs/color-mode": "^3.4.2",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "@sentry/node": "^8.13.0",
    "@sentry/profiling-node": "^8.13.0",
    "@sentry/vue": "^8.13.0",
    "@types/ua-parser-js": "^0.7.39",
    "@vueuse/core": "^10.11.0",
    "@vueuse/nuxt": "^10.9.0",
    "changelogen": "^0.5.5",
    "eslint": "^8.57.0",
    "fs-extra": "^11.2.0",
    "nuxt": "^3.12.3",
    "nuxt-anchorscroll": "^1.0.3",
    "nuxt-echarts": "^0.2.2",
    "nuxt-maplibre": "^1.0.0",
    "nuxt-og-image": "3.0.0-rc.38",
    "nuxt-security": "^0.14.4",
    "shadcn-nuxt": "^0.10.4"
  },
  "dependencies": {
    "@ai-sdk/openai": "^0.0.40",
    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
    "@faker-js/faker": "^8.4.1",
    "@formkit/auto-animate": "^0.8.2",
    "@formkit/drag-and-drop": "^0.1.6",
    "@googlemaps/google-maps-services-js": "^3.4.0",
    "@hypernym/nuxt-gsap": "^2.4.2",
    "@indoorequal/vue-maplibre-gl": "^7.4.0",
    "@langchain/community": "^0.2.32",
    "@lottiefiles/dotlottie-vue": "^0.1.9",
    "@nuxtjs/device": "^3.1.1",
    "@nuxtjs/google-fonts": "^3.2.0",
    "@nuxtjs/supabase": "^1.3.5",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
    "@pinia/nuxt": "^0.5.1",
    "@placekit/client-js": "^2.3.0",
    "@revolist/vue3-datagrid": "^4.8.14",
    "@sentry/vite-plugin": "^2.20.1",
    "@stripe/connect-js": "^3.3.12",
    "@supabase/ssr": "^0.4.0",
    "@supabase/supabase-js": "^2.44.4",
    "@tanstack/vue-table": "^8.17.3",
    "@tresjs/cientos": "^4.0.2",
    "@tresjs/nuxt": "^3.0.7",
    "@tsparticles/slim": "^3.4.0",
    "@tsparticles/vue3": "^3.0.1",
    "@turf/distance": "^7.1.0",
    "@turf/helpers": "^7.1.0",
    "@tus/file-store": "^1.4.0",
    "@tus/server": "^1.7.0",
    "@twallpaper/vue": "^2.1.2",
    "@types/howler": "^2.2.11",
    "@types/lodash.clone": "^4.5.9",
    "@types/lodash.uniqby": "^4.7.9",
    "@unlok-co/nuxt-stripe": "^2.0.0",
    "@unovis/ts": "^1.4.4",
    "@unovis/vue": "^1.4.4",
    "@uppy/aws-s3": "^4.0.0",
    "@uppy/box": "^3.0.0",
    "@uppy/core": "^4.0.1",
    "@uppy/dashboard": "^4.0.1",
    "@uppy/drag-drop": "^3.1.1",
    "@uppy/dropbox": "^4.0.0",
    "@uppy/file-input": "^3.1.2",
    "@uppy/google-drive": "^4.0.0",
    "@uppy/google-photos": "^0.2.0",
    "@uppy/onedrive": "^4.0.0",
    "@uppy/progress-bar": "^3.1.1",
    "@uppy/remote-sources": "^2.0.0",
    "@uppy/tus": "^3.5.5",
    "@uppy/vue": "^1.1.2",
    "@vee-validate/nuxt": "^4.12.8",
    "@vee-validate/zod": "^4.13.2",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue-email/components": "^0.0.17",
    "@vue-email/render": "^0.0.9",
    "@vue-pdf-viewer/viewer": "^1.2.0",
    "@vueuse/motion": "^2.2.3",
    "active-table": "^1.1.5",
    "ai": "^3.2.38",
    "ap-style-title-case": "^2.0.0",
    "aws-s3^3.13": "link:@uppy/aws-s3^3.13",
    "box^3.13": "link:@uppy/box^3.13",
    "canvas-confetti": "^1.9.3",
    "class-variance-authority": "^0.7.0",
    "closest-edge": "link:@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge",
    "clsx": "^2.1.1",
    "coolshapes-vue": "^0.1.2",
    "core-js": "3.37.0",
    "corner-smoothing": "^0.1.5",
    "dayjs-nuxt": "^2.1.9",
    "deep-chat": "^2.0.1",
    "dockview-core": "^1.15.2",
    "dockview-vue": "^1.15.2",
    "dom-to-image-more": "^3.3.1",
    "embla-carousel": "^8.1.3",
    "embla-carousel-vue": "^8.1.3",
    "globby": "^14.0.1",
    "googleapis": "^129.0.0",
    "gradient-avatar": "^1.0.2",
    "groq-sdk": "^0.6.0",
    "gsap": "^3.12.5",
    "hash-sum": "^2.0.0",
    "howler": "^2.2.4",
    "humanize-plus": "^1.8.2",
    "jose": "^5.3.0",
    "js-tag-cloud": "^0.0.5",
    "jwt-decode": "^3.0.0",
    "langchain": "^0.2.18",
    "lenis": "^1.1.6",
    "lodash-es": "^4.17.21",
    "lodash.clone": "^4.5.0",
    "lodash.merge": "^4.6.2",
    "lodash.uniqby": "^4.7.0",
    "lodash.update": "^4.10.2",
    "lucide-vue-next": "^0.298.0",
    "make-plural": "^7.4.0",
    "maplibre-gl": "^4.5.0",
    "mustache": "^4.2.0",
    "notivue": "^2.4.4",
    "nuxt-icon": "^0.6.10",
    "nuxt-meilisearch": "^1.3.10",
    "nuxt-split-type": "^0.1.8",
    "officeparser": "^4.1.1",
    "onedrive^3.13": "link:@uppy/onedrive^3.13",
    "optional": "^0.1.4",
    "party-js": "^2.2.0",
    "pdf-parse": "^1.1.1",
    "pdf-parse-new": "^1.3.6",
    "pdf-vue3": "^1.0.12",
    "pg": "^8.11.5",
    "pinia": "^2.1.7",
    "provider-views^3.13": "link:@uppy/provider-views^3.13",
    "radix-vue": "^1.8.0",
    "resend": "^3.2.0",
    "tabulator-tables": "^6.2.5",
    "tailwind-merge": "^2.3.0",
    "tailwindcss": "^3.4.3",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.168.0",
    "title-case": "^4.3.1",
    "tsparticles": "^3.4.0",
    "ua-parser-js": "^1.0.37",
    "uplot": "^1.6.30",
    "uplot-vue": "^1.2.2",
    "v-calendar": "^3.1.2",
    "v-onboarding": "^2.8.2",
    "vaul-vue": "^0.2.0",
    "vee-validate": "^4.13.2",
    "vue": "3.4",
    "vue-code-layout": "^1.0.6",
    "vue-deepunref": "^1.0.1",
    "vue-draggable-plus": "^0.5.3",
    "vue-fit2box": "1.0.0",
    "vue-pdf-embed": "^2.1.0",
    "vue-use-fixed-header": "^2.0.3",
    "vue3-grid-layout-next": "^1.0.7",
    "vue3-perfect-scrollbar": "^2.0.0",
    "vue3-photo-preview": "^0.3.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
    "zod": "^3.23.8"
  },
  "resolutions": {
    "sharp": "0.32.6"
  },
  "overrides": {
    "@googlemaps/url-signature": "1.0.32",
    "pdfjs-dist": "4.4.168"
  },
  "pnpm": {
    "supportedArchitectures": {
      "os": [
        "current"
      ],
      "cpu": [
        "x64",
        "arm64"
      ]
    }
  }
}
vuepdfviewer commented 1 month ago

@edanweis

Thanks for sharing your configurations.

I noticed that the overrides property is currently placed outside of the pnpm property. Could you try moving the overrides property for pdfjs-dist inside pnpm and run again?

It should look something like this:

"pnpm": {
  "overrides": {
    "pdfjs-dist": "4.4.168"
   }
}
edanweis commented 1 month ago

@vuepdfviewer Oops! Thank you