Menu
Download Free Trial

Make React integration with imports?

Answered

We’re trying to integrate the Flexmonster React component in our app. There are no examples online that use webpack or that don’t set flexmonster as a global var for React.
We’d like to add the pivot by using a simple import { FlexmonsterPivot } from “flexmonster” statement. Something similar to this: https://github.com/flexmonster/pivot-angularjs2/blob/master/app/app.component.ts
I’m under the impression that window.FlexmonsterPivot only gets set if window.React is set – but we don’t have React set on window, we import it in the files that we need.
I was wondering if this is possible?

10 answers

Public
Tanya Gryshko Flexmonster February 15, 2017

Hello Tijs,
Please provide us with technology stack in your project. Is it React + ES6 or React + TypeScript? We will investigate your question further and prepare the example if possible.
Regards,
Tanya

Public
Tijs Planckaert February 15, 2017

Hi Tanya, we use typescript

Public
Ian Sadovy Flexmonster February 16, 2017

Hi Tijs,
 
Thank you for the details.
We have prepared a sample for React+TypeScript.
It uses webpack to build the project.
Also, Flexmonster is imported as following:

import { FlexmonsterReact } from "./components/FlexmonsterReact";

Please let us know if it works for you.
 
Regards,
Ian
 

Public
Tijs Planckaert February 16, 2017

Hi,
 
Thanks, that’s a lot more useable!
 
We might update the component and tweak it a little, I’ll share with you guys the result if you want.

Public
Toni Laukka June 13, 2017

Do you have similar sample without TypeScript? So just with React + ES6 or with React + ES6 + Flow? Our project is based on React Boilerplate: https://www.reactboilerplate.com/

Public
Dmytro Zvazhii Flexmonster June 16, 2017

Hello Toni,
Thank you for your question. We took some time on our investigation and prepared an integration example based on reactboilerplate project. It is located in the same pivot-react repository in ES6 folder. You are welcome to try it.
Please let us know if everything works fine for you.
Best regards,
Dmytro.

Public
Tijs Planckaert August 31, 2017

Hi,
 
I’d like to revisit this topic.

The component was working nicely, but it doesn’t since I updated from version 2.3 to version 2.4.

I checked the migration document and didn’t need any real adjustments but I’m getting this error in the console.

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.
at ka (http://localhost:3000/flexmonster/lib/d3.min.js:3:10479)
at Object.oa.select (http://localhost:3000/flexmonster/lib/d3.min.js:3:16018)
at M7.Flexmonster.a6.Q6 (http://localhost:3000/flexmonster/flexmonster.js:9:548003)
at M7.Flexmonster.a6.yc (http://localhost:3000/flexmonster/flexmonster.js:9:547931)
at M7.Flexmonster.r9.yc (http://localhost:3000/flexmonster/flexmonster.js:9:548950)
at M7.Flexmonster.M7.yc (http://localhost:3000/flexmonster/flexmonster.js:9:567963)
at R9.Flexmonster.R9.lQ (http://localhost:3000/flexmonster/flexmonster.js:9:1047646)
at R9.Flexmonster.R9.ya (http://localhost:3000/flexmonster/flexmonster.js:9:1044599)
at k1.Flexmonster.k1.ya (http://localhost:3000/flexmonster/flexmonster.js:9:573714)
at s.za (http://localhost:3000/flexmonster/flexmonster.js:9:535757)

 Any ideas?

Public
Tijs Planckaert September 1, 2017

seems the fix is here: https://github.com/flexmonster/pivot-react/commit/d2c554000e039a6e7ee70082f0e1bf66b1cc92e8

Public
Tanya Gryshko Flexmonster September 1, 2017

Hello Tijs,
Thank you for the interest in our new version. You are right, the workaround for this issue was committed to GitHub. The fix will be provided as part of the next minor release 2.403, ETA Sep 11. Please let me know in case of other questions.
Regards,
Tanya

Public
Tanya Gryshko Flexmonster September 15, 2017

Hello Tijs,
I am glad to inform you that the minor releases 2.403 is available for download now. The issue with showing charts if pivot container doesn’t have an ID was fixed.
You are welcome to update the component.
Regards,
Tanya

Please login or Register to Submit Answer