Menu
Download Free Trial

Integration with Reactjs with webpack

Answered

Hi flexmonster team,
 
I’m trying to integrate the component within a reactjs application that is build using webpack. I could not find any tutorials for this. As of now I have <script src=”../flexmonster/flexmonster.js” type=”text/javascript”></script> within my index.html file, but running
<FlexmonsterReact.Pivot report=”https://cdn.flexmonster.com/reports/report.json” licenseKey=”[trial license]” />
in the html within a component is not working with error: Uncaught ReferenceError: FlexmonsterReact is not defined. Is there an import I need to make? Please advise when you can.
Thanks,
Jordan
 
UPDATE:
I was able to get the component to render by pulling https://github.com/flexmonster/pivot-react/blob/master/ES6/app/containers/HomePage/flexmonster.react.js and importing it into the file. However, the images are not rendering properly with dropdown icons appearing in the middle of the screen. When I inspect the components it looks like the tabs are making an href with javascript void(0). Any idea how to fix this? I’m linking the stylesheet in my index.html.
 

1 answer

Public
Dmytro Zvazhii Flexmonster October 4, 2017

Hello Jordan,
Thank you for interest in our component. Please make sure that your Flexmonster object should have the componentFolder property defined correctly. It should be set with the reference on the Flesmonster component folder. Here is the example – https://github.com/flexmonster/pivot-react/blob/master/ES6/app/containers/HomePage/index.js.
Please let us know if you have any additional questions here.
Best regards,
Dmytro.

Please login or Register to Submit Answer