[bug]: input-otp type error on line 38

[JohnFScha]

Describe the bug

Namely this line ⬇️

const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

Gives the following ts error on each property destructured:

Property 'char' does not exist on type 'SlotProps | undefined'.ts(2339)
const char: any

I solved it by marking it as existant (const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!), but I gues that's cheating ts in some sense, so I figured I'd report it just in case.

It happened for me when I tried to build my turborepo, which is a private repo of my organization. I'll put the logs down just in case.

Affected component/components

input-otp

How to reproduce

Just install it and go to the ui/ folder open the input-otp.tsx and the type error should arise.

Codesandbox/StackBlitz link

https://github.com/JohnFScha/monorepoFlexy

Logs

┌ argentina#build > cache miss, executing f63b4d66d26ab565
│
│ > argentina@1.0.0 build C:\Users\user1\Desktop\Monorepo\monorepoFlexy\apps\argentina
│ > next build
│
│   ▲ Next.js 14.2.4
│   - Environments: .env
│
│    Creating an optimized production build ...
│  ✓ Compiled successfully
│    Linting and checking validity of types  ... ⨯ ESLint: Cannot read config file: C:\Users\user1\Desktop\Monorepo\monorepoFle
│ xy\apps\argentina\.eslintrc.js Error: require() of ES Module C:\Users\user1\Desktop\Monorepo\monorepoFlexy\apps\argentina\.es
│ lintrc.js from C:\Users\user1\Desktop\Monorepo\monorepoFlexy\node_modules\.pnpm\@eslint+eslintrc@2.1.4\node_modules\@eslint\e
│ slintrc\dist\eslintrc.cjs not supported. .eslintrc.js is treated as an ES module file as it is a .js file whose nearest paren
│ t package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead either ren
│ ame .eslintrc.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules
│ , or change "type": "module" to "type": "commonjs" in C:\Users\user1\Desktop\Monorepo\monorepoFlexy\apps\argentina\package.js
│ on to treat all .js files as CommonJS (using .Failed to compile.ules instead).
│    Linting and checking validity of types  ...
│ ../../packages/ui/src/components/ui/input-otp.tsx:38:11
│ Type error: Property 'char' does not exist on type 'SlotProps | undefined'.
│
│   36 | >(({ index, className, ...props }, ref) => {
│   37 |   const inputOTPContext = React.useContext(OTPInputContext)
│ > 38 |   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
│      |           ^
│   39 |
│   40 |   return (
│   41 |     <div
│  ELIFECYCLE  Command failed with exit code 1.
│
│ command finished with error: command (C:\Users\user1\Desktop\Monorepo\monorepoFlexy\apps\argentina) C:\Users\user1\AppData\Lo
│ cal\pnpm\pnpm.exe run build exited (1)

System Info

I'm running on windows 11 pro, v10.0.22631 compilation 22631
16GB ram 
AMD Ryzen 5 4600G with Radeon Graphics, 3701 Mhz, 6 main cores, 12 logical cores

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[thewaqasPro]

I'm having the same issue with my code.

[timges]

Added a PR to adress this. Some null / undefined guards should already seal the deal here.

[Kejooorek]

For me this errors appears when i change maxLength={x} and x is bigger then number of InputOTPSlot ;)