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
194 stars 94 forks source link

ui-tooling-modules 3.3.0 update breaks (typescript) build #977

Closed ruapho closed 8 months ago

ruapho commented 8 months ago

Describe the bug After updating the dependency "ui5-tooling-modules": "3.2.7" to "ui5-tooling-modules": "3.3.0" the build starts to fail with

Error Message:
Resource /resources/chart.js/auto.js has no content

To Reproduce customtasks looks like this:

  customTasks:
    - name: ui5-tooling-transpile-task
      afterTask: replaceVersion
    - name: ui5-tooling-modules-task
      afterTask: ui5-tooling-transpile-task

With "ui5-tooling-modules": "3.2.7" it compiles correctly while and copying the dependency chart.js to \dist\resources\chart.js\auto.js. Dependency is correctly defined and transpiled to js:

"use strict";
sap.ui.define(["sap/ui/core/Control","./BaseChartRenderer","chart.js/auto","sap/base/Log"],
...

Changing from chart.js/auto to chart.js is not working.

After update to 3.3.0 this error happens:

info com.unitrade.crm › Running task escapeNonAsciiCharacters...
info com.unitrade.crm › Running task replaceCopyright...
info com.unitrade.crm › Running task replaceVersion...
info com.unitrade.crm › Running task ui5-tooling-transpile-task...
info com.unitrade.crm › Running task ui5-tooling-modules-task...
info com.unitrade.crm › Running task minify...
error ProjectBuilder Build failed in 2.89 s
info ProjectBuilder Executing cleanup tasks...

⚠️  Process Failed With Error

Error Message:
Resource /resources/chart.js/auto.js has no content

It seems like the minify tasks fails because the ui5-tooling-modules-task is not generating correct output.

Expected behavior A minor feature upgrade should not break existing builds.

I've looked through the changelog and some code and cannot see why this breaks. But it is preventing me from updating and (as of now) current version is already 3.4.4.

petermuessig commented 8 months ago

Hi @ruapho , which chart.js version do you use? Is it possible to share your package.json and your ui5.yaml. Wondering a bit since I have tests for the chart.js generation in the ecosystem and I should have noticed this...

petermuessig commented 8 months ago

@ruapho - I tried to reproduce your issue by doing the following steps:

  1. Create a new UI5 TS app project using Easy UI5: yo easy-ui5 ts-app
  2. Remove the webapp/test/e2e folder due to get rid of some warnings for wdi5 I need to follow up independently
  3. Add charts.js via npm i chart.js
  4. Add modules tooling extension npm i ui5-tooling-modules@3.2.7
  5. Do the necessary configuration in the ui5.yaml
  6. Import chart.js in a controller via: import x from "chart.js"; and make sure to use x, e.g. console.log(x);
  7. Run the build => WORKS
  8. Upgrade to 3.3.0 and run the build => WORKS
  9. Upgrade to latest version => WORKS

The issues with the JSModuleAnalyzer are related to the UI5 Tooling trying to add chart.js to the preload bundle and it has some issues to understand the generated JS syntax (most probably higher than es2022). But this is also not related to what you faced.

Unfortunately, I can't reproduce your issue... If you can provide me an example to reproduce I may have a chance to fix that...

ruapho commented 8 months ago

Hi,

I've created a simple project to reproduce the error: https://github.com/ruapho/u5_issue_977

README states on how to reproduce the error.

I actually narrow the scope of the error away from chart.js. I actually include a folder libs where the microsoft.cognitive.speech.sdk is included. When this is removed the build succeeds and chart.js is included correctly.

I wasn't able to include microsoft.cognitive.speech.sdk as dependency like chart.js: If I remember correctly because it hooks into the window object.

petermuessig commented 8 months ago

@ruapho - thanks for the sample to reproduce - I'll follow up the next days on this.

Unfortunately, not all 3rd party libs can be bundled with the ui5-tooling-modules. It also depends on whether they use native Node.js modules which can't be polyfilled in the browser and also what kind of module format it is. Normally, all standard module formats should work but I have also seen strange modules in the past. But, I'll check...

petermuessig commented 8 months ago

@ruapho thanks for your example - I could successfully reproduce the issue and also spotted the source of it. Fix is about to be provided and will be released in the next 30 mins. THX for pointing this out.

Just FYI: the issue was related due to the detection of the fs dependency from the microsoft speech module. This hasn't been detected as to be ignored during the bundling process and I corrected this detection now. With my change I now also introduce a better error handling to ensure that these kind of errors can be better spotted in the future...

THX again!