Render React Component inside Power BI visual

[keerthanabasa]

We are trying the bundling approach.

Here is how we are rendering the component(index.tsx):

import * as React from "react";

import { createRoot, Root } from "react-dom/client";

import Component1 from "./Component1";

let root: Root | null = null;

export function render(container: HTMLElement) {

    if (!root) {

        root = createRoot(container);

    }

    root.render(<Component1 />);

}

Our React component depends on WASM files. We are able to load these WASM files by whitelisting the corresponding lib.js file, which is loaded as part of the Power BI custom visual.

However, we are explicitly passing an additional worker.js file to our React component which is rendered inside Component1. Power BI is blocking this worker script, resulting in the following error:SecurityError: Failed to construct 'Worker': Script at 'https://app.powerbi.com/****/*/worker.js' cannot be accessed from origin 'null'.

In this context, will Power BI allow loading a worker.js file specific to the React component, or is this scenario fundamentally restricted by Power BI’s sandboxing model?

[rohit1991]

Hii @keerthanabasa 

Power BI custom visuals run inside a strict sandboxed iframe, which blocks loading external or dynamically created Web Workers (including worker.js) due to origin and CSP restrictions (origin 'null'). Even if the worker file is bundled or hosted under app.powerbi.com, Power BI does not allow custom visuals to spawn separate worker scripts. Only inline JS and bundled assets executed on the main thread are supported. This limitation is by design, so using Web Workers in this way is fundamentally not supported in Power BI custom visuals.