Invalid json response body error

🙋Get Help
1

Hello :blush: I hope someone can give me some advice.

I’m currently having this issue that the json response body is invalid:

FetchError: invalid json response body at http://hippiekick.byethost3.com/wp-json/wp/v2/posts?_embed=true&slug=startsida reason: Unexpected token < in JSON at position 0
      at eval (webpack-internal:///./node_modules/node-fetch/lib/index.mjs:276:32)
      at eval (webpack-internal:///./node_modules/@frontity/react-easy-state/dist/bundle.js:58:245)
      at batchedUpdates$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3767:145)
      at batch (webpack-internal:///./node_modules/@frontity/react-easy-state/dist/bundle.js:58:237)
      at Object.apply (webpack-internal:///./node_modules/@frontity/react-easy-state/dist/bundle.js:61:179)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
      at Object.populate (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/populate.ts:27:12)
      at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:35:217)
      at eval (webpack-internal:///./node_modules/@frontity/wp-source/src/actions.ts:40:1)

I found this thread which shows the person had the same issue I believe. So I tried to implement solution in the menu-handler and it doesn’t seem to make any difference. This is what it looks like in my menu-handler:

const menuHandler = {
    name: "menus",
    priority: 10,
    pattern: "/menu/:slug",
    func: async ({ link, params, state, libraries }) => {
      console.log("PARAMS:", params);
      const { slug } = params;
  
      // Fetch the menu data from the endpoint
      const response = await libraries.source.api.get({
        endpoint: `/menus/v1/menus/${slug}`,
        params: {
          head_tags: false // This one should disable REST API - Head Tags.
        }
      });
  
      // Parse the JSON to get the object
      const menuData = await response.json();
  
      // Add the menu items to source.data
      const menu = state.source.data[link];
      console.log(link);
      Object.assign(menu, {
        items: menuData.items,
        isMenu: true,
      });
    },
  };
  
  export default menuHandler;

And I was wondering why is the menu registered as a Custom Post Type and not a page is it possible to change this?

Thank you in advance!

2

The error message is caused because WorsPress is returning HTML before/after the JSON, which is most likely an error message.
So going to that endpoint manually should give you the reason.

However I tried that endpoint and it only returns an empty array (which makes sense, since your homepage is not a post). So I guess the error has been resolved and should work again.
It has nothing to do with the menu handler or head tags though, at least I haven’t seen any problems with it in my projects.

As for your second question; WordPress handles menu’s as a (custom) post type, which is normal since it’s not an actual page or post.
In the thread you mentioned the problem was caused by a CPT called menu’s, at least as far as I can tell.

2 Likes