[FIXED] How to determine if nextjs children are strings

Issue

Before upgrading to next 13 code was working fine now I get this typescript error in vsode, buttonProps is of type type 'ReactI18NextChild | Iterable'. Stack overflow said I have to add more detail because my post is mainly code.

Argument of type 'ReactI18NextChild | Iterable' is not assignable to parameter of type 'ReactNode | ReactNode[]'.

import React, { ButtonHTMLAttributes } from 'react';
import { ReactI18NextChild } from 'react-i18next';
import { parseBackgroundColor, parseColor, parseBorderColor, parseFontSize } from 'styles/styles';

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
    otherProps
}

function Button({ otherProps, ...buttonProps }: Props) {
    const isString = React.Children.toArray(buttonProps.children).some(child => {
      if (
        typeof child === 'string' ||
        typeof child === 'number' ||
        ((child as any)?.type && ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes((child as any).type))
      ) {
        return true;
      }
    });

    return <button>{buttonProps.children}</button>
}

All packages have been updated to latest.

"dependencies": {
    "@aws-amplify/datastore": "^4.0.1",
    "@aws-sdk/util-credentials": "^3.56.0",
    "@capacitor/core": "^4.4.0",
    "@capacitor/device": "^4.0.1",
    "@react-pdf/renderer": "^3.0.1",
    "array-move": "^4.0.0",
    "aws-amplify": "5.0.1",
    "clsx": "^1.2.1",
    "crypto-js": "^4.1.1",
    "graphql-tag": "^2.12.6",
    "i18next": "^21.10.0",
    "i18next-locize-backend": "^6.0.0",
    "immer": "^9.0.16",
    "intl-tel-input": "^17.0.19",
    "ksuid": "^3.0.0",
    "locize-cli": "^7.12.8",
    "logrocket": "^3.0.1",
    "logrocket-react": "^5.0.1",
    "next": "^13.0.3",
    "next-pwa": "^5.6.0",
    "qrcode.react": "^3.1.0",
    "react": "18.2.0",
    "react-datepicker": "^4.7.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "18.2.0",
    "react-google-charts": "^4.0.0",
    "react-i18next": "12.0.0",
    "react-indiana-drag-scroll": "^2.1.0",
    "react-loader-spinner": "^6.0.0-0",
    "react-query": "^3.39.2",
    "react-scripts": "5.0.1",
    "react-simple-keyboard": "^3.4.237",
    "sharp": "^0.31.2",
    "universal-cookie": "^4.0.4",
    "zustand": "^4.1.4"   },   "devDependencies": {
    "@babel/helper-call-delegate": "^7.12.1",
    "@types/crypto-js": "^4.0.2",
    "@types/intl-tel-input": "^17.0.6",
    "@types/logrocket-react": "^3.0.0",
    "@types/node": "18.11.9",
    "@types/qrcode.react": "^1.0.1",
    "@types/react": "^18.0.25",
    "@types/react-datepicker": "^4.8.0",
    "@types/react-dom": "^18.0.9",
    "@typescript-eslint/eslint-plugin": "5.43.0",
    "@welldone-software/why-did-you-render": "^7.0.1",
    "autoprefixer": "^10.4.13",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.3",
    "eslint-config-prettier": "^8.5.0",
    "husky": "^8.0.2",
    "lint-staged": "^13.0.3",
    "postcss": "^8.4.19",
    "prettier": "^2.6.1",
    "stylelint": "^14.15.0",
    "stylelint-config-prettier": "^9.0.4",
    "stylelint-config-standard": "^29.0.0",
    "stylelint-config-tailwindcss": "^0.0.7",
    "tailwindcss": "^3.2.4",
    "typescript": "4.9.3"   } }

Solution

The reason for this error is the type definition of react-i18next. There are certain interface augmentations inside the react-i18next type definition files which override existing types.

The problematic bit is here:

type ObjectOrNever = TypeOptions['allowObjectInHTMLChildren'] extends true
  ? Record<string, unknown>
  : never;
type ReactI18NextChild = React.ReactNode | ObjectOrNever;

declare module 'react' {
  interface HTMLAttributes<T> {
    children?: ReactI18NextChild | Iterable<ReactI18NextChild>;
  }
}

For some reason, children are overwritten to be of type ReactI18NextChild | Iterable<ReactI18NextChild>. And ReactI18NextChild includes this ObjectOrNever type in the union which has a possible Record<string, unknown> output type. And Record<string, unknown> is not assignable to React.ReactNode causing the error.

I would personally advise to just use a type assertion for now:

const isString = React.Children.toArray(
  buttonProps.children as React.ReactNode
).some(child => {
  /* ... */
});

Or to completely remove the react-i18next import, if possible.

Either way, you may open an issue on Github about this. This may or may not be the indented behavior especially if this worked before the update.

Answered By - Tobias S.
Answer Checked By - - Jay B. (ReactFix Admin)