Nuxt apollo error "Unexpected token < in JSON at position 0"

In my nuxt/apollo/express app, I have the following in my nuxt.config.js file

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: process.env.BASE_URL || 'http://localhost:3000',
        browserHttpEndpoint: '/graphql'
      }
    },
    defaultOptions: {
      $query: {
        loadingKey: 'loading',
        fetchPolicy: 'cache-and-network',
        errorPolicy: 'all'
      }
    }
  },

my express server index.js has the following

  const apolloServer = new ApolloServer({
    typeDefs,
    resolvers,
    playground: false
  });

  apolloServer.applyMiddleware({
    app,
    path: '/graphql'
  });

My app allows users to create lists, which are stored in MongoDB.

  1. User creates list on homepage, which is temporarily stored in local variables.
  2. They click on a Create List button.
  3. The get redirected to a page with a unique id for the newly created list.

So far, so go. Everything works as expected. However, when I refresh the page with the unique id, I get a “Unexpected token < in JSON at position 0” error message. The list has been created successfully and it exists in the database with the unique id.

my list/_id.vue component has the following code to fetch the list data

apollo: {
    list: {
      query: list,

      prefetch: ({ route }) => ({ shortId: route.params.id }),

      variables() {
        return {
          shortId: this.$route.params.id || this.listId
        };
      },
    }  
}

Please let me know if I’m missing any info and I would appreciate any help I can get.

That error message almost always means the same thing.

Try this in your browser’s console:

JSON.parse('<')

You’ll get that same error message.

Almost invariably, the < is the start of some HTML and that error indicates that something is trying to parse some HTML as JSON.

This is usually caused by a server configuration problem, leading to an HTML file being returned instead of the expected JSON. There are two common scenarios. Firstly, it might be the index page being returned as that’s a common configuration for history-based routing. Secondly, it could be a 404 page.

If the error is being generated in the client then it should be relatively easy to diagnose. For that you’d just go through the Network tab until you find the rogue request.

If the problem is being generated on the server it’ll be a bit trickier. You’ll need to add any logging you can and go through any logs to see which request is going wrong. You could try hand-crafting some requests to see what response you get back when you send them manually.

If I change my nuxt.config.js apollo property to the following:

clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:3000/graphql',
      }
    },

then everything works properly… on the desktop, but not on phones. On mobile devices, android and iphone, chrome and safari, when I try to create a new list, I get a network fetch error message.

At first I thought it had to do with CORS, so I added this to my apolloSever:

  apolloServer.applyMiddleware({
    app,
    path: '/graphql',
    cors: { origin: '*', credentials: false }
  });

But that did not make a difference. Tried adding the cors npm module in my express server code still no luck.

When you say it works on desktop… do you mean the same machine that’s running the server? Have you tried it from a different desktop?

I don’t know what httpEndpoint does, I don’t use nuxt or apollo, but if it’s using that in the browser then it’ll only work from the same machine. localhost relative to the phone means the server needs to be on the phone.

1 Like

Thanks, @skirtle. I dunno why I didn’t think to try another pc. I guess I was in too deep.
So, yes, I was having the same problem with save operation from another PC. I changed the api urls from localhost to the ip address of the development pc and everything started working.

In my production server, it will be the domain name so that should avoid that problem there. I hope this thread helps others avoid the frustration it caused me.