Gatsby: Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

[t2ca]

Description

Since updating gatsby to latest version i've been getting the following error in development.

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

Steps to reproduce

gatsby develop

Expected result

no error

Actual result

XMLHttpRequest.request.onreadystatechange
/Users/admin/Desktop/Projects/webpack/bootstrap:52
  49 | } else {
  50 |  // success
  51 |  try {
> 52 |      var update = JSON.parse(request.responseText);
  53 |  } catch (e) {
  54 |      reject(e);
  55 |      return;
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Environment

Binaries:
Node: 11.6.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 72.0.3626.81
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.111 => 2.0.111
gatsby-cli: ^2.4.8 => 2.4.8
gatsby-image: ^2.0.29 => 2.0.29
gatsby-plugin-emotion: ^4.0.3 => 4.0.3
gatsby-plugin-feed: ^2.0.13 => 2.0.13
gatsby-plugin-google-analytics: ^2.0.13 => 2.0.13
gatsby-plugin-less: ^2.0.11 => 2.0.11
gatsby-plugin-lodash: ^3.0.4 => 3.0.4
gatsby-plugin-mailchimp: ^4.0.0 => 4.0.0
gatsby-plugin-manifest: ^2.0.17 => 2.0.17
gatsby-plugin-netlify: ^2.0.8 => 2.0.8
gatsby-plugin-offline: ^2.0.22 => 2.0.22
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
gatsby-plugin-sharp: ^2.0.20 => 2.0.20
gatsby-plugin-sitemap: ^2.0.5 => 2.0.5
gatsby-plugin-typography: ^2.2.7 => 2.2.7
gatsby-remark-images: ^3.0.3 => 3.0.3
gatsby-source-filesystem: ^2.0.20 => 2.0.20
gatsby-source-firestore: ^1.0.3 => 1.0.3
gatsby-transformer-json: ^2.1.8 => 2.1.8
gatsby-transformer-remark: ^2.2.3 => 2.2.3
gatsby-transformer-sharp: ^2.1.13 => 2.1.13
npmGlobalPackages:
gatsby-cli: 2.4.8

[sidharthachatterjee]

Sorry you're seeing this, @t2ca

Can you link to a minimal reproduction of this if possible?

[KyleAMathews]

I've been seeing this too just now playing around with gatsby-starter-blog while fixing a delete data hot reload bug — it's pretty easy to reproduce — just delete and then checkout the delete file (to restore it) a few times and the error happens sooner or later.

[t2ca]

Im using gatsby-starter-default in both of my projects and see this error daily.

Thank you Kyle for confirming this!

[humbertqz]

Don't know if this helps but i'm having the same issue, but the app says:

External link plaza-cataluna was detected in a Link component. Use the Link component only for internal links.

But i do not have external links in the site.

[DSchau]

@humbertqz unrelated, probably.

That's triggered by this line because it looks like you're missing a preceding forward slash? e.g. it should be /plaza-cataluna not plaza-cataluna

[humbertqz]

You are correct @DSchau , thanks.

[jonlow]

I'm seeing this error too in my gatsby-mdx project. Happens occasionally when I run gatsby develop the first time, and then also when renaming/deleting mdx content pages.

[m4rrc0]

Seeing this too almost every time I restart the dev server manually but I just need to refresh the page manually too to make it disappear. If I can pinpoint the exact definition of this 'almost' I will report back.

[tseppl]

For me this seems to originate from HMR so possibly related https://github.com/webpack/webpack-dev-middleware/issues/68

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[birksy89]

I'm also getting this error... I've taken a screenshot of the area where it's failing for me:

my-gatsby-contentful-site/webpack/bootstrap:52

[adamfaryna]

I had the same issue when I started adding plugins configuration to gatsby-config.js. I mixed string declaration with object, which caused the issues

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      precision: 8,
    },
  },
  `gatsby-plugin-react-helmet`
]

when it should be:

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      precision: 8,
    },
  },
  {
    resolve: `gatsby-plugin-react-helmet`
  }
]

[aeblin]

Just ran into the same issue. Like @adamfaryna I was also mixing string and object declaration in gatsby-config.js

Updating my declarations to be consistent seems to have resolved the problem.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[karatechops]

Ran into this issue today - @adamfaryna suggestions worked for me.

`gatsby-plugin-styled-components`

changed to

{
  resolve: `gatsby-plugin-styled-components`,
},

solved the issue for me.

EDIT: this error still appears occasionally for me on yarn start after changing the gatsby-config.js file.

[interglobalmedia]

Hi, I also am getting Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0 with no errors (now at least) showing up in the Terminal console while running npx gatsby develop. It just remains stuck there. I think ultimately my issue is with hot-update.json. In this particular project I am referring to, there are occasional flashes of old code which has now been long removed, cache removed multiple times, public/ removed and npm run build re-run multiple times. And lately, no errors whatsoever. Before could not find dev-404.js (webpack). Now all my gatsby projects which were built with the default starter are stuck at this. The history to this is in another comment I made in another thread: https://github.com/gatsbyjs/gatsby/issues/13918

[t2ca]

This issue was fixed with gatsby version 2.5.6

[interglobalmedia]

I have all the latest versions of everything on another gatsby project (2.9.4) which I will not push to remote because it is not working, but here goes with the environment:

npx gatsby info --clipboard                                                                        ⏎

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    npm: 6.7.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  npmPackages:
    gatsby: ^2.9.4 => 2.9.4
    gatsby-image: ^2.1.4 => 2.1.4
    gatsby-plugin-emotion: ^4.0.7 => 4.0.7
    gatsby-plugin-feed: ^2.2.3 => 2.2.3
    gatsby-plugin-google-analytics: ^2.0.21 => 2.0.21
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1
    gatsby-plugin-offline: ^2.1.3 => 2.1.3
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.1.5 => 2.1.5
    gatsby-plugin-sitemap: ^2.1.0 => 2.1.0
    gatsby-plugin-typography: ^2.2.13 => 2.2.13
    gatsby-remark-copy-linked-files: ^2.0.13 => 2.0.13
    gatsby-remark-images: ^3.0.16 => 3.0.16
    gatsby-remark-prismjs: ^3.2.11 => 3.2.11
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1
    gatsby-remark-smartypants: ^2.0.9 => 2.0.9
    gatsby-source-filesystem: ^2.0.39 => 2.0.39
    gatsby-transformer-remark: ^2.4.0 => 2.4.0
    gatsby-transformer-sharp: ^2.1.21 => 2.1.21

And I am getting the same issue in Chrome when I run npx gatsby develop:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
XMLHttpRequest.request.onreadystatechange
/Users/mariacam/Development/docscorneronline/webpack/bootstrap:52
  49 | } else {
  50 |  // success
  51 |  try {
> 52 |      var update = JSON.parse(request.responseText);
  53 |  } catch (e) {
  54 |      reject(e);
  55 |      return;
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

So it has not been fixed. or at least with 2.9.4 it is recurring.

[interglobalmedia]

I solved the issue. I had been using @emotion/core @emotion/styled and was on version 10+. However, there is a major breaking change in version 10, and not a good idea to use anymore. So I changed over to styled components instead, AND in one of my deployed sites, interglobalmedia is the repo, I updated to the latest of gatsby everything, installed styled components and the necessary dependencies which I got from the Gatsby docs, removed emotion plugins, and added styled components to the gatsby-config.js file. Then I re-built successfully, ran npx gatsby develop, first opened in Firefox, and then in Chrome. Worked in both. Hope this might help others with this issue.

[neterial]

it seems to be related to chrome version, the hot reloading breaks and give out Unexpected token < in JSON at position 0 on Chrome( mine version is 75) but works on safari

[tormi]

it seems to be related to chrome version

Same here, error occurs with Chrome, but not with FF.

[interglobalmedia]

Same here. Only Safari is not a problem. On FireFox, after a while, i have to go in a private window. With Chrome, if you go in incognito mode, there is no problem. So FF and Chrome, incognito, and Safari, everything is fine. However, in my case, it is partially due to an extension I use in firefox at least. Don't have that extension in Safari.

[jameesy]

Reporting the same thing in Chrome. Again, fine in incognito mode.

Just to note, I am purely using object declaration in gatsby-config.js.

[tormi]

It started after I disabled offline mode if I remember correctly.

[faizhameed]

I am having this issue i restarted the server after fixing the gatsby config to all plugins to objects but still im getting this problem

module.exports = {
  siteMetadata: {
    title: "Full-StackDeveloper",
    author: "Faiz Hameed",
  },
  plugins: [
    { resolve: `gatsby-plugin-sass` },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
  ],
}

[shawngrona]

I have seen this problem on a site that was already deployed (ie not dev server). Refreshing the page fixed it, but that kinda feels like a chrome caching issue. I'll update with steps to repro if I can, thx

[Edit]
Looks like if i'm already deployed seeing this, i'm having this problem
https://community.netlify.com/t/uncaught-syntaxerror-unexpected-token-on-new-build-using-gatsby-js/13192
https://spectrum.chat/react/general/how-to-handle-deployments-with-webpack-code-splitting~16dc5f85-0b4b-4eee-8693-066d82dcdc7f