how can I allow unsafe-eval only while I use pug

[maa-wtag]

In one of my project written in reactjs I am using pug to render some pdf templates in my application. But it is causing issues in CSP policies as pug uses eval to generate forms from template, which is not allowed. In the console it shows me this error while I run the app.
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
My question is if there are any way I can bypass this issue while rendering pug files in my app or is it not possible at all by default while using pug.

[krishnaGauss]

Pug’s client-side template compilation uses new Function() (like eval), which violates strict CSP rules without 'unsafe-eval' in script-src. There’s no way to bypass this in the browser, CSP is doing its job.

Solutions:

• Precompile at build time – Use the Pug CLI or bundler plugin (Webpack/Vite) to compile .pug into HTML or JS functions before shipping to the browser.
  pug --client --name-after-file templates/ -o compiled_templates/

• Render server-side – Use pug.renderFile() or similar on the backend, send HTML to the client.

     import pug from 'pug';
     const html = pug.renderFile('template.pug', { data: {...} });
  

• Avoid client-side Pug – Render once at build time, use plain HTML in React.

• Adding 'unsafe-eval' to CSP will work, but is discouraged for security. Best practice: compile templates outside the browser.

TL;DR: You can’t safely run Pug’s runtime compiler in the browser with a strict CSP -> precompile or render server-side.