search

ui5-community / ui5-ecosystem-showcase

A repository showcasing the UI5 tooling extensibility to combine OSS tools for UI5 application development.
https://ui5-community.github.io/ui5-ecosystem-showcase/
Other
191 stars 92 forks source link

[ui5-tooling-modules] jsPDF still not working with the same error #726

Closed zouyi100 closed 1 year ago

zouyi100 commented 1 year ago

Hi @petermuessig Unfortunately, the issue of including jsPDF is still not working. 😭 Now i'm running the showcase/ui5-tsapp, with the package.json:

"dependencies": { "@stomp/stompjs": "^7.0.0", "jspdf": "^2.5.1", "luxon": "^3.3.0", "xlsx": "^0.18.5" }, "devDependencies": { "@types/luxon": "^3.3.0", "@types/openui5": "1.112.0", "@typescript-eslint/eslint-plugin": "^5.58.0", "@typescript-eslint/parser": "^5.58.0", "@ui5/cli": "^2.14.17", "eslint": "^8.38.0", "karma": "^6.4.1", "karma-chrome-launcher": "^3.1.1", "karma-coverage": "^2.2.0", "karma-ui5": "^2.4.0", "karma-ui5-transpile": "^0.3.3", "rimraf": "^5.0.0", "typescript": "^5.0.4", "ui5-middleware-livereload": "^0.8.2", "ui5-tooling-modules": "^0.9.4", "ui5-tooling-transpile": "^0.7.2" },

In the code, because of the jspdf is dynamic imported, so it's running without blocking the app. But when you click the test pdf button, the same error showing in the console. 😄

Maybe it still needs check the root cause. Sorry about that.

Originally posted by @zouyi100 in https://github.com/ui5-community/ui5-ecosystem-showcase/issues/713#issuecomment-1506229752

zouyi100 commented 1 year ago

Sorry to create a new issue because the old one is closed but still having issues. 😆

petermuessig commented 1 year ago

Which version of Node.js and NPM do you use? I'm using Node 16.19.0 and NPM 9.5.0.

petermuessig commented 1 year ago

I just tested with Node 18.15.0 with the showcases/ui5-tsapp and can use jsPDF... So, I still can't reproduce it... 😢

zouyi100 commented 1 year ago

Hi @petermuessig I've test the app in a Linux based system and it's working well! (This will be a work around for me.) But still not working on Windows system. 😆 Could you try to reproduce it on Windows system?

petermuessig commented 1 year ago

Good catch! Thanks for pointing this out! This I didn't try so far. Will check it now... 😄

petermuessig commented 1 year ago

Finally, I got my Windows machine back in a state for development... What a journey... 😅

Unfortunately, still I can't reproduce your issue - I see a different one, but this happens during the preload generation where the UI5 tooling tries to package jsPDF - I'll exclude it from the preload with one of the next PRs - but my issue now looks like this (the generation of the jsPDF works for me properly - really weird):

info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (5/10) Running task ui5-tooling-modules-task...
info builder:customtask:ui5-tooling-modules Processing dependency: @stomp/stompjs
info builder:customtask:ui5-tooling-modules Processing dependency: xlsx
WARN server:custommiddleware:ui5-tooling-modules Entry module "../../node_modules/.pnpm/jspdf@2.5.1/node_modules/jspdf/dist/jspdf.es.min.js" is using named and default exports together. Consumers of your bundle will have to use `chunk.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
info server:custommiddleware:ui5-tooling-modules The bundle for jspdf has 5 chunks!
info builder:customtask:ui5-tooling-modules Processing dependency: jspdf
info builder:customtask:ui5-tooling-modules   + chunk jspdf-90f1e76c
info builder:customtask:ui5-tooling-modules   + chunk jspdf-cdd9e7d3
info builder:customtask:ui5-tooling-modules   + chunk jspdf-2d26bd6d
info builder:customtask:ui5-tooling-modules   + chunk jspdf-ce77167c
info builder:customtask:ui5-tooling-modules Rewriting JS resource: /resources/ui5/ecosystem/demo/tsapp/controller/Main.controller.js
info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (6/10) Running task generateFlexChangesBundle...
info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (7/10) Running task generateComponentPreload...
ERR! lbt:analyzer:JSModuleAnalyzer Unhandled AST node type MetaProperty Node {
ERR! lbt:analyzer:JSModuleAnalyzer   type: 'MetaProperty',
ERR! lbt:analyzer:JSModuleAnalyzer   start: 255180,
ERR! lbt:analyzer:JSModuleAnalyzer   end: 255190,
ERR! lbt:analyzer:JSModuleAnalyzer   meta: Node { type: 'Identifier', start: 255180, end: 255183, name: 'new' },
ERR! lbt:analyzer:JSModuleAnalyzer   property: Node {
ERR! lbt:analyzer:JSModuleAnalyzer     type: 'Identifier',
ERR! lbt:analyzer:JSModuleAnalyzer     start: 255184,
ERR! lbt:analyzer:JSModuleAnalyzer     end: 255190,
ERR! lbt:analyzer:JSModuleAnalyzer     name: 'target'
ERR! lbt:analyzer:JSModuleAnalyzer   }
ERR! lbt:analyzer:JSModuleAnalyzer }
ERR! lbt:resources:ResourcePool failed to analyze ui5/ecosystem/demo/tsapp/thirdparty/jspdf-2d26bd6d.js: Error: Unhandled AST node type MetaProperty
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:506:12)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:29
ERR! lbt:resources:ResourcePool     at Array.forEach (<anonymous>)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:10)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:478:7)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:29
ERR! lbt:resources:ResourcePool     at Array.forEach (<anonymous>)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:10)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:29
ERR! lbt:resources:ResourcePool     at Array.forEach (<anonymous>)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:10)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:29
ERR! lbt:resources:ResourcePool     at Array.forEach (<anonymous>)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:10)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:406:7)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:29
ERR! lbt:resources:ResourcePool     at Array.forEach (<anonymous>)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:370:10)
ERR! lbt:resources:ResourcePool     at visit (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:510:6)
ERR! lbt:resources:ResourcePool     at JSModuleAnalyzer.analyze (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\analyzer\JSModuleAnalyzer.js:290:3)
ERR! lbt:resources:ResourcePool     at determineDependencyInfo (C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase\node_modules\.pnpm\@ui5+builder@2.11.9\node_modules\@ui5\builder\lib\lbt\resources\ResourcePool.js:76:16)
ERR! lbt:resources:ResourcePool     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (8/10) Running task createDebugFiles...
petermuessig commented 1 year ago

Which Node, NPM and PNPM Version do you use on Windows?

PS C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase> node --version
v18.16.0
PS C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase> npm --version
9.5.1
PS C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase> pnpm --version
8.2.0
PS C:\Users\peter\Documents\GitHub\ui5-ecosystem-showcase>
zouyi100 commented 1 year ago

I'm now using the same env with you node 18.16.0 npm 9.5.1 without pnpm. Browser is Edge. And i delete the hole node_modules then do the npm i No error when i run npm run dev but get the same error when i click download pdf and trigger the async import. Then i try to run npm run build. I check the log and see the difference:

info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (5/10) Running task ui5-tooling-modules-task... info builder:customtask:ui5-tooling-modules Processing dependency: @stomp/stompjs info builder:customtask:ui5-tooling-modules Processing dependency: xlsx WARN server:custommiddleware:ui5-tooling-modules Entry module "../../node_modules/.pnpm/jspdf@2.5.1/node_modules/jspdf/dist/jspdf.es.min.js" is using named and default exports together. Consumers of your bundle will have to use chunk.default to access the default export, which may not be what you want. Use output.exports: "named" to disable this warning. info server:custommiddleware:ui5-tooling-modules The bundle for jspdf has 5 chunks! info builder:customtask:ui5-tooling-modules Processing dependency: jspdf info builder:customtask:ui5-tooling-modules + chunk jspdf-90f1e76c info builder:customtask:ui5-tooling-modules + chunk jspdf-cdd9e7d3 info builder:customtask:ui5-tooling-modules + chunk jspdf-2d26bd6d info builder:customtask:ui5-tooling-modules + chunk jspdf-ce77167c

but for me:

info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (5/10) Running task ui5-tooling-modules-task... info builder:customtask:ui5-tooling-modules Processing dependency: @stomp/stompjsp 🔨 (5/10) Running task ui5-tooling-modules-task... info builder:customtask:ui5-tooling-modules Processing dependency: xlsx.demo.tsapp 🔨 (5/10) Running task ui5-tooling-modules-task... ERR! server:custommiddleware:ui5-tooling-modules RollupError: "default" is not exported by "node_modules/raf/index.js", imported by "node_modules/canvg/lib/index.es.js". ERR! server:custommiddleware:ui5-tooling-modules at error (C:\Users\zoi7sgh\Documents\Project\Test\ui5-ecosystem-showcase\showcases\ui5-tsapp\node_modules\rollup\dist\shared\rollup.js:274:30)

It seems the error happened before the chunk task.

And i have forked the project and create a branch on my github. I do little change to remove the ts-lib which blocked me start the app. Could you please test it on my branch.

Thank you.

petermuessig commented 1 year ago

Hmm, this also works for me - I can see the PDF in both cases - with the main and your branch:

main: image

yours: image

The difference is the Example control not being rendered.

The log shows the following:

info server:custommiddleware:ui5-tooling-transpile Transpiling resource /Component.ts
info server:custommiddleware:ui5-tooling-transpile Transpiling resource /controller/App.controller.ts
info server:custommiddleware:ui5-tooling-transpile Transpiling resource /controller/Main.controller.ts
WARN server:custommiddleware:ui5-tooling-modules Entry module "../../node_modules/.pnpm/luxon@3.3.0/node_modules/luxon/build/cjs-browser/luxon.js?commonjs-entry" is using named and default exports together. Consumers of your bundle will have to use `chunk.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
WARN server:custommiddleware:ui5-tooling-modules Entry module "../../node_modules/.pnpm/jspdf@2.5.1/node_modules/jspdf/dist/jspdf.es.min.js" is using named and default exports together. Consumers of your bundle will have to use `chunk.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
info server:custommiddleware:ui5-tooling-modules The bundle for jspdf has 6 chunks!

The build also works fine for me (except of the preload):

info builder:builder application ui5.ecosystem.demo.tsapp 🔨 (5/10) Running task ui5-tooling-modules-task...
info builder:customtask:ui5-tooling-modules Processing dependency: @stomp/stompjs
info builder:customtask:ui5-tooling-modules Processing dependency: xlsx
WARN server:custommiddleware:ui5-tooling-modules Entry module "../../node_modules/.pnpm/jspdf@2.5.1/node_modules/jspdf/dist/jspdf.es.min.js" is using named and default exports together. Consumers of your bundle will have to use `chunk.default` to access the default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
info server:custommiddleware:ui5-tooling-modules The bundle for jspdf has 6 chunks!
info builder:customtask:ui5-tooling-modules Processing dependency: jspdf
info builder:customtask:ui5-tooling-modules   + chunk jspdf-825dec2e
info builder:customtask:ui5-tooling-modules   + chunk jspdf-ea060255
info builder:customtask:ui5-tooling-modules   + chunk jspdf-92243a8f
info builder:customtask:ui5-tooling-modules   + chunk jspdf-03408e97
info builder:customtask:ui5-tooling-modules   + chunk jspdf-ce77167c
info builder:customtask:ui5-tooling-modules Rewriting JS resource: /resources/ui5/ecosystem/demo/tsapp/controller/Main.controller.js

OMG - what a weird issue... 😢

petermuessig commented 1 year ago

There is one thing which I personally would not like to change - it is a rollup configuration which returns the default export directly when no named exports are available: https://www.npmjs.com/package/@rollup/plugin-commonjs => requireReturnsDefault. But maybe this helps:

What happens if you modify the utils.js of the ui5-tooling-modules: https://github.com/zouyi100/ui5-ecosystem-showcase/blob/zy-test/packages/ui5-tooling-modules/lib/util.js#L221 and add the requireReturnsDefault: "auto"? 

commonjs({
    defaultIsModuleExports: true,
    requireReturnsDefault: "auto",
}),
petermuessig commented 1 year ago

Gotcha! I can reproduce your issue when running npm run build in the project directly! Ok - now I can check where this comes from. I'll keep you posted!

zouyi100 commented 1 year ago

!!! YES, i forget to mention this point. Waiting for you good news !

petermuessig commented 1 year ago

What a weekend! This issue was really tricky and still the solution for Windows isn't perfect. When using the ES modules for the bundle it fails on Windows (since the default export of the CJS module isn't properly detected by the rollup plugins). Therefore, I decided to implement a fail safe mode which runs the bundling again with CJS modules when it fails with ES modules. And finally, I also added tests for the bundling... 🚀

With the latest ui5-tooling-modules version 0.9.6 it should now also work on your Windows machine in the npm scenario!

Puuhh - now I need to 🛌

zouyi100 commented 1 year ago

It's working! Really thanks for your SUPER FAST fix.