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 => plugin.name !== "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 (
        <div>
            <DataGrid
                className="gridContainer"
                {...props}
                dataSource={employees}
                keyExpr="EmployeeID"
                allowColumnReordering={true}
                allowColumnResizing={true}
                
            >
                <ColumnChooser enabled={true} />
                <GroupPanel visible={true} />
                <FilterPanel visible={true} />
            </DataGrid>
        </div>
    );
}

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"
  }