封装DevExpress React Grid为独立npm包后触发registerPlugin空指针错误的问题求助

大家好，我最近遇到了一个挺棘手的问题，希望能得到社区的帮助：

我基于DevExpress的React Grid组件封装了一个CustomGrid，在本地项目里直接写在App.tsx中使用时一切正常，但当我把这个组件抽成独立的npm包，想在多个项目中复用的时候，就触发了空指针错误。

先给大家看本地能正常运行的代码：

App.tsx（本地运行正常）

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>
  );
}

但把CustomGrid抽成名为custom-grid的npm包后，在其他项目中引入使用时，就抛出了以下错误：

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)

我查看了报错的getter.tsx文件，错误发生在pluginHost.registerPlugin(this.plugin)这一行，这里的pluginHost是null：

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); // <--------------- 错误发生在这里
}

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

我的需求是：创建一个名为my-custom-grid的npm包，然后在多个项目中这样引入使用：

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>
  );
}

有没有大佬遇到过类似的问题？或者能帮我分析一下为什么抽成npm包后pluginHost会变成null吗？感激不尽！

备注：内容来源于stack exchange，提问作者user2073131