Unexpected error when using OrbitProvider & `useId` prop

Use this ONLY for reporting bugs. For requesting new features check this link.

Currently trying to upgrade our dependency on orbit-components from ^8 to ^9 (but also observed this in ^10). As part of the migration guide, you're instructed to provide a new useId prop to <OrbitProvider />, which is forwarding the React.useId hook.

Expected Behavior

Application should build.

Current Behavior

Orbit RandomIdProvider: useId is undefined; please provide React.useId or react-uid's useUID. is thrown, preventing the building of the application.

Possible Solution

orbit/packages/orbit-components/src/OrbitProvider/RandomId/Provider.tsx

Lines 3 to 7 in 370e768

    
           const RandomIdContext = React.createContext<() => string>(() => { 
        
             throw new Error( 
        
               "Orbit RandomIdProvider: useId is undefined; please provide React.useId or `react-uid`'s useUID.", 
        
             ); 
        
           });

I understand the idea behind throwing in the context if useId hasn't been passed in, but for whatever reason this isn't working as far as I have observed.

I have tinkered in this function to return a static string and observed that when the useId hook is provided as instructed, components which use the useRandomId hook are indeed given a random ID rather than the static text. This may be a solution if we can rely on the types given to the OrbitProvider props.

Steps to Reproduce

Here is a CodeSandbox using React 18, which fails to run the dev server due to the above error.

https://codesandbox.io/p/sandbox/reactorbit-cpcdsr?file=%2Fsrc%2Findex.js%3A7%2C53

Context (Environment)

I've tried this is a number of places, the above CodeSandbox is the most stripped back example of it. But I have also observed this problem when using Gatsby v4, Gatsby v5, NextJS v14, and just plain old React 18.

Hi all, further to this: the code sandbox linked in the getting started guide errors out on load without any changes to the source (https://codesandbox.io/s/github/designkiwicom/orbit-sandbox) but the sandbox linked on the homepage works fine (https://orbit.kiwi/playground).

Presumably you've been using V9 & V10 internally without issue, are you using some sort of workaround?

Hi all, is this recognised as a bug? Is there any plan to patch it or would you accept a PR with a potential fix?

Hey @mainframev @mvidalgarcia, tagging because we had a very brief interaction on a previous PR. Is there recognition of this as a bug and any plans to fix it? Happy to assist if it moves things forward.

@ConorHaining sorry for the late response

Hi 👋🏻

You are right, we do not have any issues right now in docs or any other FE module. I looked at it via source graph and it's used in the same way as you did in code sandbox. For now, we do not have any issues reported, so perhaps might be something with the setup in sandbox.

Try maybe something like this, it's odd, but Idk what else to suggest here 🤷🏻 This change is temporary and we will remove this, when all our modules will migrate to React v18, so if it won't fix it for you, you can stay at the latest working version for you until we will remove it

You can also try to do it in the old way, install react-uid and pass this function instead of native React.useId as documented here for v 17

import RandomIdProvider from '@kiwicom/orbit-components/lib/OrbitProvider/RandomId/Provider';

...
root.render(
  <React.StrictMode>
    <OrbitProvider
      useId={React.useId}
    >
      <RandomIdProvider useId={React.useId}>
        <App />
      </RandomIdProvider>
    </OrbitProvider>
  </React.StrictMode>,
);

Hi @mvidalgarcia is there anyway to get this looked at by the maintainers?

It is breaking for me as well after updating 8.1.2 -> 9.00 (also breaking on 10,12,14, and 16.0.0).
I'm on react 18.2 and node 21.9.

FWIW I am only seeing this on some components (Modal, ItinerarySegmentDetail), but not others (ItinerarySegment, ItinerarySegmentStop)

Hi @statsgod, could you please provide us with a minimal CodeSandbox reproducing the issue?

Hi @mvidalgarcia sorry just seeing this, this example from @ConorHaining shows the problem:
https://codesandbox.io/p/sandbox/github/designkiwicom/orbit-sandbox/tree/master/?file=%2Fpackage.json%3A10%2C23

Hi @statsgod, I think you were missing some components in your example.

This one should work: https://codesandbox.io/p/sandbox/affectionate-water-9pcd7l

	const RandomIdContext = React.createContext<() => string>(() => {
	throw new Error(
	"Orbit RandomIdProvider: useId is undefined; please provide React.useId or `react-uid`'s useUID.",
	);
	});