hrynko / vue-pdf-embed

PDF embed component for Vue 2 and Vue 3
https://npmjs.com/package/vue-pdf-embed
MIT License
707 stars 109 forks source link

Problems loading in Vue3 #4

Closed gmlewis closed 2 years ago

gmlewis commented 2 years ago

Do you have any idea why I might be getting this error from yarn serve in my Vue3 app?

 ERROR  Failed to compile with 1 error                                                                   9:35:20 AM

 error  in ./node_modules/vue-pdf-embed/dist/vue3-pdf-embed.js

Module parse failed: Unexpected token (1:32342)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/tools/ViewerTool/ViewerTool.vue?vue&type=script&lang=js 33:0-40 38:17-28
 @ ./src/components/tools/ViewerTool/ViewerTool.vue?vue&type=script&lang=js
 @ ./src/components/tools/ViewerTool/ViewerTool.vue
 @ ./src/components/tools lazy ^\.\/.*\.vue$ namespace object
 @ ./src/components/tools/components.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/pages/Session/Session.vue?vue&type=script&lang=js
 @ ./src/pages/Session/Session.vue?vue&type=script&lang=js
 @ ./src/pages/Session/Session.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.16:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I use the package normally, like this:

<script>
import { computed, inject, ref } from 'vue'
import { useStore } from 'vuex'
import { saveAs } from 'file-saver'
import VuePdfEmbed from 'vue-pdf-embed'

export default {
  components: {
    VuePdfEmbed,
  },
...
}

My package.json looks like this:

{
  "name": "ux2",
  "version": "0.0.169",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@material/checkbox": "^9.0.0",
    "@material/data-table": "^9.0.0",
    "@tiptap/core": "^2.0.0-beta.2",
    "@tiptap/extension-collaboration": "^2.0.0-beta.4",
    "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.4",
    "@tiptap/extension-highlight": "^2.0.0-beta.1",
    "@tiptap/extension-task-item": "^2.0.0-beta.1",
    "@tiptap/extension-task-list": "^2.0.0-beta.2",
    "@tiptap/extension-typography": "^2.0.0-beta.3",
    "@tiptap/starter-kit": "^2.0.0-beta.3",
    "@tiptap/vue-3": "^2.0.0-beta.2",
    "core-js": "^3.6.5",
    "date-fns": "^2.16.1",
    "emitter-io": "^1.39.0",
    "file-saver": "^2.0.5",
    "focus-trap-js": "^1.1.0",
    "jsrsasign": "^10.2.0",
    "node-notifier": "^8.0.1",
    "prosemirror-commands": "^1.1.7",
    "remixicon": "^2.5.0",
    "shepherd.js": "^8.2.3",
    "uuid": "^8.3.2",
    "vue": "^3.0.5",
    "vue-pdf-embed": "1.0.3",
    "vue-router": "4.0.3",
    "vuex": "^4.0.0-0",
    "y-websocket": "^1.3.11",
    "yjs": "^13.5.3"
  },
  "devDependencies": {
    "@testing-library/vue": "^6.3.4",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "1.32.8",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  },
  "resolutions": {
    "vue": "^3.0.5"
  }
}

Thank you!

hrynko commented 2 years ago

Hi @gmlewis,

Thank you for discovering this problem. I will try to fix it as soon as possible, but in the meantime you can use version 1.0.2:

yarn add vue-pdf-embed@1.0.2
hrynko commented 2 years ago

I just published 1.0.4, which should fix this problem. Feel free to reopen this issue if it is not fixed.

Thanks!

gmlewis commented 2 years ago

I just published 1.0.4, which should fix this problem. Feel free to reopen this issue if it is not fixed.

That worked... thank you!