Solution found to "CSP-violating eval error in javascript of new instance"

[nindokag]

Hello all,
my old thread was locked due to inactivity: CSP-violating eval error in javascript of new instance

but i wanted to post that I finally found a solution to the problem I had encountered there, and I wanted to share the solution in case any other instance admins run into the same issue.

The symptom:

• once I logged into my instance, i got a blank page with the following error messages in Firefox javascript console:

Uncaught EvalError: call to eval() blocked by CSP
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).

The diagnosis:

• There are two sets of webpack config files included in the mastodon git checkout: in ~mastodon/live/config/webpack/ there is development.js and production.js.
• development.js has the setting devtool: 'cheap-module-eval-source-map'
• production.js by contrast has the setting devtool: 'source-map'
• The development settings tell Webpack to use a method of bundling javascript which uses eval() statements in the output code, together with a content-security-policy header that allows eval(). (Easier debugging during development)
• The production settings tell Webpack to use no eval() statements, with a content-security-policy header that disallows eval(). (More secure for production)
• Somehow during mastodon installation, all my files had been compiled in development mode instead of in production mode. But they were getting served in production mode, with the stricter content-security-policy header, making the browser treat the eval()s as illegal.

The solution:

• delete the old bundle files with rm -r ~mastodon/live/public/dist/js/*
• (as mastodon user): npm run-script build:production to recompile javascript in production mode.
• (as root user) systemctl restart mastodon-web mastodon-sidekiq mastodon-streaming to have mastodon re-read the newly compiled javascript bundles.

Hope this helps somebody.