Single instance of common dependencies

[JamesRamm]

We are experiencing a problem where a dependency of a dependency (Styled-components in this case) is loaded multiple times. We are building multiple widgets in a single package, each of these widgets is utilizing a common library, which itself is based upon styled components. Styled-components is expected to be initialized only once per application. I can see in the resulting webpack bundles that each widget is bundling styled-components, which I suppose is resulting in this issue. (What is odd is that we are not using more than 1 of our custom widgets on any one mendix page...)

Is there any way to stop common dependencies being duplicated while still outputting distinct widgets?

[diego-antonelli]

Hi James, this tool was developed to be used in just one single widget. In this case you will need to use some other tool to manage dependency like lerna or something else.

[JamesRamm]

Its not necessarily a problem with hoisting but with how .mpk files are generated/treated in general. Suppose I create two separate widgets each using this tool independently. Or I download 2 widgets from the store. These 2 widgets happen to use (unbeknowst to me) 'style-components' (or any other library that wants a single run time) and I put them both on the same page - AFAIU I will encounter the same problem. What would be useful would be if mendix could manage 'peerDependencies' or something like that. I dont know how it could be accomplished.

[diego-antonelli]

Well, in this case I dont see a problem in the tool, but then in the Studio Pro itself.. but of course you can define external dependencies if the Studio Pro already expose this.

[JelteMX]

I am interested in this as well. What I am getting from @JamesRamm (correct me if I'm wrong?) is that you want to keep some libraries in a core file, while every widget will load this from this core file, meaning you would have to only do 1 require. We have an example of this in our old ChartJS widget: https://github.com/mendix/ChartJS.

What you'll see is that we create one Core.js file which loads the ChartJS library, as well as some common methods on the widget. Basically, every separate chart widget will load this base widget from core and extend upon this.

So in the case of the pluggable/react widget, we should be able to somehow manage to create 1 'core' file per widget package (that has multiple widgets in them). My best guess would be that this should be done in the Webpack configuration (entry point). For every widget that uses this 'core' file, that core file should then be registered as an external.