Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
9 years ago
Solved

react

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 ge...
  • Anonymous's avatar
    Anonymous
    9 years ago

    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! 

Anonymous's avatar
Anonymous
Not applicable
9 years ago

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:

this.window.ReactDOM.render(this.window.React.createElement("div", null, " React test "), this.target);
 
This works! But is dissatisfying because when compiling the following jsx code
this.window.ReactDOM.render(<div> React Test </div>, this.target) 
it will produce:
this.window.ReactDOM.render(React.createElement("div", null, " React test "), this.target);
 
So, my question is now, why does d3 get elevated to a global that I can get to from the Custom Visual's update routine, but React or other external libraries aren't?
v-viig's avatar
v-viig
Community Champion
9 years ago

Anonymous

 

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

[email protected]

  • Anonymous's avatar
    Anonymous
    Not applicable
    9 years ago

    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!