amp-state/JSON format not supported in pug js

Question

Not able to include the below code in pugjs. I am getting errors.

<body>
  <amp-state id="theFood">
    <script type="application/json">
      {
        "cupcakes": {
          "imageUrl": "https://amp.dev/static/samples/img/image2.jpg",
          "style": "greenBorder"
        },
        "sushi": {
          "imageUrl": "https://amp.dev/static/samples/img/image3.jpg",
          "style": "redBorder"
        }
      }
    </script>
  </amp-state>

I converted in pugjs as

amp-state#theFood
        script(type="application/json").
            {
                "cupcakes": {
                    "imageUrl": "https://amp.dev/static/samples/img/image2.jpg",
                    "style": "greenBorder"
                },
                "sushi": {
                    "imageUrl": "https://amp.dev/static/samples/img/image3.jpg",
                    "style": "redBorder"
                }
            }

But I am getting the below error. Does pugjs doesn't support JSON format? What Am I missing?

Complete error message in short

That error message is showing compiled html, so it doesn't seem to be an error pug is throwing. What is the full error message? — Sean, Mar 17 '21 at 23:15

score 0 · Accepted Answer · answered Mar 18 '21 at 21:37

Pug supports JSON as long as it's written within a Pug script block or it occurs all on one line within a vanilla HTML <script> element.

You'll either need to remove the linebreaks that occur within that <script> tag on line 3 of your file, or you'll need to use the Pug syntax like this:

script(type='application/json').
  {
    "cupcakes": ...
  }

Pug really isn't designed to have Pug syntax mixed with selectively-compressed HTML markup like you're currently doing.

It works for me when I add it on a single line within Pug – Arun Mar 29 '21 at 11:38 — Arun, Mar 29 '21 at 11:38

amp-state/JSON format not supported in pug js

1 Answers1