Issues with Laravel Livewire and Content Security Policy on Production Server

Hello Stack Overflow community,

I'm encountering an issue with Livewire on my production server related to the Content Security Policy (CSP). Here’s a brief overview of my setup and the problem I'm facing:

SETUP:

Development Environment:
OS: Local development on Laragon
Web Server: Nginx
Laravel Version: 10
Livewire Version: 3.4
NPM Version: 9.8.1
Node.js Version: 18.18.2
Vite Version: 3.0.2
Browser: Tested on Chrome

Production Environment:
OS: Ubuntu 20.04.6 LTS
Web Server: Nginx v1.18.0
Laravel Version: 10
Livewire Version: 3.4
NPM Version: 10.7.0
Node.js Version: 20.13.1
Vite Version: 3.2.10
Browser: Tested on Chrome

ISSUE:
In the production environment, when accessing the application, I encounter an error related to Livewire's JavaScript file:

Warning:

Alpine Expression Error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'".Expression: "tableWrapper($wire, )"

Error:

Uncaught 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: "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'".at new AsyncFunction (<anonymous>)at safeAsyncFunction (livewire.js?id=239a5c52:1254:21)at generateFunctionFromString (livewire.js?id=239a5c52:1264:16)at generateEvaluatorFromString (livewire.js?id=239a5c52:1269:16)at normalEvaluator (livewire.js?id=239a5c52:1234:111)at evaluateLater (livewire.js?id=239a5c52:1224:12)at evaluate (livewire.js?id=239a5c52:1220:5)at Function.<anonymous> (livewire.js?id=239a5c52:3491:17)at flushHandlers (livewire.js?id=239a5c52:1358:48)at stopDeferring (livewire.js?id=239a5c52:1363:7)

NGINX CONFIGURATION:
Here’s my Nginx configuration for the production server:

server {listen 443 ssl http2;server_name system.example.com;set $base /app/system;root $base/public;add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'";include nginxconfig.io/ssl.conf;include nginxconfig.io/security.conf;access_log /var/log/nginx/system-access.log combined buffer=512k flush=1m;error_log /var/log/nginx/system-error.log warn;index index.php;location / {    try_files $uri $uri/ /index.php?$query_string;}include nginxconfig.io/general.conf;location ~ \.php$ {    fastcgi_pass unix:/var/run/php/php-fpm.sock;    include nginxconfig.io/php_fastcgi.conf;}location = /livewire/livewire.js {    expires off;    try_files $uri $uri/ /index.php?$query_string;}}server {    listen 80;    server_name system.example.com;    location / {        return 301 https://system.example.com$request_uri;    }}

WHAT I’VE TRIED:

1. I attempted to add unsafe-eval to the CSP header. :

add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline''unsafe-eval'";

2. I've verified that the necessary files are present on the server.

Despite these efforts, the issue persists. Any guidance on how to properly configure Livewire to work with a strict CSP, or alternative approaches to avoid using unsafe-eval, would be greatly appreciated.

Thank you!