Nextjs Eslint Error , Component definition is missing display name

[wadoud1234]

I was facing an error when build nextjs app for production this error appears as some components doesn't have display name

this error was related to file create-style-context.tsx in lib directory

[wadoud1234]

As solution for this i did some modification to the code , to add display name to components created by arrow functions , first i create the component , then i forwardref to it , the old code `

type Recipe = (props: Record<string, unknown>) => Record<string, () => string>;
type Slot<R extends Recipe> = keyof ReturnType<R>;

const cx = (...args: (string | undefined)[]) => args.filter(Boolean).join(" ");

export const createStyleContext = <R extends Recipe>(recipe: R) => {
const StyleContext = createContext<Record<Slot<R>, () => string> | null>(
  null
);

const withRootProvider = <P extends {}>(Component: ElementType) => {
  const StyledComponent = (props: P) => {
    const slotStyles = recipe(props) as Record<Slot<R>, () => string>;

    return (
      <StyleContext.Provider value={slotStyles}>
        <Component {...props} />
      </StyleContext.Provider>
    );
  };
  return StyledComponent;
};
withRootProvider.displayName = "withRootProvider";
const withProvider = <T, P extends { className?: string }>(
  Component: ElementType,
  slot: Slot<R>
) => {
  return forwardRef<T, P>((props, ref) => {
    const slotStyles = recipe(props) as Record<Slot<R>, () => string>;
    return (
      <StyleContext.Provider value={slotStyles}>
        <Component
          {...props}
          ref={ref}
          className={cx(slotStyles?.[slot](), props.className)}
        />
      </StyleContext.Provider>
    );
  });
};
withProvider.displayName = "withContext";
const withContext = <T, P extends { className?: string }>(
  Component: ElementType,
  slot: Slot<R>
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
  return forwardRef<T, P>((props, ref) => {
    const slotStyles = useContext(StyleContext);
    return (
      <Component
        {...props}
        ref={ref}
        className={cx(slotStyles?.[slot](), props.className)}
      />
    );
  });
};
withContext.displayName = "withContext";
return {
  withRootProvider,
  withProvider,
  withContext,
};

};

`

new fixed code `

type Recipe = (props: Record<string, unknown>) => Record<string, () => string>;
type Slot<R extends Recipe> = keyof ReturnType<R>;

const cx = (...args: (string | undefined)[]) => args.filter(Boolean).join(" ");

export const createStyleContext = <R extends Recipe>(recipe: R) => {
  const StyleContext = createContext<Record<Slot<R>, () => string> | null>( null );

const withRootProvider = <P extends {}>(Component: ElementType) => {
  const StyledComponent = (props: P) => {
    const slotStyles = recipe(props) as Record<Slot<R>, () => string>;

    return (
      <StyleContext.Provider value={slotStyles}>
        <Component {...props} />
      </StyleContext.Provider>
    );
  };
  return StyledComponent;
};
withRootProvider.displayName = "withRootProvider";
const withProvider = <T, P extends { className?: string }>(
  Component: ElementType,
  slot: Slot<R>
) => {
  const ChildComponent = (props: P, ref: ForwardedRef<T>) => {
    const slotStyles = recipe(props) as Record<Slot<R>, () => string>;
    return (
      <StyleContext.Provider value={slotStyles}>
        <Component
          {...props}
          ref={ref}
          className={cx(slotStyles?.[slot](), props.className)}
        />
      </StyleContext.Provider>
    );
  };
  return forwardRef<T, P>(ChildComponent);
};
withProvider.displayName = "withContext";
const withContext = <T, P extends { className?: string }>(
  Component: ElementType,
  slot: Slot<R>
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
  const ChildComponent = (props: P, ref: ForwardedRef<T>) => {
    const slotStyles = useContext(StyleContext);
    return (
      <Component
        {...props}
        ref={ref}
        className={cx(slotStyles?.[slot](), props.className)}
      />
    );
  };
  return forwardRef(ChildComponent);
};
withContext.displayName = "withContext";
return {
  withRootProvider,
  withProvider,
  withContext,
};

};

createStyleContext.dislayName = "createStyleContext"; `

[corydeppen]

This same error appears when using a component like Text. I also noticed the Next quick start example has the react/display-name rule turned off.

Is this a known issue that may be resolved in a future release?