JSON: SyntaxError using outputFormats behaves different from build to dev

support
1

Good morning everybody and i try to describe my issue as good as i can :wink:

So i’ve setup JSON as outputFormat inside my config the following way:

  home = ["HTML", "RSS", "JSON"]
  section = ["HTML","RSS"]

Next step is to crawl the data i only need inside my layouts/home.json:

[
{{ $context := .Site.GetPage "/welcome"}}
        {
            "images": [
            {{ range $context.Params.welcomeslides }} 
                {{ with $context.Resources.GetMatch . }} {{ dict "src" .RelPermalink | jsonify (dict "prefix" " ") }} {{ end }},
            {{ end }}
        ],
        }
]

When i run the dev wich looks like the following:

"dev": "exec-bin node_modules/.bin/hugo/hugo server --gc --bind=0.0.0.0 --disableFastRender --baseURL=http://localhost"

Finally i get this error inside my console in chrome:

Error fetching images from JSON: SyntaxError: Unexpected token ']', ..." 
        ],
       "... is not valid JSON

But when i run my hugo build everything is working as expected and i get back valid JSON wich looks like this:

[{"images":[{"src":"/welcome/DSC01036-2.webp"},{"src":"/welcome/DSC01102-2.webp"}]}]

In the end i’m using this information in my custom.js file wich lives insides the assets folder:

// --------------------------------------------- //
  // Vegas Kenburns Start
  // --------------------------------------------- //

  var bgndKenburns = $("#bgndKenburns");

  if (bgndKenburns.length) {
    fetch("/index.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        var images = data[0].images;
        console.log(images);

        bgndKenburns.vegas({
          timer: false,
          preload: false,
          preloadImage: true,
          delay: 10000,
          transition: "fade2",
          transitionDuration: 1000,
          slides: images,
          animation: [
            "kenburnsUp",
            "kenburnsDown",
            "kenburnsLeft",
            "kenburnsRight",
          ],
        });
      })
      .catch(function (error) {
        console.error("Error fetching images from JSON:", error);
      });
  }

Everything works fine in my build but get those weird errors during dev. Maybe somebody could point me in the right direction.

Best regards Anthony