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.

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

Unexpected token � in JSON at position 0 #47

Closed
SukantGujar opened this issue Feb 12, 2017 · 13 comments
Closed

Unexpected token � in JSON at position 0 #47

SukantGujar opened this issue Feb 12, 2017 · 13 comments

Comments

@SukantGujar
Copy link

SukantGujar commented Feb 12, 2017

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

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

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

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

th0r commented Feb 13, 2017

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

@th0r th0r closed this as completed Feb 13, 2017
@SukantGujar
Copy link
Author

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

SukantGujar commented Feb 14, 2017

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

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

NullVoxPopuli commented Nov 30, 2018

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

valscion commented Dec 3, 2018

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

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

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

@BrianMikinski
Copy link

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

image

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

image

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

valscion commented Aug 13, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants