How to use Paged.js in Vue.js2?

Question

let paged = new Previewer();
paged.preview('test', \[\], document.body).then((flow) =\> {
console.log("Rendered", flow.total, "pages.");
});

Facing issue: 

1:1188-1197 export 'Previewer' was not found in 'pagedjs'

error  in ./node_modules/pagedjs/dist/paged.js

Module parse failed: Unexpected token (3072:8)
You may need an appropriate loader to handle this file type.
|               }
|
|               async \*layout(content, startAt) {
|                       let breakToken = startAt || false;
|                       let tokens = \[\];

In webpack.base.config.js:

{ test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/paged')] }

{ test: /.js$/, include: [ resolve('node_modules/pagedjs') // Include pagedjs for transpilation ], use: [ { loader: 'babel-loader' } ] }

here is package.json devDependencies file:

{ "version": "1.0.0", "description": "node tech template", "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "npm run dev", "build": "node build/build.js", "deploy": "firebase deploy --only hosting" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.6", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.11", "eslint": "^5.1.0", "eslint-config-airbnb": "^17.0.0", "eslint-config-prettier": "^2.9.0", "eslint-plugin-jsx-a11y": "^6.1.0", "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.21.4", "eventsource-polyfill": "^0.9.6", "express": "^4.16.2", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "http-proxy-middleware": "^0.20.0", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.26", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^2.2.0", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.6.10", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.12.0", "webpack-hot-middleware": "^2.18.2", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

This is not enough to reproduce but it's likely because babel and its deps are very outdated. It cannot handle async generator syntax, async *layout. Update to Babel 7. It looks like the lib has pagedjs/dist/paged.legacy.js for legacy browsers but this is symptomatic treatment, next lib may not have such bundle — Estus Flask
– Estus Flask, Commented Apr 19, 2024 at 8:03
I have updated babel to "babel-loader": "^7.1.5", but still same error. Also, whatever details you required I will provide you the same here as facing this issue from 3-4 days but no solution till now. Thanks in Advance. — Deepak Walia
– Deepak Walia, Commented Apr 19, 2024 at 8:15
This requires all babel things to be updated and you'll run into compat problems in configs because Babel 7 had breaking changes. Babel != babel loader, even their versions don't match. But you likely need to upgrade babel loader too to be compatible with b7 (babel loader 8), check the docs regarding version compatibility, and this potentially means you have to upgrade to webpack 4 as well. As said, you can go with symptomatic treatment but the problem with the setup that can't handle modern libs persists — Estus Flask
– Estus Flask, Commented Apr 19, 2024 at 8:47

naveenv · Accepted Answer · 2024-04-26 18:05:28Z

1

Try referring this, It worked on my vue 2 project, check for packages installed properly : https://doc.doppio.sh/article/using-pagedjs-with-vue3.html

Replace script part with this

<script>
    import Previewer from 'pagedjs';
    export default {
      mounted () {
         const paged = new Previewer();
         paged.preview().then((flow) => {
         console.log('Rendered', flow.total, 'pages.');
      });
     }
    };</script>

edited Apr 26, 2024 at 18:05

answered Apr 26, 2024 at 18:00

naveenv

871 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Paged.js in Vue.js2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related