We have an application and we’d like to create a Mendix custom widget to replicate one of it’s functionalities. At first I managed to do it by following a tutorial using dojo and no React, copying all the required JS files (2000+ files) into a lib folder in the widget, and referencing those in the app's index.html between <script> tags. This way the lib folder appeared in the generated .mpk file.
However now we'd like to isolate the dependencies in the widget and that's why I followed this tutorial: https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one
I'd like now to copy the lib into the React component. This is how my folder structure looks like: folder structure
In BeforeScriptSrc.jsx and AfterScriptSrc.jsx I add some inline functions to the document's body. ScriptSrc.jsx is where my problem comes from:
export class ScriptSrc extends Component {
componentDidMount () {
function createScript(src) {
const script = document.createElement("script");
script.async = true;
script.src = src;
document.body.appendChild(script);
}
createScript("./lib/copiedJS.js");
/*200 more of these*/
}
render() {
return null;
}
}
When I build the component and synchronize the project directory in Mendix I get the following error in the console for every js file:
404 - file not found for file: lib/copiedJS.js
Also the lib folder doesn't appear in the generated widget. Is there a way to include this folder in the widget? Or any other ways to make this work?
