MX8 Multiple Widgets package

Hey there! I am not really a Mendix expert but I am helping my team to create some MX8 React Native widgets. I have followed the widget tutorial and all works fine, however, every scaffold creates an isolated widget, I am wondering if it is possible to group the Widgets under the same structure; only one node_modules and package.json for all of them, so I can easily share code across all components under the same structure. I've tried to have multiple widgets declarations in the package.xml file, but It didn't work. The image below exemplify what I am trying to achieve.   Does Mendix 8 support such structure? Thanks!
4 answers

 maybe you can take a look at


Ive managed to get this sort of working by having quite a few overrides in a custom webpack file:

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./node_modules/@mendix/pluggable-widgets-tools/configs/'); //Can also be
const variables = require('./node_modules/@mendix/pluggable-widgets-tools/configs/variables');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const packagePath = variables.package.packagePath.replace(/\./g, '\/');
const widgetName = variables.package.widgetName;
const name = widgetName.toLowerCase();
 * This webpack file adds some overrides to the standard webpack file from the pluggable widgets tools.
 * This is necessary to prevent build time issues with the local modules (amewidgets/ameplot) in relation
 * to react-dom & react-hot-loader
const customConfig = {
   entry: {
      TestWidget: path.join(variables.path, `/src/TestWidget/TestWidget.${variables.extension}`),
      TestWidget2: path.join(variables.path, `/src/TestWidget2/TestWidget2.${variables.extension}`),
   output: {
      path: path.join(variables.path, '/dist/tmp'),
      filename: `widgets/${packagePath}/${name}/[name].js`,
      libraryTarget: 'umd',
      publicPath: '/'
   plugins: [
      new CopyWebpackPlugin(
            from: path.join(variables.path, 'src/**/*.xml'),
            toType: 'template',
            to: 'widgets/[name]/[name].[ext]',
            ignore: 'src/package.xml'
         { copyUnmodified: true }
const previewConfig = {
   entry: {
      TestWidget: path.join(variables.path, `/src/TestWidget/TestWidget.webmodeler.${variables.extension}`),
      TestWidget2: path.join(variables.path, `/src/TestWidget2/TestWidget2.webmodeler.${variables.extension}`),
   output: {
      path: path.join(variables.path, '/dist/tmp'),
      filename: 'widgets/[name]/[name].webmodeler.js',
      libraryTarget: 'commonjs'

module.exports = [merge(baseConfig[0], customConfig), merge(baseConfig[1], previewConfig)];

I presume I would also need to do this for

Its not fully working as the webmodeler preview file doesnt appear in the generated .mpk file. No idea why. Not a blocking issue for us though (widget is still usable)

It seems to me that being set up for multiple widgets in a pluggable widget package should be the default for the pluggable-widget-tools module, since there would be no problem having just 1 widget in a multi-widget package. 


Whereas going the other way and extending a single widget package to multi widgets involves heavy customisations. 



I have also come across this problem. I tried to follow list-view-controls, but it does not use the ‘pluggable-widget-tools’ package so I believe the configuration is different. There is also the ‘Charts’ package which has multiple widgets, but again the configuration is different. 

It seems that:

  1. There might be implicit dependencies between the various filenames and names & ids specified in the various .xml files?
  2. We may need to add our own webpack.config.js (or / to get the final mpk in the right format and override the defaults in the pluggable tools?


Did you ever get this issue sorted and/or does anyone know the definitive list of changes needed (from the boilerplate setup by yeoman) to have multiple widgets per package?


same asking, do we have any mendix expert can provide some best practice to group widgets and share code between them?