Get Free Trial

Make React integration with imports?

Tijs Planckaert asked on February 15, 2017

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.
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

Tanya Gryshko 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.

Tijs Planckaert February 15, 2017

Hi Tanya, we use typescript

Ian Sadovy 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.

Tijs Planckaert February 16, 2017

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.

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:

Dmytro Zvazhii 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,

Tijs Planckaert August 31, 2017

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 (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 (http://localhost:3000/flexmonster/flexmonster.js:9:535757)

 Any ideas?

Tijs Planckaert September 1, 2017

seems the fix is here:

Tanya Gryshko 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.

Tanya Gryshko 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.

Please login or Register to Submit Answer