@devexpress/dx-react-grid-material-ui: Uncaught TypeError: Cannot read properties of null (reading 'registerPlugin')

Question

I am creating a CustomGrid which is based on DevExpress's Grid component which seems to work fine so far.

App.tsx (this works)

import Paper from "@mui/material/Paper";
import { Table, TableHeaderRow, Grid } from "@devexpress/dx-react-grid-material-ui";

interface CustomGridType {
  [x: string]: any;
}

const CustomGrid: React.FC<CustomGridType> = ({ children, ...restProps }) => {
  const columns = [
    { name: "id", title: "ID" },
    { name: "product", title: "Product" },
    { name: "owner", title: "Owner" },
  ];

  const rows = [
    { id: 0, product: "DevExtreme", owner: "DevExpress" },
    { id: 1, product: "DevExtreme Reactive", owner: "DevExpress" },
  ];

  return (
    <div style={{ backgroundColor: "red", border: "1em solid blue" }}>
      <Grid rows={rows} columns={columns} {...restProps}>
        {children}
      </Grid>
    </div>
  );
};

function App() {
  return (    
   <Paper>
      <h1>Grid goes here</h1>
      <CustomGrid>
        <Table />
        <TableHeaderRow />
      </CustomGrid>
   </Paper>   
  );
}

But as soon as I move the <CustomGrid> to its own npm package so that I can reuse it in multiple app/project, I am getting this error.

getter.tsx:63 Uncaught TypeError: Cannot read properties of null (reading 'registerPlugin')
    at new GetterBase2 (getter.tsx:63:16)
    at constructClassInstance (react-dom.development.js:14323:18)
    at updateClassComponent (react-dom.development.js:19688:5)
    at beginWork (react-dom.development.js:21611:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

Uncaught TypeError: Cannot read properties of null (reading 'registerPlugin')
    at new TemplateBase2 (template.tsx:50:16)
    at constructClassInstance (react-dom.development.js:14323:18)
    at updateClassComponent (react-dom.development.js:19688:5)
    at beginWork (react-dom.development.js:21611:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

looking at getter.tsx

  plugin: InnerPlugin;

  constructor(props) {
    super(props);

    const { [PLUGIN_HOST_CONTEXT]: pluginHost, [POSITION_CONTEXT]: positionContext } = props;
    const { name } = props;

    let lastComputed;
    let lastTrackedDependencies = {};
    let lastResult;

    this.plugin = {
      position: () => positionContext(),
      [`${name}Getter`]: (original) => {
        const { value, computed } = this.props;
        if (computed === undefined) return value;

        const getGetterValue = getterName => ((getterName === name)
          ? original
          : pluginHost.get(`${getterName}Getter`, this.plugin));

        if (computed === lastComputed
          && !isTrackedDependenciesChanged(pluginHost, lastTrackedDependencies, getGetterValue)) {
          return lastResult;
        }

        const { getters, trackedDependencies } = getAvailableGetters(pluginHost, getGetterValue);
        const actions = getAvailableActions(pluginHost);

        lastComputed = computed;
        lastTrackedDependencies = trackedDependencies;
        lastResult = computed(getters, actions);
        return lastResult;
      },
    };

    pluginHost.registerPlugin(this.plugin); // <--------------- ERROR at this line
  }

  componentDidUpdate() {
    const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;

    pluginHost.broadcast(UPDATE_CONNECTION_EVENT);
  }

  componentWillUnmount() {
    const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;

    pluginHost.unregisterPlugin(this.plugin);
  }

  render() {
    return null;
  }
}

What I would like to achieve is to have an npm react package, let's call it custom-grid then in Project1/App1

import { Table, TableHeaderRow, Grid } from "@devexpress/dx-react-grid-material-ui";
import { CustomGrid } from "my-custom-grid";
function App1() {
  return (    
   <Paper>
      <h1>Project1: App1: My Custom Grid goes here</h1>
      <CustomGrid>
        <Table />
        <TableHeaderRow />
      </CustomGrid>
   </Paper>   
  );
}

Project2/App1

import { Table, TableHeaderRow, Grid } from "@devexpress/dx-react-grid-material-ui";
import { CustomGrid } from "my-custom-grid";
function App1() {
  return (    
   <Paper>
      <h1>Project2: App1: My Custom Grid goes here</h1>
      <CustomGrid>
        <Table />
        <TableHeaderRow />
      </CustomGrid>
   </Paper>   
  );
}

Answer 1

If you've uploaded DevExtreme React Grid to an npm package and are facing issues, make sure to download the necessary packages to ensure compatibility. Include the following dependencies in your project's package.json:

"@devexpress/dx-react-core": "^4.0.6",
"@devexpress/dx-react-grid": "^4.0.6",
"@devexpress/dx-react-grid-material-ui": "^4.0.6",

This ensures that you have the required versions of @devexpress/dx-react-core, @devexpress/dx-react-grid, and @devexpress/dx-react-grid-material-ui installed.

Remember to run npm install or yarn install after updating your package.json to fetch and install the specified versions.

This should resolve any compatibility issues you might be facing with DevExtreme React Grid