NPM Dependencies in Pluggable Widget not working

I’m building a pluggable widget and want to use a component library. Right now I want to use following components:   My widget entry looks like this: import { Component, ReactNode, createElement } from "react"; import { CustomDataGridContainerProps } from "../typings/CustomDataGridProps"; import "./ui/CustomDataGrid.css"; import "devextreme/dist/css/dx.light.css"; import { DataGrid } from "devextreme-react/data-grid"; import { employees } from "./employees"; export class CustomDataGrid extends Component<CustomDataGridContainerProps> { render(): ReactNode { return <DataGrid dataSource={employees} keyExpr="EmployeeID"></DataGrid>; } }   The build succeeds but is complaining about circular dependencies: Error: Circular dependency: node_modules/devextreme-react/core/component-base.js -> node_modules/devextreme-react/core/templates-manager.js -> node_modules/devextreme-react/core/dx-template.js -> node_modules/devextreme-react/core/template-wrapper.js -> node_modules/devextreme-react/core/component-base.js Error: Circular dependency: node_modules/devextreme-react/core/component-base.js -> node_modules/devextreme-react/core/templates-manager.js -> node_modules/devextreme-react/core/dx-template.js -> node_modules/devextreme-react/core/component-base.js   When i place my widget on a page in mendix and navigate on the page i get the following errors in console: factoryThrew d@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:553 Me/<@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:9535 Me@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:9644 Me@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:9280 Be/<@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:9835 Fe@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:9702 Be@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:9774 i@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:10909 p.injectUrl/r<@http://localhost:8080/mxclientsystem/mxui/mxui.js?638031706060236964:5:13143 Loading module widgets/custom/customdatagrid/CustomDataGrid failed! Check script file for syntax errors.   Any ideas for a solution or how I can get more details on what goes wrong?
3 answers

If you look at the error generated it does mention that there is a circular dependency in your external library.  The ‘component-base’ file depends on itself via 2 other files it uses. 

Apparently the widget bundling of Mendix doesn’t allow this. Do you know why this external module has this circular dependency?



After some more investigation we got the following error. Any Idea how to fix this im Mendix.

The Code is working with a standalone react application.


After including “react-dom” in import a new more detailed error appeared “this._WidgetClass is not a constructor TypeError: this._WidgetClass is not a constructor”,


so, when I started further debugging process, I spotted that constructor gets “_widgetClass” params as “undefined”, that was concerning so I tried to replicate this issue outside of Mendix (to confirm if this is library fault or rather Mendix strange behaviour)



So, for compare I created standalone react application, and surprisingly, there were no problems with it all





After this discovery I have high suspicious that after bundling widget, Mendix modify location of necessary files, and due to that highlighted below variable “button_1” is undefined. Probably manipulating webpack, file location or path may solve this issue. But of course, still problem in Mendix may be more complicated.



I found a solution for the problem.


I created a custom rollup.config.js with following content and put that config in the root of my widget:

import { nodeResolve } from "@rollup/plugin-node-resolve";

export default args => {
    const mendixConfig = args.configDefaultConfig;

    const newConfig = mendixConfig
        .filter(config => config.output.format !== "es") // Removes generation of .mjs bundle
        .map(config => {
            config.treeshake = false;

            const newPlugins = config.plugins
                .filter(plugin => plugin !== null)
                .filter(plugin => !== "node-resolve");
            newPlugins.push(nodeResolve({ preferBuiltins: false, mainFields: ["browser", "main", "module"] })); // Overwrite order of mendix config 

            config.plugins = newPlugins;

            return { ...config };

    return newConfig;


Aditionally I changed added a import to react-dom in my entry component. This import does fix the dependency problem i encountered with the react-dom library.

At the moment my component looks like this:

import { ReactElement, createElement } from "react";
import ReactDom from "react-dom";

import { PlainItDataGridContainerProps } from "../typings/PlainItDataGridProps";
import "./ui/PlainItDataGrid.css";

import "devextreme/dist/css/dx.light.css";
import DataGrid, { ColumnChooser, GroupPanel, FilterPanel } from "devextreme-react/data-grid";
import employees from "./examples/employees";

export const reactDomVersion = ReactDom.version; // Dependency resolution fix

export function PlainItDataGrid(props: PlainItDataGridContainerProps): ReactElement {
    return (
                <ColumnChooser enabled={true} />
                <GroupPanel visible={true} />
                <FilterPanel visible={true} />


As additional info, I’m using following dependencies in package.json:

"devDependencies": {
    "@mendix/pluggable-widgets-tools": "^9.18.0",
    "@types/big.js": "^6.0.2",
    "@types/enzyme": "^3.10.8",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/jest": "^26.0.22",
    "@types/react": "~17.0.1",
    "@types/react-dom": "~17.0.1",
    "@types/react-test-renderer": "~17.0.1"
  "dependencies": {
    "classnames": "^2.2.6",
    "devextreme": "22.1.6",
    "devextreme-react": "22.1.6"