Errors on every scale components after converting to TS

[Sizor79]

Scale Version 3.0.0-beta.135

Framework and version react with 18.2 with web custom elements from Omar Sood

Current Behavior After convert project to TypeScript (5.13) every scale component have this error: For develop it work, dev server sucesfully compile and run, but build wont pass

'ScaleTextField' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ScaleTextField & Pick<HTMLAttributes<HTMLScaleTextFieldElement>, "slot" | "title" | "children" | "className" | ... 248 more ... | "onTransitionEndCapture"> & StyleReactProps & RefAttributes<...>>' is not a valid JSX element type.

68               <ScaleTextField
                  ~~~~~~~~~~~~~~

src/ONTForm.tsx:76:14 - error TS2786: 'ScaleButton' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<ScaleButton & Pick<HTMLAttributes<HTMLScaleButtonElement>, "slot" | "title" | "children" | "className" | "hidden" | ... 247 more ... | "onTransitionEndCapture"> & StyleReactProps & RefAttributes<...>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<ScaleButton & Pick<HTMLAttributes<HTMLScaleButtonElement>, "slot" | "title" | "children" | "className" | "hidden" | ... 247 more ... | "onTransitionEndCapture"> & StyleReactProps & RefAttributes<...>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

76 <ScaleButton>ONT-Service starten</ScaleButton>

Expected Behavior Stop showing error and sucesfull build

[felix-ico]

Hi @Sizor79, thanks for opening this issue, I tested this and could confirm it. I am having a look at this now and will post any updates here

[tommy-codez]

I also got this. It has something todo with newer versions of @types/react. I revert it back to older versions and then it worked..

[ghost]

@tommy-codez

Which old @types/react version is working for you?

[tommy-codez]

at the moment we use "@types/react": "^18.0.15",

[acstll]

@Sizor79 can you work with version 18.0.15 of @types/react?

[kolianovich]

The same issue. I use Vite and created project with React / Typescript + SWC template. After it I added: @telekom/scale-components@next @telekom/scale-components-react

When I add, for instance ScaleButton to my project I get an error:

TS2786: 'ScaleButton' cannot be used as a JSX component.   Its type 'ForwardRefExoticComponent<ScaleButton & Omit<HTMLAttributes<HTMLScaleButtonElement>, "style"> & StyleReactProps & RefAttributes<...>>' is not a valid JSX element type.     Type 'ForwardRefExoticComponent<ScaleButton & Omit<HTMLAttributes<HTMLScaleButtonElement>, "style"> & StyleReactProps & RefAttributes<...>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.       Type 'ReactElement<any, string | JSXElementConstructor> | null' is not assignable to type 'ReactNode'.         Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.           Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.

dependencies in package.json are:

"dependencies": { "@telekom/scale-components": "^3.0.0-beta.136", "@telekom/scale-components-react": "^3.0.0-beta.136", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "@typescript-eslint/eslint-plugin": "^5.61.0", "@typescript-eslint/parser": "^5.61.0", "@vitejs/plugin-react-swc": "^3.3.2", "eslint": "^8.44.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.1", "typescript": "^5.0.2", "vite": "^4.4.0" }

[tshimber]

hi, guys! same thing by me. can you please give some rough estimations, when this issue may be solved?

[felix-ico]

@tshimber unfortunately I can't really give an estimate on this, as bugs of this kind may well be related to our dependencies, rather than the scale components themselves.

I am having a look at this though, and trying some different approaches - @acstll I thought updating our react-output-target could help here, but I'm having trouble symlinking the libraries with this setup (vite + react + swc + scale). Also a bit scared about this commit https://github.com/ionic-team/stencil-ds-output-targets/commit/8b8ced4d9a0bed7e64b8903207e32082236982f7 ( the way i understand it we would have to update stencil)

[tshimber]

@felix-ico thanks for answering! I will tell so to my team, we don't have rush, but good to know) Have luck with this murky topic!

[TFLXX]

ionic-team/stencil-ds-output-targets@8b8ced4 ( the way i understand it we would have to update stencil)

The commit says: "stencil v2.9+ is still supported, it is only support for beta and rc release of stencil v3 that are being dropped."

Having the same issue with TS in a Next.js project.

[felix-ico]

@TFLXX we are currently using stencil version 2.17, so I guess it wouldn't be supported. A colleague tried updating our dependency to stencil a while back but found that is not easily doable without a lot of adaptations/fixes, for which we currently do not have sufficient resources unfortunately.

I guess one option could be to update stencil just to version 2.9 to fix this issue.

[felix-ico]

Hi @TFLXX @Sizor79 I recently ran across this issue again, and while looking for a solution found a lot of people suggesting to use resolutions in package.json in some open (i think) related issues

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59802#issuecomment-1094489887

https://github.com/facebook/react/issues/24304#issuecomment-1093458894

I opened a PR to add an example using vite+react+scale and both the dev and build output seem to work on my side https://github.com/telekom/scale/pull/2204/files

[tshimber]

Hi @TFLXX @Sizor79 I recently ran across this issue again, and while looking for a solution found a lot of people suggesting to use resolutions in package.json in some open (i think) related issues

DefinitelyTyped/DefinitelyTyped#59802 (comment)

facebook/react#24304 (comment)

I opened a PR to add an example using vite+react+scale and both the dev and build output seem to work on my side https://github.com/telekom/scale/pull/2204/files

@felix-ico Felix, hi! I've downloaded the example and tried to run build, and I've got same errors as I have in my own project. Was the build succsessful for you? Or I didn't get your idea maybe?

[felix-ico]

Hi @tshimber, yes the build is still successful for me - i just tested again. I am not sure what could be causing the discrepancy...what node version are you using?

[efmaster]

got the same error: im running on node 21.5.0 here is my package.json dependency: "dependencies": { "@telekom/scale-components": "^3.0.0-beta.56", "@telekom/scale-components-react": "^3.0.0-beta.56", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.1" }, "devDependencies": { "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@typescript-eslint/eslint-plugin": "^6.10.0", "@typescript-eslint/parser": "^6.10.0", "@vitejs/plugin-react": "^4.2.0", "eslint": "^8.53.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.4", "typescript": "^5.2.2", "vite": "^5.0.0" }

[felix-ico]

@efmaster did you also try this example project https://github.com/telekom/scale/tree/main/examples/vite-react? I tested it (also on node 21.5.0) and it is working for me. The only difference that stands out is that you are using an outdated version of scale components (56 instead of 147)

[tshimber]

@efmaster @felix-ico for me it worked after adding this part to compilerOptions in tsconfig: "paths": { "react": [ "./node_modules/@types/react" ] }

[efmaster]

@efmaster did you also try this example project https://github.com/telekom/scale/tree/main/examples/vite-react? I tested it (also on node 21.5.0) and it is working for me. The only difference that stands out is that you are using an outdated version of scale components (56 instead of 147)

great so installing like told on the storybook install an outdated version... i will try it tomorrow morning

[tshimber]

@efmaster did you also try this example project https://github.com/telekom/scale/tree/main/examples/vite-react? I tested it (also on node 21.5.0) and it is working for me. The only difference that stands out is that you are using an outdated version of scale components (56 instead of 147)

great so installing like told on the storybook install an outdated version... i will try it tomorrow morning

I've created new proj today, installed like this: npm install @telekom/scale-components@next npm install @telekom/scale-components-react@next as recommended, and newest versions ^3.0.0-beta.147 were installed

[felix-ico]

@efmaster npm install @telekom/scale-components@next as documented should install the latest version of scale

[efmaster]

@felix-ico you are right .. few day ago it was the version i wrote before (v56) even with the newest version i got the error. but the Hint from @tshimber works great