Custom web part broken once deployed

Question

I have a custom web part I created that works in the local workbench and the hosted workbench both but just shows "An unexpected error occurred" after I deploy it to my site.

In the console, I get a bunch of errors that say:

[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-eval' 'nonce-8071d1c9-2922-4d55-9646-83a09ac8d21a' ". Either the 'unsafe-inline' keyword, a hash ('sha256-OdsFlzz5N7GK0bIHVYdMGgT2x9qt9CFla/9QDXXEyXM='), or a nonce ('nonce-...') is required to enable inline execution.

I found a similar issue on GitHub but the issue was closed because the author stopped responding but the suspicion was that there was an issue with what the author had in their render() method.

To test, I commented out everything in my render method and replaced it with:

this.domElement.innerHTML = "<h1>Hellooooo World!</h1>";

Again it works in the local and hosted workbench but doesn't work at all once deployed:

Answer 1

I went back and re-read the bug report I found and noticed that the OP was able to get it working if he turned off domain isolation which renders the web part in an <iframe> instead of a <div>.

I did the same and my custom web part began to work as expected. I changed isDomainIsolated to false in the package-solution.json:

{
    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
    "solution": {
    "name": "MyWebPart",
    "id": "a624ed83-3f46-4892-978a-XXXXXXXXXXXX",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "webApiPermissionRequests": [
      {
        "resource": "UserApps_Service",
        "scope": "user_impersonation"
      },
      { 
        "resource": "Windows Azure Active Directory", 
        "scope": "User.Read" 
      }
    ],
    "isDomainIsolated": false
  },
  "paths": {
    "zippedPackage": "solution/MyWebPart.sppkg"
  }
}