search

danvk / source-map-explorer

Analyze and debug space usage through source maps
Apache License 2.0
3.82k stars 100 forks source link

Report InvalidMappingColumn on tsc generated source map #136

Closed ashi009 closed 4 years ago

ashi009 commented 4 years ago

Reproduce

$ source-map-explorer test.js
test.js
  Your source map refers to generated column 21 on line 1, but the source only contains 21 column(s) on that line.
  Check that you are using the correct source map.

test.js

console.log('hello');
console.log('world');
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbInRlc3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQztBQUNyQixPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDIn0=

Root cause

Typescript emits mappings for end-of-line characters, which breaks the boundary checks in source-map-explorer.

This issue has been reported as https://github.com/microsoft/TypeScript/issues/34695. However, even if it's fixed in next ts release, there will be code generated by earlier versions of tsc around, that source-map-explorer won't be able to process.

Moreover, though it doesn't seem to be an ordinary input to source-map-explorer, such mapping can easily propagate its way to the final bundle and breaks source-map-explorer eventually.

heygrady commented 4 years ago

As a point of interest, we hit a similar issue and found that webpack-bundle-analyzer seems to work.

We'd been using source-map-explorer because it is recommended here: https://create-react-app.dev/docs/analyzing-the-bundle-size/

heygrady commented 4 years ago

Is this likely the line in question?

https://github.com/danvk/source-map-explorer/blob/c007f361a363465437eca94f81e4dfe0152b562f/src/explore.ts#L109

nikolay-borzov commented 4 years ago

Cannot reproduce using typescript@3.7.2 on Windows. @ashi009, is it reproducible only on 3.8.0?

Okay, managed to reproduce it after using correct linebreak when splitting lines

ashi009 commented 4 years ago

I guess Window's CRLF won't make a difference in the source map. However, as source map explorer splits on LF for the source code, which means CR is counted as the extra character at the line end 🤷‍♂ and makes the source map valid?

Fi1osof commented 3 years ago

Got 

Your source map refers to generated column 27 on line 1, but the source only contains 26 column(s) on that line.
  Check that you are using the correct source map.

Ubuntu 20, source-map-explorer@2.5.0

kb-ally commented 3 years ago

facing same issue

ls-jingbo-jin commented 3 years ago

Got the same error. 

 Your source map refers to generated column 48 on line 7, but the source only contains 47 column(s) on that line.
  Check that you are using the correct source map.

Any update? Will use webpack instead of tsc fix this?