How to compile pug for client use?

Question

Pug

in node.js environment (from pug docs):

//main.js

const pug = require('pug')

console.log(pug.renderFile('template.pug', {
  name: 'Timothy'
}));

when running in node, everything is fine, but as soon as I try to do something similar on the client, everything falls down...

Uncaught Error: Cannot find module 'fs'
    at newRequire (main.js:37)
    at localRequire (main.js:53)
    at Object.parcelRequire.../node_modules/pug/lib/index.js (main.js:132)
    at newRequire (main.js:47)
    at localRequire (main.js:53)
    at Object.parcelRequire.main.js.pug (main.js:593)
    at newRequire (main.js:47)
    at main.js:81
    at main.js:120

in principle, as expected, we do not have access to the file system... let's
try to build with parcel:

‼  Could not load existing sourcemap of "../node_modules/uglify-js/tools/node.js".
×  C:\Users\RokeAlvo\Desktop\js\project\vipeco\frontend\test-pg\node_modules\uglify-js\tools\node.js:169:27: Unterminated string constant (169:27)
  167 |     }
  168 | 
> 169 |     var mappingUrlPrefix = "\n
      |                           ^
  170 |     if (options.sourceMapInline) {
  171 |         stream += mappingUrlPrefix + "data:application/json;charset=utf-8;base64," + new Buffer(source_map).toString("base64");
  172 |     } else if (options.outSourceMap && typeof options.outSourceMap === "string" && options.sourceMapUrl !== false) {

tell me where to dig ...
well, or in extreme cases, which template engine can be used without a framework?
of course, and so, in principle, not bad:

return `
        <div class="item">
          <div class="top">
              <div class="name">${name}</div>
              ${ratingBlockTemplate(rating)}
              <div class="date">${date}</div>
          </div>
          ${textBlockTemplate(textBlock)}
      </div>

  `

but I would like something like jsx in react or pug in vue