[serve] JS transform corrupts sourcemaps in bundled UMD scripts

web-padawan commented 6 years ago

Description

As a library developer, I want to build the UMD bundle using rollup and include it in tests, which I run using polymer serve. As the bundle is already processed, and contains sourcemaps, I expect polyserve to recognize such scripts and not to apply any JS transform to them.

The problem here is that JS transform mangles some lines and messes up debugger statements. Especially, some comments are not in the right place, some extra newlines added, etc.

Expected outcome (polymer-cli 1.6.0)

Content of the file is untouched, debugger statement in the right place:

Actual outcome (polymer-cli 1.7.2)

Content of the file is messed up. This is not easy to detect in the restored code in Chrome DevTools from the first look, but when running tests, code stops in a couple of lines below the breakpoint:

I was able to reproduce the bug with shifting line numbers in Chrome 66 and Firefox 60.

Steps to reproduce

Clone the repo

git clone https://github.com/web-padawan/cli-amd-sourcemap-issue

Install dependencies
```
npm install
```
Run the build
```
npm run build
```
Start dev server
```
npm start
```
Open Chrome DevTools
Navigate to http://127.0.0.1:8000/components/cli-amd-sourcemap-issue/test/
See the "sources" tab and check that code stopped below the breakpoint
Checkout to another branch

git checkout 1.6.0

Run npm install to switch polymer-cli version
```
npm install
```
Repeat steps 4. - 6. and see the breakpoint in the right place

Processed code

In the gists below, you can find the content of the served files:

rictic commented 6 years ago

Oh! Good find, I was having a similar issue this weekend.

We still need to do some modifications to many libraries that will have source maps, so I think the best solution would be to either:

remove source map comments when we transform a js file
or update source maps when serving source maps for a transformed file

web-padawan commented 6 years ago

@rictic thanks for the feedback. How about disabling the JS transform for particular file, is that doable? Please note that if you check the gists from the "Processed code" section above, the only differences are changed newlines and shifted comments, so JS transform could skip that file at all.

I'm not using neither import.meta nor dynamic imports, so essentially no stuff to process by JS transform. But with the transformModulesToAmd set to 'auto' it still transforms the file.

davidmaxwaterman commented 5 years ago

Yeah, this frustrated me enough to switch to python -m SimpleHTTPServer 8081&, which works just fine.

davidmaxwaterman commented 5 years ago

FWIW, I'm not doing anything 'special' - ie not using rollup or webpack - and still find this problem. My 'development process' is a one-time npm install && bower install followed by the repeated edit/reload cycle.

The problem has made 'polymer serve' useless to me, and I have switched completely to python -m SimpleHTTPServer 8081. I'm not a python fan so this really leaves a bad taste in my mouth. I guess I can only do this reliably because I am targeting chrome only.

I really think this should be getting more attention than it seems to be getting.

mercmobily commented 5 years ago

This also renders polymer serve totally useless to me. I am also using my own server.

web-padawan commented 5 years ago

This regression happened before async / await support landed in polyserve which makes it even worse, as most of the code related to lit-element is now using those.

At the moment, I'm using webpack and karma for running tests, and do not have this issue. My working setup can be found here: https://github.com/web-padawan/lit-components

abdonrd commented 5 years ago

Same issue in the PWA Starter Kit: https://github.com/Polymer/pwa-starter-kit/issues/250

ankon commented 5 years ago

Somewhat related: With https://github.com/Polymer/tools/pull/3334 it would be possible to make polymer serve produce sourcemaps.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

web-padawan commented 4 years ago

This was quite a nasty issue back in the day.

Nowadays we can use es-dev-server which doesn't have this problem.

davidmaxwaterman commented 4 years ago

es-dev-server does have the problem where it totally gets the line numbers wrong, though. I've presumed that it is just because html files are now converted into js files, and you don't get to see the html in the dev tools any more...it's annoying :/

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Polymer / tools