Customizing the IgrGrid Component in a Shared Library

[fvitolo]

We are trying to customize the React component IgrGrid and add it to a library to be shared across various projects.
The library is built with Vite v5.4.2 using the following configuration:

import { defineConfig, splitVendorChunkPlugin } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import dts from "vite-plugin-dts";
import path from "node:path";

export default defineConfig({
  plugins: [
    svgr(),
    react({
      babel: {
        plugins: [
          [
            "babel-plugin-styled-components",
            {
              displayName: true,
              fileName: false,
            },
          ],
        ],
      },
    }),
    splitVendorChunkPlugin(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "ComponentsLibrary",
      formats: ["es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom", "antd"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

, the following tsconfig

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["./src"]
}

, and React/React-DOM versions ^17.0.2 and igniteui-react ~18.6.1.

The issue we are encountering is that if we export only the customized component with export { default as IgrGrid } from "./components/dataentry/infragistics/grid/IgrGrid"; , the table does not render when passing in IgrColumns. However, if we export IgrColumn from the components library and pass that in it works as expected.

We would like to ask for clarification on why this is necessary and if you have any insights on this matter.