Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
JohnFScha opened this issue Sep 2, 2024 · 4 comments · May be fixed by #4782
Open
2 tasks done

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

JohnFScha opened this issue Sep 2, 2024 · 4 comments · May be fixed by #4782
Labels
bug Something isn't working

Comments

@JohnFScha
Copy link

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

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@JohnFScha JohnFScha added the bug Something isn't working label Sep 2, 2024
@thewaqasPro
Copy link

I'm having the same issue with my code.

@timges
Copy link

timges commented Sep 26, 2024

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

@Kejooorek
Copy link

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

@MuhammedNihad
Copy link

Nothing aboved worked. But the solution in following comment works! #3585 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants