Pluggable widget could not resolve dependency

1
Hi, i'm trying to build a MQTT widget for the frontend. I'm using nodejs 14.18.3, but i've tried many others. I created the widget with the command yo @mendix/widget, current version is 9.2.0, and i even tried a previous version 9.0.2. i've tried many MQTT modules mqtt-react-hooks, mqtt-react, mqtt, i always get the same error when running the build script even if Visual Code doesn't detect problem before ( but just turn the option "noImplicitAny": false".) the errors that occurs in “dev” script are, more details with the error in “build” at the bottom. `Error: 'url' is imported by url?commonjs-external, but could not be resolved – treating it as an external dependency Error: 'events' is imported by events?commonjs-external, but could not be resolved – treating it as an external dependency (...) Error: Creating a browser bundle that depends on Node.js built-in modules ("events" and "url"). You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node` Based on this discussion, it may be related to MQTT and Rollup (used by our pluggable widget) having problems together. It mentions a solution with "shims" or "polyfill" but i have no idea about how to implement that. https://github.com/mqttjs/MQTT.js/issues/1206 I've also found some is similar questions related to Mendix, but unsolved.   https://community.mendix.com/link/questions/109519 https://stackoverflow.com/questions/70860036/how-to-fix-error-when-rollup-cannot-resolve-dependency So i suppose it can be a common case in managing dependecies of the pluggable widgets. Is there a good practice ?   The whole error on build Error: 'url' is imported by url?commonjs-external, but could not be resolved – treating it as an external dependency [!] Error: unfinished hook action(s) on exit: (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js?commonjs-proxy" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\wx.js?commonjs-proxy" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ali.js?commonjs-proxy" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js?commonjs-proxy" (commonjs) resolveId "\u0000mqtt-packet?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (commonjs) resolveId "\u0000inherits?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (commonjs) resolveId "\u0000inherits?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (commonjs) resolveId "\u0000reinterval?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (commonjs) resolveId "\u0000reinterval?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (node-resolve) resolveId "mqtt-packet" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (node-resolve) resolveId "inherits" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (node-resolve) resolveId "inherits" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (node-resolve) resolveId "reinterval" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (node-resolve) resolveId "reinterval" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\client.js" (commonjs) resolveId "\u0000duplexify?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ali.js" (commonjs) resolveId "\u0000duplexify?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ali.js" (node-resolve) resolveId "duplexify" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ali.js" (node-resolve) resolveId "duplexify" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ali.js" (commonjs) resolveId "\u0000duplexify?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\wx.js" (commonjs) resolveId "\u0000duplexify?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\wx.js" (node-resolve) resolveId "duplexify" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\wx.js" (node-resolve) resolveId "duplexify" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\wx.js" (commonjs) resolveId "\u0000ws?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (commonjs) resolveId "\u0000ws?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (commonjs) resolveId "\u0000duplexify?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (commonjs) resolveId "\u0000duplexify?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (node-resolve) resolveId "ws" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (node-resolve) resolveId "ws" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (node-resolve) resolveId "duplexify" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (node-resolve) resolveId "duplexify" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\ws.js" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-recv.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-recv.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\validations.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\validations.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\default-message-id-provider.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\default-message-id-provider.js?commonjs-proxy" (commonjs) resolveId "\u0000lru-cache?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (commonjs) resolveId "\u0000lru-cache?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (commonjs) resolveId "\u0000number-allocator?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (commonjs) resolveId "\u0000number-allocator?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (node-resolve) resolveId "lru-cache" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (node-resolve) resolveId "lru-cache" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (node-resolve) resolveId "number-allocator" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (node-resolve) resolveId "number-allocator" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\topic-alias-send.js" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\debug\\src\\browser.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\xtend\\immutable.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\xtend\\immutable.js?commonjs-proxy" (commonjs) resolveId "\u0000./common?commonjs-require" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\debug\\src\\browser.js" (commonjs) resolveId "\u0000./common?commonjs-proxy" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\debug\\src\\browser.js" (node-resolve) resolveId "./common" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\debug\\src\\browser.js" (node-resolve) resolveId "./common" "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\debug\\src\\browser.js" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\tls.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\tls.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\tcp.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\connect\\tcp.js?commonjs-proxy" (node-resolve) resolveId "events" "\u0000events?commonjs-external" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\readable-stream\\readable-browser.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\store.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt\\lib\\store.js?commonjs-proxy" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\mqtt-packet\\mqtt.js?commonjs-proxy" (commonjs) load "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\rfdc\\index.js?commonjs-proxy" (node-resolve) resolveId "D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\rfdc\\default.js" "\u0000D:\\_MendixProjects\\MQTT_NBD-main\\widgets-custom\\mqttClientWidgetConnector\\node_modules\\rfdc\\default.js?commonjs-proxy"   Here is the main code, however i think the problem is the import MQTT. import { Component, ReactNode, createElement } from "react"; import { Connector } from 'mqtt-react-hooks'; import Status from './components/Status'; import { MqttClientWidgetConnectorContainerProps } from "../typings/MqttClientWidgetConnectorProps"; import "./ui/MqttClientWidgetConnector.css"; export class MqttClientWidgetConnector extends Component<MqttClientWidgetConnectorContainerProps> { render(): ReactNode { return ( <Connector brokerUrl={this.props.MqttBrokerUrl}> <Status /> </Connector> ); } }  
asked
1 answers
0

Thanks to my colleag Roman ,

the solution was to build differently like described here

https://github.com/mqttjs/MQTT.js#react

npm install -g webpack                    // Install webpack globally
npm install mqtt                          // Install MQTT library
cd node_modules/mqtt
npm install .                             // Install dev deps at current dir
webpack mqtt.js --output-library mqtt     // Build
answered