scale-data-grid does not work under Vue3

[Lumixnick]

Scale Version "@telekom/scale-components": "^3.0.0-beta.112", "@telekom/scale-components-neutral": "^3.0.0-beta.56", "@telekom/scale-components-vue": "^3.0.0-beta.56",

Framework and version Vue 3.2.45 Code Reproduction https://codesandbox.io/s/red-river-ccp28t

Desktop (please complete the following information):

• OS: Mac OS Ventura 13.0.1
• Browser Chrome
• Version Version 107.0.5304.110 (Offizieller Build) (x86_64)

Additional context This is a smart example to try the integration of scale-data-grid. I tried several configurations and versions. Up to the telekom-scale 3.0.0-beta.112 the following error happens: As of version 113 - latest, the function defineCustomElements() can no longer be used What's wrong with using the isCustomElement function in vue.config.js and main.js, bercause there are warnings see codesandbox console?

TypeError: Cannot read properties of undefined (reading 'length') at DataGrid.rowsHandler (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/scale-data-grid.entry.js:456:19) at DataGrid.componentWillLoad (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/scale-data-grid.entry.js:423:10) at safeCall (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/index-f2e5998d.js:1039:30) at dispatchHooks (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/index-f2e5998d.js:919:17) at Array.dispatch (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/index-f2e5998d.js:903:26) at consume (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/index-f2e5998d.js:1632:15) at flush (https://ccp28t.csb.app/node_modules/@telekom/scale-components/dist/esm/index-f2e5998d.js:1642:5)

`

`

[niclas18]

We use Scale in our project with Vue 3, but as a bundler Vite instead of WebPack and don't have these problems. If interested, I could create a CodeSandBox with our settings.

[Lumixnick]

Hi @niclas18 , that sounds good and if you want to create a sandbox please.

[niclas18]

Hello @Lumixnick , I recreated the DataGrid from your CodeSandbox in StackBlitz (more configurations are possible there and Vite as a bundler for Vue3 works more reliably there). In addition, I installed Vite3 and added the configuration of our project (identical to the Scale storybook).

Link to StackBlitz

We're using the Composition API instead of the Options API, so it looks a bit different than in the CodeSandbox. Also, unfortunately, Stencil (Scale's background) sometimes has some lazy loading issues. For this reason it is then necessary to import the components directly (line 2 - 6). This is not necessary for the button below the grid (line 45), for example.

[Lumixnick]

Hello @niclas18,

I think then I have a problem . When I created the support request, my app was still in Java-Script with webpack. Now I've switched it to Vite AND Typescript. If I

I have the feeling (only this) it is a coincidence when the scale-data-grid is displayed and when it is not. For example, in App.vue I use the scale-app-shell and scale-app-header. Within the shell are the main components. All work as desired, except the scale-data-grid. I still don't know what I'm doing wrong.

[felix-ico]

Hello @Lumixnick,

I have already answered you by email but just for the sake of transparency (and maybe it will help somebody else) I will also post an answer here.

What's wrong with using the isCustomElement function in vue.config.js

I think the issue here is that vue.config.js is not supported by codesandbox because the project is not run with Vue CLI.

Cannot read properties of undefined (reading 'length') at DataGrid.rowsHandler

I believe the problem is that rows and fields are defined in the submitForm method in DataGrid.vue, so there are no rows and fields for the DataGrid to render when it tries to mount initially. Defining the rows and fields in the mounted lifecycle function should solve the issue.

[Lumixnick]

Hello @felix-ico , i've forked the example from niclas18 and have added the scale-app-shield. It is a simple example with vite and JS. https://stackblitz.com/edit/vitejs-vite-cbglfx?file=src%2Fmain.js,src%2FApp.vue,index.html

• When you open the url for the first time, the scale-data-grid is displayed (It may also take a few seconds).
• If you then press refresh on the right side of the web container, the scale-data-grid disappears.
• After that, it depends on the screen size whether the scale-data-grid is displayed or not. This is suboptimal.

Attached is a screen video. Bildschirmaufnahme 2023-01-11 um 13.19.09.zip

If the code is supplemented in this way (as @niclas18 writes above) , then it works . ` if (!customElements.get('custom-scale-app-shell')) { customElements.define('custom-scale-app-shell', ScaleAppShell); }

and in the template then custom-scale-data -grid instead of scale-data-grid. ` ... same as the custom-scale-data-grid. But i don't understand why.