React widget in cloud/production

8
We created a widget that runs on React within the Dojo framework in Mendix, it is based on the blogpost written in January: https://www.mendix.com/blog/using-react-mendix-widgets/ All went well with development and the widget works fine - as long as it runs on a local machine. Whenever we deploy the app to a cloud slot, it will not load. It won't include the react.js and react-dom.js files in the deployment for some reason and therefor the widget won't work and throws the following error:  Error: ServiceDeskPlanning_widget_ServiceDeskPlanning_0.applyContext: Error: ServiceDeskPlanning_widget_ServiceDeskPlanning_0.applyContext: TypeError: React.createElement is not a function   If we run a Check Widgets (via Tools), it reports: All widgets build correctly. Both react.js and react-dom.js are included in the following way in every file that uses React: define([ "OurApp/widget/lib/react", "OurApp/widget/lib/react-dom", ], function(React, ReactDOM){ //Widget code here });  
asked
4 answers
5

If you enable the "bundle widgets when running locally", then you could see your widget as it is in production.

In our case, we use the non-minimized library and add some more changes:

In React, in define module:

    define("MxReactWidget/widget/lib/react/react", [], f)

ReactDOM, in define module:

// RequireJS
  } else if (typeof define === "function" && define.amd) {
    define(['MxReactWidget/widget/lib/react/react'], f);

Basically, you define explicitly "widget/.../lib/react" .

 

There is other way you could write widget in React only but it's not officialy published. This way you don't need to bundle React in your package (i think). You could take a look at: https://github.com/mendixlabs/progress-circle. With some additional setting, you even can use tsx to make the coding easier.

 

answered
1

At the moment react widgets are R & D at Mendix. You will have to wait until its official released for the community.

 

see https://forum.mendix.com/link/questions/87037

 

so please build the widgets using dojo see

https://github.com/mendix/AppStoreWidgetBoilerplate

answered
0

This is our demo project:

https://reactwidgetapp100.mxapps.io/index.html?profile=Responsive

you may look at line 18997 and 58 in widgets.js

answered
0

We fixed the issue for now by removing all references to React and ReactDOM from the widget itself, so remove the reference in the define method and also removed the react.js and react-dom.js files from the widget lib folder.

After that we added the widget files in the index.html above the mxui.js and with that the errors are resolved and the widget works fine again.

answered