[Table]: Slot headerRow not defined

[skowrons]

Describe the bug

We upgraded our app to the newest version and trying this simple code:

      <Table
        headerRow={
          <TableHeaderRow>
            <TableHeaderCell width="200">test</TableHeaderCell>
            <TableHeaderCell width="200">test</TableHeaderCell>
            <TableHeaderCell width="200">test</TableHeaderCell>
            <TableHeaderCell>test</TableHeaderCell>
          </TableHeaderRow>
        }
      >
        <TableRow>
          <TableCell>test</TableCell>
          <TableCell>test</TableCell>
          <TableCell>test</TableCell>
          <TableCell>test</TableCell>
        </TableRow>
      </Table>

And we are getting the following error:

Currently we are not able to reproduce this bug in StackBlitz and just want to ask for some help.

Our Versions:

Isolated Example

No response

Reproduction steps

We can not reproduce the bug in a plane environment.

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.1.0

UI5 Web Components Version

2.2.0

Browser

Chrome

Operating System

Mac OS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Hi @skowrons,

I would assume this is due to some duplicates in the node_modules?
Can you try to run the following commands?

npm ls @ui5/webcomponents-react
npm ls @ui5/webcomponents

I would assume that somewhere in the dependency tree, the v1 of UI5 Web Components is showing up.
You can try to run npm dedupe to remove such duplicates.

Other than that, I would suggest to remove the @ui5/webcomponents-theme-base dependency is this package is no longer maintained and was last published ~3 years ago. I would assume that you don't need this package as direct dependency, but in case you need it you can use the successor package @ui5/webcomponents-theming.

[skowrons]

Hi @MarcusNotheis,

thank you very much for your suggestions. We removed the outdated @ui5/webcomponents-theme-base package and tried to follow your advise. But it did not help.

But we were able to reproduce the problem in a fresh stackblitz: https://stackblitz.com/edit/github-vgt75e?file=src%2FApp.tsx

Seams like the problem is when we import the normal package and the compat one (needed for the older but more customisable toolbar).

[Lukas742]

Hi @skowrons

this seems to be related to the tree shaking capabilities of vite in dev mode (related issue). UI5 web components are imported using side-effect imports, and our root index files export all components. Since tree shaking isn't enabled, or at least doesn't work in the same way as for a prod build, all side-effect imports are included. This leads to duplicate imports which then can override implementations like in this case.
I've tried to fix this by replacing re-export exports (export * from) with named exports (PR), but unfortunately the issue still persists.

Currently, I can't think of a satisfactory solution, but as a workaround you can import all components from the compat package directly from the file destination (e.g. import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';). Please note that this will only work once we've updated our package.json to allow deep imports.

If you already want to test this behavior, then you can use this snapshot version: 0.0.0-10d566f5d4
Please note that you may have to --force install the dependencies and also define the @ui5/webcomponents-react-base package with the snapshot version, as otherwise the app probably won't run.

Here you can find the updated StackBlitz template: https://stackblitz.com/edit/github-vgt75e-ddatpf?file=src%2FApp.tsx,package.json

[Lukas742]

With v2.1.1, it's now possible to use file/deep imports (StackBlitz example). Additionally, we've updated our documentation to reference these types of imports for the compat package. If there's a way to improve developer experience that we haven't considered, please let us know.

I've also created an issue in the ui5-webcomponents repo regarding the duplicate custom element tags when both the compat and main packages are used. You can find it here: Issue #9920.

Since there's unfortunately nothing else we can do at this time, I'm going to close this issue.

[skowrons]

Wow, thank you so much @MarcusNotheis and @Lukas742 for all your hard work and effort on this issue.

I just wanted to mention that we tried using the vite-entry-three-shaking plugin (https://github.com/Dschungelabenteuer/vite-plugin-entry-shaking), but unfortunately, it didn't solve our problem. In the end, we copied your toolbar into our project and completely removed the compatibility package.