REACT - 함수 구성 요소가 함수 선언이 아닙니다.

좋아, 그래서 이것은 잠시 동안 내 머리를 긁적였다. 일부 패키지에 대한 최근 업데이트 후 다음 오류가 발생하기 시작했습니다.

ESLint: Function component is not a function declaration (react/function-component-definition)

거의 모든 구성 요소에 대해. 내 구성 요소는 대부분 아래 코드와 같으며 다음 예제는 수정 방법을 보여줍니다.

TLDR 버전

// Turn this 
const ActionButton: React.FC<ActionButtonProps> = (props) => { }

// into 
function ActionButton(props: ActionButtonProps) {}

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}) => {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;

많은 다른 기사를 읽고 몇 가지를 시도한 후에 이것은 이제 되었습니다.

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

function ActionButton({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}: ActionButtonProps) {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;

참조

https://eslint.org/docs/rules/func-names
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md