Unable to map a large amount of bytes

[mdvorscak]

When running this tool I get: Unable to map 4270596 / 6575223 bytes (64.95%) printed to the console. The report still generates, but most of my bundle is 'unmapped'. This seems related to #47 , since this corresponds to TypeScript code. However, I get no information about any TypeScript code at all. Is this normal?

[danvk]

Can you share your file? Are you using an inline source map?

[mdvorscak]

Unfortunately, cannot share my file. I am using an inline source map. I'll check tomorrow, I might be able to anonymize my source file. So I can give you something similar to it

[paulirish]

I get similar behavior. I see Unable to map 4098316 / 6530412 bytes (62.76%) and no problems with 1.4. Screenshot of the 1.5.0 results:

here's my file, zipped up: lighthouse-background.js.zip

[danvk]

@mdvorscak @paulirish would you be happier seeing that <unmapped> block omitted entirely? If I leave it out, then we run into #47 (number of bytes doesn't match file size). But the only other option is guessing where the unmapped bytes come from, which is problematic in its own ways.

[mdvorscak]

I'd rather keep it in with <unmapped> if the issue is really coming from the sourcemap itself. Is this an issue with TypeScript itself or some other third party lib which is producing the map?

[danvk]

@mdvorscak I believe it is an issue with the source maps that tsc outputs. See this comment for more details.

I'm a little surprised that it's a majority of bytes in your source map, though. The unmapped bytes are usually just whitespace and return statements.

[paulirish]

I like labelling unmapped stuff as <unmapped> but think that if we can identify this unmapped bit as the sourcemap then we should say <source map>. regardless, i'm 👎 to omitting, so I think we have consensus there.

btw the map i provided is from browserify, no tsc involved.

[danvk]

I've got a fix that counts inline source maps separately. Here's what the command line looks like:

$ node index.js /Users/danvk/Downloads/lighthouse-background.js
Inline source map accounts for 4064948 / 6530412 bytes (62.25%)
Unable to map 33368 / 6530412 bytes (0.51%)
Use --only-mapped to exclude these from the visualization.

and the visualization:

@paulirish @mdvorscak what do you guys think? Is this more confusing than just omitting the bytes from the inline source map by default?

[mdvorscak]

I like this approach since it leaves the possibility to use the option --only-mapped to omit these bytes or not depending on preference

[danvk]

My only concern is that when you use SME, it's usually because you want to shrink your JS bundle. In which case the inline source map is a large (in terms of # of bytes) distraction.

If those bytes were excluded from the visualization, it would blur the distinction between running with separate .js / .js.map files and a single .js file with an inline source map.

[paulirish]

with browserify it's a slight pain to extract the inline sourcemap to a separate file, so i prefer not to do it. The only reason i sometimes build with sourcemaps is to use SME.

I think having the correct filesize up top makes the tool more trustworthy, so I think it's worthwhile to tell the truth even if it makes exploring the data slightly more annoying.

I guess it'd be slightly better if there was a treemap box around the non-inline-sourcemap stuff so i can very quickly exclude that from view. (In this file, there are two siblings rather than just one). Is it reasonable for there to be a (<mapped files>) parent or something? Naming is hard.

[joshjg]

FYI: In our case this was due to comments left by webpack and untouched by uglify, mostly ModuleConcatenationPlugin bailout messages. We solved by turning off pathinfo in webpack config.

[harshjulka]

Hi @danvk

Just want to understand what part of code is unmapped code and Are you planning to add better visualisation for a developer to understand it.
Is this unmapped code need to be optimised or not?
Thanks!

[rpokrovskij]

There should be simple utility that can output bundle lines that are not covered by sourcemap. As a first step to understand "why there are unmapped lines?"

[gpawlik]

@mdvorscak @paulirish I just realised that in my case the majority of the unmapped bits were related to json files from my codebase. Could it be also the case in your project?

[littlee]

having the similar issue when analyzing bundle build by create-react-app

> source-map-explorer 'build/static/js/*.*'

build/static/js/2.a9bd8fbb.chunk.js
  Unable to map 130/185977 bytes (0.07%)
build/static/js/main.32bd81bd.chunk.js
  Unable to map 14790/17385 bytes (85.07%)
build/static/js/runtime~main.d653cc00.js
  1. Your source map only contains one source (../webpack/bootstrap).
  This can happen if you use browserify+uglifyjs, for example, and don't set the --in-source-map flag to uglify.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps
  2. Unable to map 62/1502 bytes (4.13%)

[corollari]

@littlee Running into the same problems over here, 2.1 MB, 64% of the total bundle is unmapped.

Reproduction steps:

git clone [email protected]:safudex/neologin.git
cd login
npm install
npm run build
npm run analyze

[corollari]

Fixed my problem, in my case the unmapped bytes were caused by a package being imported.

[carpben]

@littlee , same here. What version of react-scripts are you using? Are you using Typescript?

[littlee]

@ALL

I am using the latest version of react-scirpts & latest version of source-map-explorer now, and I am using this command to analyze, thing has get a lot better, but still a small part of the bundle is unaleb to map

source-map-explorer ./build/static/js/*.js

[carpben]

Thanks @littlee,
Unfortunately my experience is different.

[nikolay-borzov]

Please stop posting null issue comments here. There is an issue #142

[nikolay-borzov]

The issue has been addressed within #146, #140, #129 and #134.
Most of the unmapped bytes were actually sourceMappingURL comments or 'null' (generated) source bytes.
Closing the issue. Feel free to reopen if you can reproduce the issue in version 2.1.2 or newer

[cmacdonnacha]

Still seeing this with the latest create-react-app:

1. npx create-react-app my-app
2. npm install -g source-map-explorer
3. cd my-app
4. npm run build
5. source-map-explorer 'build/static/js/*.js'

Result:

$ source-map-explorer 'build/static/js/*.js'

build/static/js/2.2594f893.chunk.js
  Unable to map 173/129442 bytes (0.13%)
build/static/js/main.10e23077.chunk.js
  Unable to map 90/1219 bytes (7.38%)
build/static/js/runtime-main.e1daef6b.js
  Unable to map 13/1559 bytes (0.83%)

[dons20]

Still experiencing this issue with create-react-app.

[prapakou]

build/static/js/main.99550a42.js
Unable to map 83/4010372 bytes (0.00%)
build/static/js/my-component.554d7dd9.chunk.js
Unable to map 147/604 bytes (24.34%)

reproduce it with CRA 4.0.1
reopen please

[shikelong]

reproduce it with CRA 4.0.2

build/static/js/2.c35a0e8e.chunk.js
  Unable to map 175/1951255 bytes (0.01%)
build/static/js/main.2755ea06.chunk.js
  Unable to map 253/67052 bytes (0.38%)
build/static/js/runtime-main.17e26823.js
  Unable to map 13/1561 bytes (0.83%)
Done in 1.70s.

 rw-r--r--   1   rioshi   rioshi      1 MiB   Thu Feb 25 17:37:19 2021   2.c35a0e8e.chunk.js
  rw-r--r--   1   rioshi   rioshi      1 KiB   Thu Feb 25 17:37:19 2021   2.c35a0e8e.chunk.js.LICENSE.txt
  rw-r--r--   1   rioshi   rioshi      9 MiB   Thu Feb 25 17:37:19 2021   2.c35a0e8e.chunk.js.map
  rw-r--r--   1   rioshi   rioshi     65 KiB   Thu Feb 25 17:37:18 2021   main.2755ea06.chunk.js
  rw-r--r--   1   rioshi   rioshi    118 B     Thu Feb 25 17:37:19 2021   main.2755ea06.chunk.js.LICENSE.txt
  rw-r--r--   1   rioshi   rioshi    155 KiB   Thu Feb 25 17:37:19 2021    main.2755ea06.chunk.js.map
  rw-r--r--   1   rioshi   rioshi      1 KiB   Thu Feb 25 17:37:19 2021  runtime-main.17e26823.js
  rw-r--r--   1   rioshi   rioshi      8 KiB   Thu Feb 25 17:37:19 2021  runtime-main.17e26823.js.map

[kitsunekyo]

same thing here. create-react-app with typescript template, no extra configuration, just a tiny app and unable to get this thing working.

npx source-map-explorer build/**/*.js
build/static/js/2.ea5231d0.chunk.js
  Unable to map 183/1009903 bytes (0.02%)
build/static/js/main.76a6cd7f.chunk.js
  Unable to map 101/53915 bytes (0.19%)
build/static/js/runtime-main.4f382c48.js
  Unable to map 13/1569 bytes (0.83%)

i dont even get a Done message at the end. (WSL2 ubuntu)

// my main packages
"source-map-explorer": "^2.5.2",
"react": "^17.0.1",
"typescript": "^4.1.5"
"react-scripts": "^4.0.3",

[tahsintunan]

Facing the same issue.

[simonihmig]

In a (non-React) app with parts of it being built with webpack, in a development build (everything fine in prod!) I was seeing similar cases of whole chunks being mostly a large unmapped block, even though full source maps ( devtool: 'source-map') were enabled. After switching webpack to mode: 'production' the problem was gone, and every single module showed up as expected. Maybe that helps?

[jazzominy]

In a (non-React) app with parts of it being built with webpack, in a development build (everything fine in prod!) I was seeing similar cases of whole chunks being mostly a large unmapped block, even though full source maps ( devtool: 'source-map') were enabled. After switching webpack to mode: 'production' the problem was gone, and every single module showed up as expected. Maybe that helps?

this did the trick for me. With production mode on, the html shows correct information. Thanks @simonihmig