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

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: 

module powerbi.extensibility.visual.PBI_CV_1DD29A27_0A88_4642_A960_1B0EEF3F48C2
 
 That's not a great solution though as it doesn't automatically recompile on changes.
 
My next (and current) problem is that in my visual's update routine, I'm calling a ReactDOM.render, and it doesn't seem to be rendering anything. (I've tried something simple - 
ReactDOM.render(<div> This is a test </div>, this.target); but that's not working. It might be the way that I'm loading the react-library, which is in pbiviz.json  under external files. 
 
Still debugging, and unfortunately, it looks like the old network navigator does use the legacy API. 
If anybody has a solution, that would be great, if not, I'll post what I find...
--Steven
Anonymous's avatar
Anonymous
Not applicable
9 years ago

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? 

  • 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!