Mendix custom widget with React

Hi, I have a complex problem, so I hope I can explain it properly. We have an application with tons of JS files on front-end. We’d like to create a Mendix custom widget to replicate one of our app’s functionalities. For this I followed a tutorial, which is not available anymore, but it used dojo. In the end I could achieve the goal by copying all the required JS files into a lib folder while maintaining their original structure (2000+ files). This lib folder can be found in the widget, so after build, the mpk contains it. However all the <script> tags are placed in the index.html of the Mendix app. It’s a mess. Now we’d like to isolate all the dependencies in the widget itself and we thought it’d be nice to use React which I am completely new to. So now I want to create a new widget with the same behavior, but with React and I can’t figure it out where to place my lib folder and how to import the required JS files from it. I’ve followed this tutorial: Also I can’t use TypeScript. Does anyone know how to include these resources into my new widget? Thanks  
1 answers

We had a similar problem for importing local dependencies. Here are some solutions:

  1. Publish your lib to npm or a private npm registry.
  2. Use `npm link` to link your local dependencies into your mendix widget
  3. Develop the mendix widget in the same repository as the JS lib, using something like lerna or yarn workspaces to treat them as separate modules. You would need to find a solution for the final step of the build process which expects to copy the .mpk into the mendix project ‘widgets’ folder. This location is normally specified in package.json as a relative path, but you might be able to override it in a custom webpack config file and have developers set an env. var pointing to their mendix project location?


We are currently doing option 2, although it does create an implicit dependency. The local packages are not listed in the mendix widgets’ package.json so a developer just has to ‘know’ that he needs to set up the linking. We may look at the possibility of option 3 in the future. 

Typescript is not necessary for a mendix widget. If you scaffold it out with the yeoman generator, it will give you the option of using typescript or javascript