Create-react-app: Analyzing bundles with source-map-explorer doens't work

[carpben]

Is this a bug report?

yes

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

analyze

Environment

Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
Yarn: 1.9.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
Internet Explorer: 11.0.17134.1
npmPackages:
react: ^16.7.0 => 16.8.5
react-dom: ^16.7.0 => 16.8.5
react-scripts: ^2.1.5 => 2.1.8
npmGlobalPackages:
create-react-app: Not Found

Steps to Reproduce

1. create a typescript CRA project
2. create components.
3. Divide them to various apps/sub projects.
4. Render apps conditionally, using React.lazy and Suspense
5. Follow instructions on https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
   a. npm install --save source-map-explorer
   b. add "analyze": "source-map-explorer 'build/static/js/*.js'" to scripts.
   c. run "npm run build" followed by "npm run analyse".

Actual Behavior

Error: No file(s) found

[bugzpodder]

Can you try npx source-map-explorer 'build/static/js/*.js'
It seems you have everything setup correctly. Lazy loaded modules still creates a file in a separate bundle and I have tried it on my setup with no problems.
It's either a windows issue, or that you are running an older version that you did not install (seems to be the latest from your package.json).
Either wise I'd need a repo to try it out further.

[carpben]

npx source-map-explorer 'build/static/js/*.js' works. Thanks!

How can we solve this for others? Perhaps remove the script altogether, and suggest npx source-map-explorer 'build/static/js/*.js' instead?

[bugzpodder]

I'm glad it worked out. I am not sure why it didn't work in the first place with npm scripts, if you get a chance can you do a npm cache clean and npm analyse again to see if that would fix things with the npm script?

[carpben]

@bugzpodder, sure. Here is a copy paste from my PowerShell:

PS C:\Users\carpb\projects\gw\gw-ts> npm cache cleannpm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent,
use 'npm cache verify' instead. On the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one.npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\carpb\AppData\Roaming\npm-cache\_logs\2019-03-27T09_00_06_229Z-debug.log

followed by:

PS C:\Users\carpb\projects\gw\gw-ts> npm cache verify
Cache verified and compressed (~\AppData\Roaming\npm-cache\_cacache):
Content verified: 5828 (247906215 bytes)
Content garbage-collected: 2194 (104110440 bytes)
Index entries: 10292
Finished in 39.124s

[tirli]

I have the same error. Also Win10. It works via npx source-map-explorer and via node_mobiles/.bin/source-map-explorer from console. But doesn't work both with npm run analyze and yarn analyze

yarn cache clean doesn't help

[LeoooY]

Same problem solved by npx source-map-explorer 'build/static/js/*.js'.

[mistereechapman]

If the documentation is updated to remove the single quotes from the path then this will work.

[mistereechapman]

For any windows users running into the same issue try removing the quotes. Even when trying the npx workaround also I ran into the same issues until I removed the quotes.

node : V11.10.1
npm : 6.7.0

[iKlsR]

@mistereechapman Thanks, the other way for me using git-bash. Using double quotes works. 🤷‍♂️

[yi-huan]

Thanks, Using double quotes works.

[guillermo]

After researching this seems to work:

$ npm run build -- --stats
$ npx webpack-bundle-analyzer ./build/bundle-stats.json 

Found here: https://medium.com/@jbandi/you-can-use-create-react-app-with-webpack-bundle-analyzer-without-ejecting-1b8727d9b2ea

[S3gillu]

If the documentation is updated to remove the single quotes from the path then this will work.

This is the perfect workaround as per now

[bugzpodder]

Source map explorer 2.0 is out and quotes should now be fixed.