Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Report InvalidMappingColumn on tsc generated source map #136

Closed
ashi009 opened this issue Oct 24, 2019 · 7 comments · Fixed by #140 or #175
Closed

Report InvalidMappingColumn on tsc generated source map #136

ashi009 opened this issue Oct 24, 2019 · 7 comments · Fixed by #140 or #175
Assignees
@nikolay-borzov
Labels
🐛 bug
Milestone
2.4.0

Comments

@ashi009
Copy link

ashi009 commented Oct 24, 2019

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 microsoft/TypeScript#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.
@ashi009 ashi009 changed the title Report InvalidMappingColumn on typescript generated source map Report InvalidMappingColumn on tsc generated source map Oct 24, 2019
@heygrady
Copy link

heygrady commented Nov 7, 2019

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
Copy link

heygrady commented Nov 8, 2019

Is this likely the line in question?

source-map-explorer/src/explore.ts

Line 109 in c007f36

if (generatedColumn >= line.length) {

@nikolay-borzov nikolay-borzov added this to the 2.1.1 milestone Nov 9, 2019
@nikolay-borzov nikolay-borzov self-assigned this Nov 9, 2019
@nikolay-borzov
Copy link
Collaborator

nikolay-borzov commented Nov 9, 2019 •
edited

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
Copy link
Author

ashi009 commented Nov 10, 2019

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?

nikolay-borzov added a commit that referenced this issue Nov 10, 2019
@nikolay-borzov
Handle source map referencing EOL character (#136)
e37fe62 
- Detect EOL character for the file. It fixes wrong splitting for source maps generated on Windows environments.
- When checking column boundary verify that the last referenced column is not  EOL.
- Generate source map referencing EOL characters (typescript.ts)
- Fix 'InvalidMappingLine' check. Getting not existing value from array returns `undefined`, not `null`.
- Add test for 'InvalidMappingColumn' error. Generate `invalid-map-column.js` and `invalid-map-line.js`.
nikolay-borzov added a commit that referenced this issue Nov 12, 2019
@nikolay-borzov
Handle source map referencing EOL character (#136)
254a5d9 
- Detect EOL character for the file. It fixes wrong splitting for source maps generated on Windows environments.
- When checking column boundary verify that the last referenced column is not  EOL.
- Generate source map referencing EOL characters (typescript.ts)
- Fix 'InvalidMappingLine' check. Getting not existing value from array returns `undefined`, not `null`.
- Add test for 'InvalidMappingColumn' error. Generate `invalid-map-column.js` and `invalid-map-line.js`.
- Fix tests for errors
- Use `/` as invalid filename - works on Linux/Windows
@nikolay-borzov nikolay-borzov mentioned this issue Nov 23, 2019
Merged
nikolay-borzov added a commit that referenced this issue Feb 18, 2020
@nikolay-borzov
Fix slowness (#158)
a390845 
- Remove useless false-positive check for source map referencing EOL. Creating string with the length of the file on each iteration greatly decrease performance
- Disable check for invalid mapping column until #136 is fixed
- Update `InvalidMappingColumn` error message - add 1 to `generatedColumn` to count columns from 1 to conform with `contains ${maxColumn} column(s)` phrase
- Reduce usage of `map-reference-eol.js` in tests
- Generate `invalid-map-column.js` and `invalid-map-line.js` without `tsc` to eliminate source map referencing EOL
@nikolay-borzov nikolay-borzov mentioned this issue Feb 18, 2020
Merged
nikolay-borzov added a commit that referenced this issue Feb 18, 2020
@nikolay-borzov
Fix slowness (#158)
ee481da 
- Remove useless false-positive check for source map referencing EOL. Creating string with the length of the file on each iteration greatly decrease performance
- Disable check for invalid mapping column until #136 is fixed
- Update `InvalidMappingColumn` error message - add 1 to `generatedColumn` to count columns from 1 to conform with `contains ${maxColumn} column(s)` phrase
- Reduce usage of `map-reference-eol.js` in tests
- Generate `invalid-map-column.js` and `invalid-map-line.js` without `tsc` to eliminate source map referencing EOL
@nikolay-borzov nikolay-borzov modified the milestones: 2.1.1, 2.4.0 Mar 7, 2020
nikolay-borzov added a commit that referenced this issue Mar 12, 2020
@nikolay-borzov
Fix source map reference EOL detection (#136)
39502e3 
- Get source content to detect mapping reference EOL. This will only work if the source map has `sourcesContent`. We can implement remote sources support later.
- Cache "is referencing EOL" check per source.
- Update `map-reference-eol.js` to address some edge cases.
@nikolay-borzov nikolay-borzov mentioned this issue Mar 12, 2020
Merged
nikolay-borzov added a commit that referenced this issue Mar 13, 2020
@nikolay-borzov
Fix source map reference EOL detection (#136)
fea8ded 
- Fix comment
nikolay-borzov added a commit that referenced this issue Mar 13, 2020
@nikolay-borzov
Fix source map reference EOL detection (#136)
f408a40 
- Get source content to detect mapping reference EOL. This will only work if the source map has `sourcesContent`. We can implement remote sources support later.
- Cache "is referencing EOL" check per source.
- Update `map-reference-eol.js` to address some edge cases.
@mbehzad mbehzad mentioned this issue Mar 25, 2020
Closed
@nikolay-borzov nikolay-borzov mentioned this issue Apr 14, 2020
Closed
@Fi1osof
Copy link

Fi1osof commented Nov 13, 2020

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
Copy link

kb-ally commented Apr 22, 2021

facing same issue

@ls-jingbo-jin
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nikolay-borzov nikolay-borzov

Labels
🐛 bug
Projects
None yet
Milestone
2.4.0
6 participants
@heygrady @ashi009 @Fi1osof @nikolay-borzov @ls-jingbo-jin @kb-ally