Detailed description of issue
I am using pdf.js express with my Nuxt3 application. I have installed pdf.js express with npm and copied the static files from node_modules/@pdftron/pdfjs-express/public to my Nuxt application public/lib folder. Everything was working fine when I run in the node server in browser, but when I try to run a build version of my Nuxt application I was not able to open any pdf file, showing net::ERR_ABORTED 404 (Not Found) error
Code snippet
//Components/WebViewer/index.vue
<template>
<div id='webviewer' ref='viewer'></div>
</template>
<script>
export default {
name: 'WebViewer',
props: {
path: String,
url: String
},
mounted: function () {
import('@pdftron/pdfjs-express').then(() => {
WebViewer({
path: '../lib',
initialDoc: this.url, // replace with your own PDF file
licenseKey: '',
}, this.$refs.viewer).then((instance) => {
// call apis here
});
})
}
}
</script>
<style>
#webviewer {
height: 100vh;
}
</style>
And the error I get in my console after running the build version:
The files paths are correct with npm run dev and npx nuxi build.
localhost:3000/webviewer/core/webviewer-core.min.js
localhost:3000/webviewer/ui/webviewer-ui.min.js
If I use npx nuxi generate, the file paths are incorrect.
localhost:3000/core/webviewer-core.min.js // missing webviewer before core
localhost:3000/webviewer/webviewer-ui.min.js // missing ui after webviewer
If I copy the public/webviewer/core folder to public/core and the public/webviewer/ui files to public/webviewer and run npx nuxi generate the pdf viewer works. I would prefer not to need two copies of the files in my public folder.
I also tried this Nuxt tutorial and it is the exact same problem (and “solution”).
Apologies for the delay. It looks like may have something to do with the routing in your application. If you take a look at the network tab in the production build, you can see the ui returns the entry point (index.html) of your application instead of the correct JS file.
