theproductiveprogrammer/flipbook-viewer

Demo not working

Closed this issue · 3 comments

I'm trying hard to get the demo working. Here my page with just the repo code inside: https://flip.design-to-use.de/test/test-pdf.html

  1. I had to fix
    <script src="/test-pdf.js"></script>
    to <script src="./test-pdf.js"></script>, because the file was not found.
  2. I had to fix the same line to <script type="module" src="/test-pdf.js"></script>, because I had a browser error "Uncaught SyntaxError: import declarations may only appear at top level of a module".

Now I have a next error on my browser console: Uncaught TypeError: The specifier "@tpp/htm-x" was a bare specifier but was not remapped to anything. Relative module specifiers must begin with "./", "../" or "/". How to solve?

Hi @TobiasKrais,

From what I understand you are trying to do, the best way would be to use a javascript bundler like Webpack.

Steps you can follow:

  1. Create a webpack project similar to this example.
  2. Install flipbook-viewer using $ npm install flipbook-viewer.
  3. Copy the sample code from the test directory test/pdfjs-init.js, test/book-pdf.js, and test/test-pdf.js.
  4. Include the test-pdf.js in your html. Use the webpack-dev-server or equivalent to debug/test then build the final output and include that into your production code.

Hope this helps.

Thank you! I will try to learn it.

Hi @theproductiveprogrammer,
sorry for disturbing. I succeded building the flipbook-viewer.js and pdf.worker.js. I did it this way:

npm init -y
npm i flipbook-viewer
npm i @tpp/htm-x
npm i events

Then I copied the /src/ folder and package-lock.json, package.json and webpack.config.js in the folder an finally run:

npm run && webpack build --env production

The built succeded.

Can you please give me a hint or a example website how to integrate and use the JS files?