jade to pug migration => Cannot read property 'every' of undefined on function call

Question

We had a working jade render that could also include html that was rendered through a function.

// a function that is placed in the options object for jade.render
const someFunction = (para1, para2) {
  // some logic that gets a complete template from a source
  const template = (src) = `img.someClass(src=${src})`;
  // And returns the jade rendered variant of that template
  return jade.render(template, { src: para1 });
}

// # .jade file
div(class=(cover.hasCustomLogo ? 'cover coverWithCustomLogo' : 'cover'))
  img.logo(src=cover.logo)
  p.title=cover.title
  p.extension=cover.extension
  !{someFunction(cover.src)}

After the migration to pug, we got the error Cannot read property 'every' of undefined .

After some investigation, this lead to the !{someFunction(cover.src)} code inside the pug files. By changing the code to #{someFunction(cover.src)} the error did no longer occur, but Pug started adding opening and closing signs.

Any ideas on how to solve this?

rendered html before pug

<div class="cover">
  <img class="logo" src="test.jpg">
  <p class="title"></p>
  <p class="extension"></p>
  <img class="someClass" src="otherJPG.jpg">
</div> 

rendered html after pug with interpolation

<div class="cover">
  <img class="logo" src="test.jpg">
  <p class="title"></p>
  <p class="extension"></p>
  <<img class="someClass" src="otherJPG.jpg">>
</div> 

Answer 1

After a few hours of trying and failing, the error was resolved as follows.

!{} does no longer work in pug as ! points to the doctype tag.

Solved it by using the |symbol. The solution then became

div(class=(cover.hasCustomLogo ? 'cover coverWithCustomLogo' : 'cover'))
  img.logo(src=cover.logo)
  p.title=cover.title
  p.extension=cover.extension
  | !{someFunction(cover.src)}

The solution came after reading the following stackoverflow question How to insert raw HTML in Pug file (not include external HTML file)