Table Cell Component giving an error when loading a listing page

2025/08/19 3:38 PM

I'm having an issue with getting table cell react component to work. I'm using the community LinkTableCellComponent as a guide. when I try to use it with AddComponentColumn the listing page throws We have encountered an unexpected error. on the page.

        PageConfiguration.ColumnConfigurations.AddComponentColumn(
            nameof(BioInfo.BioName),
            "@project/web-admin/ImageCell",
            caption: "This",
            modelRetriever: GetHeadShot,
            sortable: false);

It seems like the component is not being registered. For the LinkTableCellComponent I could not find anywhere in the code where that is being registered either and the LinkTableCellComponent is being referenced with @kentico-community/portal-web-admin/Link  https://github.com/Kentico/community-portal/blob/c04e241ad726754ec89900db7bfa89e72[…]y.Portal.Admin/Client/src/components/LinkTableCellComponent.tsx

When I bring up chrome devtools I don't see the component in the scripts tab like it's not loading.

I have other custom admin form components that I am using so my admin environment should not be the issue.

Environment

Answers

2025/08/19 6:14 PM
Answer

  1. Make sure the component is exported in the entry.tsx - if it's not exported it won't be accessible by Xperience's React app.

  2. Reference the component by name in your C# code correctly. The pattern is @org-name/project-name/ComponentName

    1. @org-name and project-name come from the webpack.config.js and the C# RegisterClientModule() call.
    2. The ComponentName is what you are exporting from your Component.tsx file.
    3. Note: TableCellComponent components have the TableCellComponent part of the name implicitly included when referencing them from the C# side. This means your C# reference string should be @org-name/project-name/Image if your exported TypeScript React component is named ImageTableCellComponent.
    4. There are similar types of conventions for FormComponent instances with client components. For example, a client component exported as MarkdownFormComponent would be referenced in C# as @org-name/project-name/Markdown
    5. Another example can be seen with with the DataExportComponent which is an ActionComponent and referenced as @org-name/project-name/DataExport.

  3. Make sure you have a C# client module registration call using RegisterClientModule() which tells Xperience how to organize the client module by org and project name.

To answer this question, you have to login first.