Type error: 'searchParams' is possibly 'null'

[olivierlambert]

Found a bug? Please fill out the sections below. 👍

Issue Summary

Doing a yarn build on latest release is triggering this:

@calcom/web:build: Failed to compile.
@calcom/web:build:
@calcom/web:build: ../../packages/features/ee/workflows/components/WorkflowDetailsPage.tsx:48:23
@calcom/web:build: Type error: 'searchParams' is possibly 'null'
@calcom/web:build
@calcom/web:build:   46 |
@calcom/web:build:   47 |   const searchParams = useSearchParams();    
@calcom/web:build: > 48 |   const eventTypeId = searchParams.get("eventTypeId"); 
@calcom/web:build:      |                       ^    
@calcom/web:build:   49 |  
@calcom/web:build:   50 |   const eventTypeOptions = useMemo(    
@calcom/web:build:   51 |     () =>         
@calcom/web:build: ERROR: command finished with error: command (/data/cal/apps/web) yarn run build exited (1)                                                                                                    command (/data/cal/apps/web) yarn run build exited (1)  
Tasks:    6 successful, 7 total 
Cached:    2 cached, 7 total  
Time:    2m8.055s
Failed:    @calcom/web#build
ERROR  run failed: command  exited (1)

Steps to Reproduce

1. git checkout latest release
2. yarn then yarn build
3. get the issue

Actual Results

A broken build

Expected Results

A working build

Technical details

• Browser version: not relevant here
• Node.js version: v18.19.0

Evidence

• Build worked on the release 4.0.1

[dosubot]

To address the type error 'searchParams' is possibly 'null' in your WorkflowDetailsPage.tsx file, you can modify the code where eventTypeId is extracted from searchParams to safely handle potential null values. Use optional chaining (?.) and the nullish coalescing operator (??) like so:

const eventTypeId = searchParams?.get("eventTypeId") ?? undefined;

This approach ensures that if searchParams is null, the operation will not throw an error and will instead return undefined. The optional chaining operator allows safe access to properties on null or undefined objects by returning undefined instead of causing a runtime error. The nullish coalescing operator provides a default value if the left-hand expression evaluates to null or undefined.

This modification is crucial for maintaining the functionality of your application, specifically in scenarios where the eventTypeId query parameter is used to determine which event type is pre-selected or focused on the workflow details page.

Additionally, ensure your TypeScript configuration is set to handle strict type checking appropriately, as indicated by the "strict": true setting in your tsconfig.json. This setting enforces a more rigorous type system, which can help catch type-related issues during compile time but also requires that your codebase strictly adheres to type safety.

By implementing these changes, you should be able to resolve the build failure and maintain the intended functionality of your application.

Details

Sources

• packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
• packages/lib/hooks/useCompatSearchParams.tsx
• tests/libs/mocks/prisma.ts
• apps/web/test/utils/bookingScenario/expects.ts
• packages/lib/slots.test.ts
• packages/features/bookings/lib/handleNewBooking/test/reschedule.test.ts
• apps/api/v1/test/lib/bookings/_post.test.ts
• packages/platform/sdk/tsconfig.json

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[olivierlambert]

Applying the change suggested by the bot makes the build work. However I think this should be fixed upstream ASAP, since I'm probably not the only one with the issue? Thanks! 👍

[Conni2461]

i think this is fixed in ef98105

i currently also ran into this issue while trying to deploy a v4.0.5 build to production.

[olivierlambert]

Fixed by latest release v4.0.6. Closing.