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?
⋅ 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
⋅ February 15, 2017
Hi Tanya, we use typescript
⋅ 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
⋅ 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.
⋅ 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/
⋅ 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.
⋅ 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?
⋅ September 1, 2017
seems the fix is here: https://github.com/flexmonster/pivot-react/commit/d2c554000e039a6e7ee70082f0e1bf66b1cc92e8
⋅ 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
⋅ 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