[material-ui][Box] Unsafe assignment of an any value error when using i18next t function in aria-label of Box component

[reihwald]

Steps to reproduce

Set up a project using @mui/material, react-i18next, eslint and typescript. Set up the project according to the context section.
Create this component:

import { PaymentInformationModel } from "../models";
import { Box, ClickAwayListener, Stack, Tooltip } from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";

interface Props {
    info: PaymentInformationModel;
}

const PaymentInfo = (props: Props) => {
    const { info } = props;
    const [descriptionExpanded, setDescriptionExpanded] = useState(false);
    const { t } = useTranslation();

    const handleTooltipClose = () => {
        setDescriptionExpanded(false);
    };

    return (
        <Stack alignItems="center">
            <ClickAwayListener onClickAway={handleTooltipClose}>
                <Tooltip
                    onClose={handleTooltipClose}
                    open={descriptionExpanded}
                    disableFocusListener
                    disableHoverListener
                    disableTouchListener
                    title={info.Description}
                    slotProps={{
                        popper: {
                            modifiers: [
                                {
                                    name: "offset",
                                    options: {
                                        offset: [0, -8],
                                    },
                                },
                            ],
                        },
                    }}
                >
                    <Box aria-label={t("description_expand")}>
                        <Box sx={{ maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                            {info.Description}
                        </Box>
                    </Box>
                </Tooltip>
            </ClickAwayListener>
        </Stack>
    );
};

export default PaymentInfo;

Current behavior

I get a @typescript-eslint/no-unsafe-assignment eslint error at the t at <Box aria-label={t("description_expand")}>

<Box aria-label={t("description_expand") as string}> doesn't work ether but <Box aria-label={`${t("description_expand")}`}> works.

Doing this works as well:

const test = t("description_expand");

    return (
        <Stack alignItems="center">
            ...
                    <Box aria-label={test}>
                        <Box sx={{ maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{info.Description}</Box>
                    </Box>
                </Tooltip>
            </ClickAwayListener>
        </Stack>
    );

Using a different Mui component or a div works: <div aria-label={t("description_expand")}>

Expected behavior

The aria-label of Box should work like the one of the other components or elements.

Context

The project really isn't something special.

Your environment

npx @mui/envinfo

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.128)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.33
    @mui/core-downloads-tracker:  5.15.10
    @mui/icons-material: ^5.15.6 => 5.15.10
    @mui/lab:  5.0.0-alpha.162
    @mui/material: ^5.15.6 => 5.15.10
    @mui/private-theming:  5.15.9
    @mui/styled-engine:  5.15.9
    @mui/system:  5.15.9
    @mui/types:  7.2.13
    @mui/utils:  5.15.9
    @types/react: ^18.2.48 => 18.2.56
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.3.3 => 5.3.3

My .eslintrc

module.exports = {
    env: { browser: true, es2020: true },
    extends: [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/typescript",
        "plugin:@typescript-eslint/recommended-type-checked",
        "plugin:@typescript-eslint/stylistic-type-checked",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "plugin:prettier/recommended",
    ],
    parser: "@typescript-eslint/parser",
    plugins: ["react-refresh"],
    settings: {
        react: { version: "detect" },
    },
    rules: {
        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],

        "import/extensions": [
            "error",
            "ignorePackages",
            {
                js: "never",
                jsx: "never",
                ts: "never",
                tsx: "never",
            },
        ],

        "@typescript-eslint/no-misused-promises": [
            2,
            {
                checksVoidReturn: {
                    attributes: false,
                },
            },
        ],
    },
};

And my tsconfig:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": false,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["{pathtoreactcode}"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": [
    "vite.config.mts"
  ]
}

Search keywords: i18next aria-label eslint typescript

[siriwatknp]

Please provide a repository that I can reproduce.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[reihwald]

Sorry for the slow response. Here is a StackBlitz link for this issue: https://stackblitz.com/edit/vitejs-vite-7pdrhe?file=src%2Fcomponents%2FIssueComponent.tsx

You have to run npm run lint to see the issue as StackBlitz somehow doesn't show it in the editor.

[ZeeshanTamboli]

It's an issue in i18next. See discussion in i18next/i18next#2032. There are differences in return type of t function.