Unexpected token � in JSON at position 0
SukantGujar opened this issue · 13 comments
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
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?
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.
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
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
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.
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
Hey that's a great find, @SukantGujar! I created a PR to document this in case someone else stumbles upon the same issue: #51
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
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?
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
What would that look like in practice? Is there a way to amend the documentation to cover this case @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.
Hmm maybe something about npm scripts could warrant one sentence in the docs, maybe linking to your comment here even?