search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 262 forks source link

@ui5/webcomponents-tools random file copy issues interrupts Dev Productivity #1634

Closed codefactor closed 4 years ago

codefactor commented 4 years ago

Describe the bug SuccessFactors is trying to build our own library of UI5 web components. I have followed the tutorial to create a new project, which is a package of the common-components github (uses Lerna).

Any time I change a file, the file watch will kick in and initiate a new build through rollup. This is expected; however, more than 50% of the time the build fails talking about how the lit renderer does not have a default export (which it does have one) - and other times the server is just randomly not showing anything. I find myself having to restart the server every few minutes while doing the dev work.

To reproduce

git clone https://github.wdf.sap.corp/xweb/common-components
git co feature/header
cd common-components/packages/webcomponents
npm i

Starting the server and making a change

  1. start the server npm run start
  2. go to http://localhost:8081/test-resources/pages/index.html
  3. see the header, interact with it a bit if you want
  4. Go to a file like NotificationList.lit.js and make some change in that file
  5. Wait for the new build to complete and refresh the page to see if you can reproduce the error in log - if not refresh the page to validate that the change you made is working, if you see the error in the log, refresh the page and probably the page is not showing the header anymore.
  6. If the issue does not reproduce on first attempt keep trying

Expected behavior

Changing a file should result in an exact copy of the file every time delivered to the dist folder.

Screenshots

The following shows my workspace and captures one such occasion of issue 2 happening. image

Context

Affected components (if known)

Log output / Any errors in the console

[1] [4] [!] Error: 'default' is not exported by dist/NotificationList.lit.js, imported by dist/NotificationList.js
[1] [4] https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
[1] [4] dist/NotificationList.js (7:7)
[1] [4] 5: import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer";
[1] [4] 6: import NotificationListCss from "./generated/themes/NotificationList.css";
[1] [4] 7: import NotificationListTemplate from "./NotificationList.lit";
[1] [4]           ^
[1] [4] 8: import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler";
[1] [4] 9: import UI5Element from "@ui5/webcomponents-base/dist/UI5Element";
[1] [4] Error: 'default' is not exported by dist/NotificationList.lit.js, imported by dist/NotificationList.js
[1] [4]     at error (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:5400:30)
[1] [4]     at Module.error (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:9824:16)
[1] [4]     at handleMissingExport (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:9725:28)
[1] [4]     at Module.traceVariable (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:10163:24)
[1] [4]     at ModuleScope.findVariable (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:8770:39)
[1] [4]     at ChildScope.findVariable (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:3065:38)
[1] [4]     at FunctionScope.findVariable (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:3065:38)
[1] [4]     at ChildScope.findVariable (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:3065:38)
[1] [4]     at Identifier$1.bind (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:4403:40)
[1] [4]     at ReturnStatement$1.bind (/data/sfsf/workspace/trunk/nogradle/common-components/packages/webcomponents/node_modules/rollup/dist/shared/node-entry.js:3152:23)
[1] [4]
vladitasev commented 4 years ago

Hello @codefactor

Regarding Issue 1: As far as I can understand, you're not expecting anything from us right now, is that correct?

Regarding Issue 2: I was able to reproduce it twice. I guess during real work it's much more common. The reason you're seeing this particular error is that the file dist/NotificationList.lit.js is empty every time the error occurs. Therefore rollup produces this misleading message: "Missing default export". And to why this file is empty, I'm still trying to find out. It might be that something in the OS has blocked the copy operation.

The copy itself is carried out by this line in our tools package: src: "copy-and-watch \"src/**/*.js\" dist/", so in reality copy-and-watch fails to successfully copy the source file to the destination dist/ directory, leaving the end-result empty.

While we debug further and maybe even try other libraries, you can work around this error by just modifying the NotificationList.lit.js file once more by adding a space or whatever. This will immediately retrigger a copy operation, which, if successful, is going to retrigger rollup and you'll have a running build. It is completely unnecessary to Ctrl+c and rerun.

It's really annoying though, I get that. Hopefully we have something more soon.

Regards, Vladi

codefactor commented 4 years ago

@vladitasev ,

I was hoping to get help on both issues. Maybe I should split this into 2 issues.

For issue 1, I just realized that a Dev VM does not come with Chrome installed. I think we have been using Chromium for other Karma-based tests in other projects. I wonder if there is a way to get this to work with a different browser.

codefactor commented 4 years ago

@vladitasev ,

I have now split this issue into 2 by creating https://github.com/SAP/ui5-webcomponents/issues/1644

Since it seems like there are some next steps on the side of the webcomponents-tools project to investigate why is the file copy operation resulting in an empty file. Maybe the other issue there might not be much you can do since SuccessFactors has different requirements than ui5-webcomponents internally in terms of execution environment.

By the way, during by dev process this seemed to happen a lot - perhaps it might happen on any file you're editing, for example - if you edit the HTML test page, then that file gets deployed as empty -- I can keep modifying the file till it gets deployed properly, though, as you suggested - which is a work around, or I can restart the server. The restarting is pretty quick, and seems always to work - whereas the update the file and cross your fingers approach only sometimes works.