Unexpected token � in JSON at position 0

[SukantGujar]

Issue description

wba is reporting this error on a valid stats.json file.

Technical info

• Webpack Bundle Analyzer version: 2.2.3
• Webpack version: 2.2.1
• Node.js version: 6.9.1
• npm/yarn version: 3.10.8/0.19.1
• OS: Windows 10

Debug info

How do you use this module? As CLI utility or as plugin? As CLI Generated stats with webpack --profile --json > dist/stats.json

If CLI, what command was used? webpack-bundle-analyzer dist/stats.json dist

What other Webpack plugins were used?

LodashModuleReplacementPlugin
webpack.optimize.CommonsChunkPlugin

It would be nice to also attach webpack stats file. Attached! stats.zip

[valscion]

For some weird reason, your stats.json has a Byte Order Mark (BOM) in there, which causes the reporting to fail.

I don't know how that got in there... This issue in webpack repository seems to be the only one mentioning a BOM character.

Are you sure you haven't opened the stats.json in some text editor before trying to use webpack-bundle-analyzer CLI?

[SukantGujar]

That's odd. But no I haven't opened it up before, only after the error was displayed, I used Sublime to view it. And the one attached in this thread is straight from the tool. A possibility is that the LodashModuleReplacementPlugin plugin is somehow causing it, I had an issue in the past where a plugin injected its log into the webpack output, thereby breaking the json.

[valscion]

I don't think this is a bug in webpack-bundle-analyzer as the BOM shouldn't get into the stats file in the first place.

The bug is in whatever put the BOM in your stats.json, not WBA

[th0r]

This stats.json file is broken. Even node can't require it:

> var stats = require("./samples/stats.1.json");
SyntaxError: /webpack-bundle-analyzer/samples/stats.1.json: Unexpected token � in JSON at position 0

[SukantGujar]

Thanks @valscion and @th0r. After saving the generated file as UTF-8 in Sublime, the stats file displayed correctly with wba. FWIW, the source code is available here, in case you wish to try it out at your end. I tested it without LodashReplacementPlugin, but the issue remained, so I guess it could either be a weird environmental issue, or something related with webpack.

[SukantGujar]

Turned out to be an encoding issue with Powershell. VSCode used it for integrated terminal on my machine. For future users stumbling across this, use the following command to get build stats file in Powershell - webpack --profile --json | Out-file 'dist/stats.json' -Encoding OEM

[valscion]

Hey that's a great find, @SukantGujar! I created a PR to document this in case someone else stumbles upon the same issue: #51

[NullVoxPopuli]

I have this issue on linux. There is no out-file command... so.. yeah

Some info:

$ file -i dist/stats.json 
dist/stats.json: text/plain; charset=us-ascii

Found out about iconv

first attempt:

$ iconv -f US-ASCII -t UTF-8 -o stats-utf8.json dist/stats.json 
iconv: illegal input sequence at position 1791728

this didn't error:

$ iconv --to-code UTF-8 --output stats-utf8.json dist/stats.json 

[valscion]

Huh. This:

iconv: illegal input sequence at position 1791728

looks like your stats.json has something else than a BOM in the beginning.

Could you create a new issue @NullVoxPopuli with your case and fill in the issue template?

[BrianMikinski]

Turned out to be an encoding issue with Powershell. VSCode used it for integrated terminal on my machine. For future users stumbling across this, use the following command to get build stats file in Powershell - webpack --profile --json | Out-file 'dist/stats.json' -Encoding OEM

I know this issue is closed but something to note is that "Out-file" is a powershell command and will not work if you are running it within an npm script such as

npm run scriptName

You need to the windows command from an actual command prompt

[valscion]

What would that look like in practice? Is there a way to amend the documentation to cover this case @BrianMikinski ?

[BrianMikinski]

First off @valscion, this plugin is awesome, great work. I just discovered it a couple of days ago and it's fantastic.

As for my issue running the analyzer, I've figured out what was happening and a good path forward. Initially, when trying to get bundle analyzer up and running, I was using this npm run script to generate the stats.json file -

"buildStats": "webpack --config=webpack.config.js --env dev --profile --json > stats.json",

and when I went to run webpack I got the following error

After some internet sleuthing, I assumed I was running in the Byte Order Mark issue that you and @SukantGujar had stumbled across earlier and switched to the following npm run script

"buildStatsWin": "webpack --profile --json | Out-file 'dist/stats.json' -Encoding OEM // windows

this ultimately failed as well with the following error

which is probably caused by some node to powershell piping issue but I'm not exactly certain. Running the second command from the command line seemed worked great and generated a stats.json file but I was still unable to run the webpack bundle analyzer.

As it turns out, the initial webpack command works perfectly and the powershell piping script works great but for some reason the piping in both scripts (I'm running these on a Windows 10 machine) adds a new line to the stat.json with the path from which the the command was run. When I removed that line, everything started to work and bundle analyzer was up and running.

I'm still working on the upgraded branch of my code in JustBlog that will have on display but I"ll ping this thread if anyone wants to take a look.

Not sure where something obscure like this would belong in the documentation but I'm happy to help add it if you think other would benefit.

[valscion]

Hmm maybe something about npm scripts could warrant one sentence in the docs, maybe linking to your comment here even?