The section "projet" could not be loaded: The JSON response from the API could not be parsed

I found some similar topics, but nothing that seamed related to my issu.
I have this error message in my panel. Activating Debug doesn’t show anything.


My host is Fortrabbit. I just realized the bug. I think the last thing I did was update Kirby to 3.5.3.1. That being said, the local version works as expected (with Laravel Valet, PHP 8)!
Here are my Fortrabbit settings (with PHP 7.4, but changing it to 8 didn’t seams to resolve the issu).

Thanks!

Hi Jolin,

could you please post the blueprint that contains this section?

The site blueprint
title: Site

columns:
  - width: 2/3
    sections:
      projet: sections/projets

  - width: 1/3
    sections:
     pages: true
     content:
      type: fields
      fields:
        author:
          label: Author
          type:  text
        description:
          label: Description
          type:  textarea
        keywords:
          label: Keywords
          type:  tags
        copyright:
          label: Copyright
            type: textarea
And the section blueprint
type: pages
headline: Projets
parent: kirby.page("projets")
# template: projet
templates:
  - projet
  - projet-continu
empty: No project yet
limit: 30

Is your indentation exactly like what you posted?

Oups no, I fixed it in my previous post.

Ok, the blueprints looks ok now. Maybe you have an error in one of the templates projet or projet-continu. Could you please post them here as well?

projet.yml

title: Project

columns:
  - width: 2/3
    sections:
      files: 
        headline: Images
        template: project-image
        info: "{{ file.dimensions }}"
        layout: cards
        size: small
        image:
          ratio: 3/2
          cover: true

  - width: 1/3
    sections:
      content:
        type: fields
        fields:
          client:
            type: text
            width: 1/2
          projet:
            label: Conception
            type: textarea
            width: 1/2
          text:
            type: textarea
            width: 1/2
      sideImages:
        type: files
        template: side-image

projet-continu.yml

title: Projet-continu
extends: pages/projet

I meant the php templates

Oh! Both are pretty similar:

<?php snippet('head') ?>

<?php snippet('projet-poster') ?>

<?php snippet('menu') ?>

<?php snippet('projet-content') ?> OR <?php snippet('projet-content-continu') ?> 

<?php snippet('projet-suivant') ?>

<?php snippet('foot') ?>

And here are the related snippets

Hm, those look rather innocent as well, even if in some places if statements would make the code more reliable.

When you updated, did you clear the media folder?

I just deleted the entire media folder, and the same error appears. :slightly_frowning_face:

I tried doing a blueprint with only

title: Site

sections:
  projet: sections/projets

But no more luck.
Here’s the console log

Error: The JSON response from the API could not be parsed
onParserError — app.js:1:22240
(fonction anonyme) — app.js:1:17486
asyncFunctionResume
[native code]
promiseReactionJobWithoutPromise

Hm, I’m a bit lost. Since it works locally, I would assume that there’s some server side configuration that’s causing this. What about server side caching? Have you tried to purge/disable that?

I’m afraid I don’t know how to do that. I contacted Fortrabbit; will keep you posted if they have any clue!

I played a bit with the code this morning.
If I remove the following from sections/projets

parent: kirby.page("projets")

I get it kinda working, but not showing any projects. Dont know if it help!

Does the given page exist at the path? Is the folder name really projet?

Yes, I have both the /blueprints/pages/projets.yml and content/01_projets in place.

I found this in the Docs, but it doesn’t seams to relate unfortunately :confused:

If you open Developer Tools in the browser, and inspect the JSON/Panel responses, what is their content? There could be your answer; I remember debugging some very old project of mine, where expected JSON kept failing just to discover that response was actually misformatted because of some PHP errors

Hey @adamkiis, thanks for the suggestion. I find nothing that seams weird.
Here’s the HTML from Inspect Elements.

<section class="k-pages-section k-section k-section-name-projet"><header class="k-section-header"><h2 class="k-headline">   <!----></h2><!----></header><div data-theme="negative" class="k-box"><div data-size="small" class="k-text"><strong> The section "projet" could not be loaded: </strong> The JSON response from the API could not be parsed </div></div></section>
<header class="k-section-header"><h2 class="k-headline">   <!----></h2><!----></header>
<div data-theme="negative" class="k-box"><div data-size="small" class="k-text"><strong> The section "projet" could not be loaded: </strong> The JSON response from the API could not be parsed </div></div>
<div data-size="small" class="k-text"><strong> The section "projet" could not be loaded: </strong> The JSON response from the API could not be parsed </div>
<strong> The section "projet" could not be loaded: </strong>
 The JSON response from the API could not be parsed 
<div data-size="small" class="k-text"><strong> The section "projet" could not be loaded: </strong> The JSON response from the API could not be parsed </div>
<div data-theme="negative" class="k-box"><div data-size="small" class="k-text"><strong> The section "projet" could not be loaded: </strong> The JSON response from the API could not be parsed </div></div>
<section class="k-pages-section k-section k-section-name-projet"><header class="k-section-header"><h2 class="k-headline">   <!----></h2><!----></header><div data-theme="negative" class="k-box"><div data-size="small" class="k-text"><strong> The section "projet" could not be loaded: </strong> The JSON response from the API could not be parsed </div></div></section>

And the Console log

Error: The JSON response from the API could not be parsed
onParserError — app.js:1:22240
(fonction anonyme) — app.js:1:17486
asyncFunctionResume
[native code]
promiseReactionJobWithoutPromise
onError — app.js:1:22082
(fonction anonyme) — app.js:1:17731
asyncFunctionResume
(fonction anonyme)
promiseReactionJobWithoutPromise
app.js:1:11815

Does that helps?