search

telekom / scale

Scale is the digital design system for Telekom products and experiences.
https://telekom.github.io/scale/
Other
372 stars 82 forks source link

scale-data-grid does not work under Vue3 #1414

Open Lumixnick opened 1 year ago

Lumixnick commented 1 year ago

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):

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 commented 1 year ago

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 commented 1 year ago

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

niclas18 commented 1 year ago

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 commented 1 year ago

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 Githubissues.

  • Githubissues is a development platform for aggregating issues.