Pluggable widgets tool not picking non JS files in pluggable widget assets folder

1
Hi all, I am currently building a pluggable widget with React. This widget has many different resource files that need to be packed with the widget itself. The pluggable widgets tool from Mendix neatly makes sure all JavaScript files are packed, referenced and minified, but I have many more different types of files, in an ‘ assets’  folder, like json, png etc. These are not picked by the pluggable widgets tool, creating a widget without those resources.. Since the widget really needs those, the widget will break because the files can’t be found.    The workaround is to paste those non JS files into the widget MPK afterwards, but that is a very cumbersome process.   Does anybody know how to automate this?
asked
2 answers
2

Hi Ivo,

The standard pluggable widget webpack can be extended by adding the following files into your pluggable widget project folder: webpack.config.dev.js or webpack.config.prod.js

https://github.com/mendix/pluggable-widgets-tools#webpack-extensibility

 

You can then use the ‘copy-webpack-plugin’ to transfer the folder to the temporary folder that is created before it is zipped into the mpk.

The npm package ‘copy-webpack-plugin’ should be installed using npm install copy-webpack-plugin --save-dev

Your webpack should look a little bit like the below:

 

const merge = require("webpack-merge");

const baseConfig = require("./node_modules/@mendix/pluggable-widgets-tools/configs/webpack.config.dev.js"); //Can also be webpack.config.prod.js

const CopyWebpackPlugin = require("copy-webpack-plugin");

 

const customConfig = {

    plugins: [

        new CopyWebpackPlugin({

            patterns: [

                {from: './src/assets', to:'./widgets/mendix/widgetname/assets'}

            ]

        })

    ],  

};

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

answered
0

Thanks Joe, that pushed me in the right direction! I did need to follow three extra steps:

  1. I did need to install a couple of dev dependencies and after that it still broke
  2. First because merge wasn't imported properly in my case, needed { merge}  instead of merge
  3. After this correction broke again because of an incompatibility issue of the copy-webpack-plugin, latest is version 9, but the working one is 6.2.1, see: https://github.com/electron-userland/electron-forge/issues/2193

 

This is what my package.json dependencies part now looks like:

  "devDependencies": {
    "@arcgis/webpack-plugin": "^4.18.0",
    "@mendix/pluggable-widgets-tools": "^8.14.0",
    "@types/big.js": "^4.0.5",
    "@types/classnames": "^2.2.4",
    "@types/react": "~16.9.0",
    "@types/react-dom": "~16.9.0",
    "copy-webpack-plugin": "^6.2.1",
    "file-loader": "^6.2.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "@arcgis/core": "^4.19.3",
    "classnames": "^2.2.6"
  }

 

answered