React UIKit v3 error - type declaration for typescript

Hello! I’m making channel list page with UIkit.
I’m using Typescript + Next.js and got an error message when import ChannelList from '@sendbird/uikit-react/ChannelList'; in React UIKit v3 beta.

My project enviroments following:

  • Nextjs: 12.0.8,
  • React: 17.0.2,
  • Typescript: 4.5.5

Error message in VSCode

Could not find a declaration file for module ‘@sendbird/uikit-react/ChannelList’. ‘{myproject}/node_modules/@sendbird/uikit-react/ChannelList.js’ implicitly has an ‘any’ type.
Try npm i --save-dev @types/sendbird__uikit-react if it exists or add a new declaration (.d.ts) file containing declare module '@sendbird/uikit-react/ChannelList';ts(7016)

Unfortunately it looks like the none of the type definitions for UIKit have been updated to match the corresponding v3 changes

1 Like

Hello UIKit developer here,

Thanks for reporting the issue, we will look into it and fix it ASAP

1 Like

We fixed the issue in 3.0.0.beta.2

But, we need a little help from your side:
If you are in a typescript project, add the line:
node_modules/@sendbird/uikit-react/index.d.ts to tsconfig.include

Example of a tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "esModuleInterop": true,
    "jsx": "react-jsx",
  },
  "include": [
    "src",
    "node_modules/@sendbird/uikit-react/index.d.ts"
  ]
}

We choose to go this way because, our our bundling is quite complex and half the project is JSX and other half TSX (migration still ongoing)
So its kinda hard to split all the type definitions into proper structure
We are working to avoid this extra step, but will take a little bit more time

Thanks @Sravan_S for the update!

Unfortunately it looks like there are still some bundling issues in v3

  • Its incompatible with Webpack5 because its relying on stream which is no longer poly-filled in Webpack5
  • The CSS source maps are invalid due to referencing files that are not included the bundle (../src/smart-components/OpenChannel/components/OpenChannelInput/open-channel-input.scss)
2 Likes

Will check that, thanks for reporting

Sorry for late reporting.

After updating @sendbird/uikit-react version and tsconfig file(include node_modules/@sendbird/uikit-react/index.d.ts), unfortunately, I got same error when I reported(Cannot find type declaration). Other tsconfig properties are exactly same.

Instead, I tried import { ChannelList } from '@sendbird/uikit-react' and this works for me. But, I think this is different with import ChannelList from '@sendbird/uikit-react/ChannelList'. (according to docs)

I’m reading | UIKit React SDK | Sendbird Docs, and component props type doesn’t match written in docs.

Also, I got error when doing this: import { useChannelList } from ‘@sendbird/uikit-react/ChannelList/context. Missing docs update or module export bug.

Module ‘"@sendbird/uikit-react/ChannelList/context"’ has no exported member ‘useChannelList’

Additionally, I haven’t got the same error with @Reagan yet.

Thanks to @Reagan for report, and @Sravan_S for hard working!
Thanks.

2 Likes

@Daniel_Ahn Will check that too, thanks for telling us

I’ve had to use // @ts-ignore several places with the newest Sendbird components so that it matches docs vs the typescript definitions.

Hello everyone ,

Jumping on the question because i have the same problem :

Calling useChannelList return an error

TypeError: (0 , sendbird_uikit_react_ChannelList_context__WEBPACK_IMPORTED_MODULE_3_.useChannelList) is not a function

But it work if i import and use : useChannelListContext

/Cheers.
john

1 Like

Thanks @john34 We will export useChannelList in the next release(will keep useChannelListContext for a few version too). This was a mistake from our side. Expect a release including all these fixes on May24th

1 Like