Skip to content

MantineThemeColors are possibly "undefined" (loses types on TypeScript v4.8.2) #2364

@maxijonson

Description

@maxijonson

What package has an issue

@mantine/core

Describe the bug

I have a project that uses TypeScript 4.7.4 and compiles just fine. However, I recently noticed VS Code (which is using TypeScript 4.8.2) has started reporting errors for MantineThemeColors. At first, I thought it was a problem with my VS Code, but after upgrading my project's TS version to 4.8.2, the compilation started failing.

Running tsc --version && tsc --no-emit with TS 4.7.4 (no errors):

Version 4.7.4

Running tsc --version && tsc --no-emit with TS 4.8.2:

Version 4.8.2
theme.colors.dark[9]
                ^
Object is possibly "undefined".

tsconfig.json

{
    "compilerOptions": {
        "incremental": true,
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "./dist",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "baseUrl": ".",
        "allowJs": true,
        "sourceMap": true,
        "preserveWatchOutput": true,
        "pretty": true,
        "newLine": "LF",
        "types": ["node"],
        "jsx": "react",
        "strict": true,
        "exactOptionalPropertyTypes": false,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitOverride": true,
        "noImplicitReturns": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src", "vite.config.ts"]
}

What version of @mantine/hooks page do you have in package.json?

5.2.5

If possible, please include a link to a codesandbox with the reproduced problem

Unable to create a codesandbox, since they don't seem to allow running NPM scripts and the IDE's TS version is stuck at 4.5.5 .

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Removing (string & {}) from DefaultMantineColor seems to fix the type (i.e. I don't get "possibly undefined" errors). However, it causes errors in other places, such as ThemeIcon.color which would no longer accept a string. (I'd sometimes use gray.0 instead of the theme object from useMantineTheme. There could be other errors that I have not encountered.

The alternative right now would be to simply use optional chaining.

theme.colors.dark?.[9]

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedContributions from community are welcome

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions