JSX element class does not support attributes because it does not have a 'props' property

[fabiendeborde]

🐛 Bug Report

I am getting an error from typescript compiler on every component imported from this library: JSX element class does not support attributes because it does not have a 'props' property To be honest I am not really sure it is not due to the monorepo structure or the tsconfig setup but it is the first time I see this kind of error. The weird thing is, it still compiles while my vscode screen is all red of errors...

I hope someone here has seen this error or knows how to fix it.

To Reproduce

Steps to reproduce the behavior: I am on a somewhat fresh install of react-native inside a monorepo (lerna+yarn workspace). The following snippet gives an error for IconRegistry and ApplicationProvider components.

function App () {
  return (
    <Provider store={store}>
      <IconRegistry icons={[EvaIconsPack, AntIconsPack, FeatherIconsPack, IoniconIconsPack, SimpleLineIconsPack]} />
      <ApplicationProvider
        {...eva}
        theme={{...eva.dark, ...theme}}
        customMapping={mapping}
      >
        <Router />
      </ApplicationProvider>
    </Provider>
  )
}

Expected behavior

I shouldn't get an error from the compiler.

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.1.1
@ui-kitten/components	^5.1.1

Environment information

[xydian]

did you make any progress on this? I have the same issue

[mbyrd123]

I am also experiencing this issue in my react native/typescript application

[flexbox]

I am experiencing the same messages — they are on all ui-kittens components

'IconRegistry' cannot be used as a JSX component.
  Its instance type 'IconRegistry' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/cerebra/workspace/retailshake/recognizeReborn/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.

I think it's related to the typescript version? mine is

//package.json

"typescript": "~4.6.3",

[flexbox]

This was bugging me so I created a new project with KittenUI template

npx react-native init MyApp --template @ui-kitten/template-ts

After digging on package.json I aligned the versions

"dependencies": {
  "react-native": "0.64.1",
  "react": "17.0.1",
}
"devDependencies": {
  "typescript": "^3.8.3"
}

@FabienDeborde I fixed the problem on my stack

[Codelica]

Considering 3.8 is a couple years old, hopefully some TS wizard can move things to 4.x. :) Expo currently includes 4.3.5.

[xydian]

This issue appears because @types/react-native does have an peer dependency to @types/react of *. Hence two different versions are installed (you can find out by running yarn list @types/react). As far as I understand this should be covered by yarn deduplicate, I don't know why that is not the case. But you can fix this by specifing the specific version that should be defined by using resolutions in package.json

I just added the following section to package.json and it works now. After that you have to delete node_modules and run yarn install again

"resolutions": { "@types/react": "~17.0.21" },

See this link for more info about resolutions in yarn

[Codelica]

@xydian you are my hero for the week 👍 That is odd, but great work tracking it down!

[WillyRamirez]

If the above (re)solution doesn't help you, you may get this error because you defined react globally somewhere. For me it was this line somewhere in my code:

const React = require('react');

[kingjamesegun]

any help here pls?

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

[allenhartwig]

For those using Turborepo/Yarn Workspaces, this problem can manifest if @ui-kitten isn't added to the nohoist array in your root package.json.

...
 "workspaces": {
    "packages": [
      "apps/*",
      "packages/*"
    ],
    "nohoist": [
      "**/react-native",
      "**/react-native/**",
      "**/metro-core",
      "**/metro-core/**",
      "**/@expo",
      "**/@expo/**",
      "**/expo",
      "**/expo/**",
      "**/@ui-kitten",
      "**/@ui-kitten/**"
    ]
  },
  ...