[bug]: Type error: Property 'char' does not exist on type 'SlotProps | undefined'.

[ritmillio]

Describe the bug

After installation of the input-otp component I am getting a build error in Next.js - using TypeScript.

The error occurs here: const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];

Property 'char' does not exist on type 'SlotProps | undefined'.ts(2339) Property 'hasFakeCaret' does not exist on type 'SlotProps | undefined'.ts(2339) Property 'isActive' does not exist on type 'SlotProps | undefined'.ts(2339)

Affected component/components

Input OTP

How to reproduce

Install input-otp.

Setup eslint: eslintrc.cjs:

/** @type {import("eslint").Linter.Config} */
const config = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
  ],
  rules: {
    // These opinionated rules are enabled in stylistic-type-checked above.
    // Feel free to reconfigure them to your own preference.
    "@typescript-eslint/array-type": "off",
    "@typescript-eslint/consistent-type-definitions": "off",

    "@typescript-eslint/consistent-type-imports": [
      "warn",
      {
        prefer: "type-imports",
        fixStyle: "inline-type-imports",
      },
    ],
    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
    "@typescript-eslint/require-await": "off",
    "@typescript-eslint/no-misused-promises": [
      "error",
      {
        checksVoidReturn: { attributes: false },
      },
    ],
  },
};

module.exports = config;

Codesandbox/StackBlitz link

No response

Logs

./src/components/core/ui/input-otp.tsx:39:11
Type error: Property 'char' does not exist on type 'SlotProps | undefined'.

  37 |   const inputOTPContext = React.useContext(OTPInputContext);
  38 |
> 39 |   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
     |           ^
  40 |
  41 |   return (
  42 |     <div
 ELIFECYCLE  Command failed with exit code 1.

System Info

package.json

"next": "^14.1.4",
"@types/eslint": "^8.56.2",
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0",
"typescript": "^5.4.3",

Before submitting

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

[rtorcato]

this will fix it.

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

[ritmillio]

this will fix it.

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

I have the following error with this solution:

Use a ! assertion to more succinctly remove null and undefined from the type.eslint@typescript-eslint/non-nullable-type-assertion-style

[guilhermerodz]

hey @ritmillio input-otp maintainer here 👋🏻

could not reproduce it locally.

can you provide a stackblitz?

[keeandev]

Ran into the same issue today, fresh install from shadcn.

[keeandev]

Ran into the same issue today, fresh install from shadcn.

I reinstalled my project with PNPM instead of Bun, problem solved.

[ritmillio]

Hey, @guilhermerodz

Here's a minimum reproduction of my use-case: https://stackblitz.com/edit/stackblitz-starters-9avgfk?file=src%2Fcomponents%2Fui%2Finput-otp.tsx

@keeandev - I am using pnpm but reinstalling didn't solve my problem

[keeandev]

Hey, @guilhermerodz

Here's a minimum reproduction of my use-case: https://stackblitz.com/edit/stackblitz-starters-9avgfk?file=src%2Fcomponents%2Fui%2Finput-otp.tsx

@keeandev - I am using pnpm but reinstalling didn't solve my problem

Apologies, I had a very similar issue, but I solved this issue by putting an exclamation mark at the end of the line.

[leohenworx]

I suspect this is related to the tsconfig.json noUncheckedIndexedAccess flag. If i put it to false the issue disappears

[notwatermango]

Yeah the laziest fix to mute the error is const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;

[skvilshell]

I ran into this problem. Tried all the solutions from above. Nothing helped. To solve this problem, you need to add a check for the existence of the object before destructuring. One way to do this is to use the logical AND operator (&&), the ternary operator, or optional chaining.

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

If you have typescript version 3.7 or higher

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