# Atlas JSON Error

**URL:** <https://phaser.discourse.group/t/atlas-json-error/9077>\
**Category:** Phaser 3\
**Created:** [March 9, 2021, 8:07am UTC](https://phaser.discourse.group/t/atlas-json-error/9077 "2021-03-09T08:07:46Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ApeAaron](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@ApeAaron](https://phaser.discourse.group/u/ApeAaron)\
**Post date:** [March 9, 2021, 8:07am UTC](https://phaser.discourse.group/t/atlas-json-error/9077/1 "2021-03-09T08:07:46Z")

</div>

Hello!

I was following a tutorial which created an atlas from a Sprite Sheet. However, when I follow the steps, I get an error. I have the problem, even when I run the complete project example provided. I will also provide the JSON file below, however, I doubt that it is actually a problem with the JSON formatting, but rather something I am doing or missing. As for what I have already tried, I have converted the format from ANSI to UTF-8 and vice-versa, have moved the JSON file to various locations, tried on different browsers and have checked that I am running the most recent version. Any help you can provide would be greatly appreciated! Thanks.

```javascript
Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

```

File:

```javascript
{"frames": [
{
	"filename": "penguin_die01.png",
	"frame": {"x":0,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_die02.png",
	"frame": {"x":72,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_die03.png",
	"frame": {"x":144,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_die04.png",
	"frame": {"x":216,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_hurt.png",
	"frame": {"x":288,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_jump01.png",
	"frame": {"x":360,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_jump02.png",
	"frame": {"x":432,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
},
{
	"filename": "penguin_jump03.png",
	"frame": {"x":504,"y":0,"w":72,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":72,"h":64},
	"sourceSize": {"w":72,"h":64}
}],
"meta": {
	"app": "https://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "penguin.png",
	"format": "RGBA8888",
	"size": {"w":576,"h":64},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:d2c139e3b5aad160701f37ff54893078:5812e8cd6bf7c928dd5f9d43a8f768b6:6811a9a90bad8562d7be890a479a72ac$"
}

```

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [March 9, 2021, 8:26am UTC](https://phaser.discourse.group/t/atlas-json-error/9077/2 "2021-03-09T08:26:34Z")

</div>

Check your browser’s dev tools network tab. My guess is your path is wrong, so it’s trying to parse a 404 HTML page.

---

<div class="post-metadata">

**Author:** ![ApeAaron](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@ApeAaron](https://phaser.discourse.group/u/ApeAaron)\
**Post date:** [March 10, 2021, 10:00pm UTC](https://phaser.discourse.group/t/atlas-json-error/9077/3 "2021-03-10T22:00:20Z")

</div>

Not seeing any 404s in the network tab. This is what it looks like.

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/ab9d0a3c9d03cf08acbab02f701ea9be4a00692f.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 10, 2021, 10:41pm UTC](https://phaser.discourse.group/t/atlas-json-error/9077/4 "2021-03-10T22:41:50Z")

</div>

Some dev servers (parcel) send 200 ok instead of 404 not found. Look at the **Response** tab to see what it’s sending. But most likely `http://localhost:8000/assets/penguin.json` is missing.

---

<div class="post-metadata">

**Author:** ![ApeAaron](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@ApeAaron](https://phaser.discourse.group/u/ApeAaron)\
**Post date:** [March 10, 2021, 10:53pm UTC](https://phaser.discourse.group/t/atlas-json-error/9077/5 "2021-03-10T22:53:07Z")

</div>

Okay, I have actually identified the issue, but I have no idea how to fix it. For reference, I am using [this](https://github.com/ourcade/phaser3-typescript-parcel-template) template. When I moved the assets into the dist folder, it worked. How do I set it so that it actually looks in the public folder for static assets? Is it something I do in the code, or is it something I do when I run the project?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 11, 2021, 12:18am UTC](https://phaser.discourse.group/t/atlas-json-error/9077/6 "2021-03-11T00:18:23Z")

</div>

It’s supposed to use the `public` folder automatically. But you may need to stop the server/watcher and then start it again (`npm run start`) if you just added things to `public`.

---

<div class="post-metadata">

**Author:** ![ApeAaron](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@ApeAaron](https://phaser.discourse.group/u/ApeAaron)\
**Post date:** [March 11, 2021, 1:21am UTC](https://phaser.discourse.group/t/atlas-json-error/9077/7 "2021-03-11T01:21:43Z")

</div>

I did that, and I am still having the issue. I think it is something in the server settings file.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [March 11, 2021, 4:51am UTC](https://phaser.discourse.group/t/atlas-json-error/9077/8 "2021-03-11T04:51:54Z")

</div>

> <https://github.com/parcel-bundler/parcel/issues/5400>
>
> 🐛 bug report
> Parcel loads files with the wrong MIME-type.
> In this issue I'll focus on a specific case where .json gets loaded...

---

<div class="post-metadata">

**Author:** ![ApeAaron](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@ApeAaron](https://phaser.discourse.group/u/ApeAaron)\
**Post date:** [March 11, 2021, 11:00pm UTC](https://phaser.discourse.group/t/atlas-json-error/9077/9 "2021-03-11T23:00:03Z")

</div>

This is actually the problem! Thank you so much for your help, though it doesn’t seem like there is a solution beyond moving the assets into the dist folder. this Parcel-Bundler seems to be a real piece of work. Thanks again.
