Extension will not work on Tableau Server and Chrome

[emanual4real]

I'm receiving the below error on Tableau Server using Chrome:

[Report Only] 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 * blob:".

My extension is hosted on Rancher and works fine on Tableau Desktop. It also works using Edge with Tableau Server. The best I can tell, this is related to Content Security Policy and it does not like me running the Tableau Extensions script.

Code:

/public/tableau.extensions.1.4.0.min.js

/public/index.html <script src="%PUBLIC_URL%/tableau.extensions.1.4.0.min.js"></script> in the head tag

/src/DashboardName.jsx

import React, { useState, useEffect } from 'react';

const { tableau } = window;

export default function DashboardName() {
  const [dashboardName, setDashboardName] = useState('');

  useEffect(() => {
    tableau.extensions.initializeAsync().then(() => {
      const { name } = tableau.extensions.dashboardContent.dashboard;

      setDashboardName(name);
    });
  });

  return (
    <h1>
      {`You have opened ${dashboardName ||
        '____'} Tableau workbook or dashboard`}
    </h1>
  );
}

[johnDance]

Hi, This message is "Report Only" so everything should still run. Do you have any other errors in the console? We are guessing that you are seeing this because of how you are webpacking your code. Perhaps with "eval-source-maps" (or one of the other "eval" options) for devtool. See https://webpack.js.org/configuration/devtool/. Try using a production bundle (with no source maps) or one of the non-eval options. Let us know how it goes. John

[bcantoni]

Closing based on John's latest comment. If this is still an issue, please reopen with comments.