Search code examples
pugpreprocessorampscripthtml-preprocessor

amp-state/JSON format not supported in pug js

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?

enter image description here

Complete error message in short

enter image description here

Solution

  • 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.