Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
Has anyone used React to develop a custom visual? I'm running into various problems in getting started. Namely, I'm gettting typescript errors on the typings for react and react-dom as well as not generating a visual with the appropriate GUID as a property.
Solved! Go to Solution.
I got this workaround from David Tittsworth...Thanks!
Add a global.js file with contents:
var React = window.React;
var ReactDOM = window.ReactDOM;
and then in pbiviz.json, add a reference to the global.js file in externalJS at the bottom.
This works!
I know your issue is about 6 month old but i am having the problem but right at the beginning.
Could you help to install react?
Did you install it over "npm install --save react" and "typings install --save dt~react" and how did you added all togther in your pbiviz.json and tsconfig.json?
(if you can it would be cool to see your source code <3)
Greetings
Hello @Muesli
Please take a look at powerbi-visuals-react-sample as an example.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Hello @sdrucker,
As far as I know Network Navigator uses React. However, it based on the legacy API.
In other words, you might face some issues using React with the new Power BI Custom Visuals API.
Could you please send an error message to investigate the issue that you have faced?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
My first problem was getting 'pbiviz start' to compile the visual. I kept getting this error:
error TYPESCRIPT /visualPlugin.ts : (8,110) Property 'PBI_CV_1DD29A27_0A88_4642_A960_1B0EEF3F48C2' does not exist on type 'typeof visual'. (The GUID is the one that I specify in my pbiviz.json file for the visual's guid.
I'm not sure where the guid get's appended to the visual, but it wasn't doing that when I changed the visual.ts file to visual.tsx.
I was able to get around that by explicitly naming my module the following:
I've verified that the problem is that React and ReactDOM are not being added correctly even though I've added the files to the externalJS line of pbivis.json. Not sure why this isn't working. Any opinions?
Some more information: After looking around, I found people having similar problems. Their solution was found here:
https://github.com/Microsoft/PowerBI-visuals/issues/99
Essentially, when react is loaded, it's put onto a window object which, (due to sandboxing?) is mucked with and not available at the update call.
By saving the window in the constructor ( this.window = window;), I can later on do this in the update:
Power BI creates a copy of the window object in order to isolate custom visual's libraries from its own.
D3 works well due to special logic that binds d3 to the global context.
I suppose that we will get rid of isolation to simplify using external libraries.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
I got this workaround from David Tittsworth...Thanks!
Add a global.js file with contents:
var React = window.React;
var ReactDOM = window.ReactDOM;
and then in pbiviz.json, add a reference to the global.js file in externalJS at the bottom.
This works!
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.