Livekit type declaration fails

[ahmetkaratass]

Select which package(s) are affected

@livekit/components-react

Describe the bug

In our Vite + React project, I expect that when I'm building with "moduleResolution": "bundler"in typescript, it should build the project.

What happens now, it fails because it can't find type declarations.

However, if I change the moduleResolution to "node" or add "skipLibCheck": true in my tsconfig.json, it builds the project.

Reproduction

Packages:

 "livekit-client": "^1.13.4",
 "@livekit/components-react": "^1.2.2",

My tsconfig.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ES2022",
    "moduleResolution": "bundler",
    "removeComments": true,
    "sourceMap": false,
    "strict": true,
    "target": "ES2020",
    "useDefineForClassFields": true,
    "verbatimModuleSyntax": false,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ES2023"],
    "outDir": "build/",
    "noEmit": true
  },
  "include": ["src"]
}

Components that I use from the library:

import { useLocalParticipant, useRoomContext } from '@livekit/components-react';
import { Track } from 'livekit-client';

Logs

../node_modules/@livekit/components-core/dist/observables/room.d.ts:4:41 - error TS2307: Cannot find module 'livekit-client/dist/src/room/Room' or its corresponding type declarations.

4 import type { RoomEventCallbacks } from 'livekit-client/dist/src/room/Room';
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-core/dist/observables/participant.d.ts:4:48 - error TS2307: Cannot find module 'livekit-client/dist/src/room/participant/Participant' or its corresponding type declarations.

4 import type { ParticipantEventCallbacks } from 'livekit-client/dist/src/room/participant/Participant';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-core/dist/observables/participant.d.ts:41:100 - error TS2307: Cannot find module 'livekit-client/dist/src/proto/livekit_models_pb' or its corresponding type declarations.

41 export declare function participantPermissionObserver(participant: Participant): Observable<import("livekit-client/dist/src/proto/livekit_models_pb").ParticipantPermission | undefined>;
                                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-react/dist/hooks/useLocalParticipantPermissions.d.ts:10:66 - error TS2307: Cannot find module 'livekit-client/dist/src/proto/livekit_models_pb' or its corresponding type declarations.

ion | undefined;
                                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

../node_modules/@livekit/components-react/dist/hooks/useParticipantPermissions.d.ts:15:103 - error TS2307: Cannot find module 'livekit-client/dist/src/proto/livekit_models_pb' or its corresponding type declarations.

15 export declare function useParticipantPermissions(options?: UseParticipantPermissionsOptions): import("livekit-client/dist/src/proto/livekit_models_pb").ParticipantPermission | undefined;

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 15.80 GB / 31.64 GB
  Binaries:
    Node: 20.0.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 117.0.5938.134
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.47)
    Internet Explorer: 11.0.19041.1566

Severity

serious, but I can work around it

Additional Information

No response

[lukasIO]

Thanks for the report! Could you provide a skeleton vite-react project that has the settings enabled that make the build fail for you?

[xiaomo1q]

'LiveKitRoom' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'. <LiveKitRoom There is a mismatch error in the new version type

[lukasIO]

which version of React are you using?

In order to be able to reference components with useRef we changed the ReturnType of some components from ReactElement to ReactNode. This should not result in any breaking changes though when using the components within a JSX declaration.

Where {@link ReactElement} only represents JSX, ReactNode represents everything that can be rendered.

[Dozalex]

'LiveKitRoom' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'. <LiveKitRoom There is a mismatch error in the new version type

I had same problem because I had the correct react version, but the old @types/react version. Updating the version solved the problem.