Next.js部署报错：解决匿名默认导出与displayName缺失问题

遇到的问题 #

• 警告：将箭头函数赋值给变量后再导出为模块默认值 import/no-anonymous-default-export
• 错误：组件定义缺少显示名称 react/display-name

部署在Vercel上的Next.js应用原本运行正常，近期因箭头函数作为默认导出时未设置displayName，触发ESLint校验导致部署失败，需修改导出代码解决上述问题。

原组件代码 #

import React from "react";
import styled from "@emotion/styled";

const GlitchText = styled.div`
  position: relative;

  &:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    left: 2px;
    text-shadow: -1px 0 #d6d6d6;

    overflow: hidden;
    animation: noise-anim-2 5s infinite linear alternate-reverse;
  }

  &:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #93f41b;

    left: -2px;
    text-shadow: -1px 0 #d6d6d6;
    overflow: hidden;
    animation: noise-anim 1s infinite linear alternate-reverse;
  }

  @keyframes noise-anim {
    0% {
      clip-path: inset(100% 0 1% 0);
    }
    5% {
      clip-path: inset(45% 0 41% 0);
    }
    10% {
      clip-path: inset(8% 0 18% 0);
    }
    15% {
      clip-path: inset(94% 0 7% 0);
    }
    20% {
      clip-path: inset(23% 0 69% 0);
    }
    25% {
      clip-path: inset(21% 0 28% 0);
    }
    30% {
      clip-path: inset(92% 0 3% 0);
    }
    35% {
      clip-path: inset(2% 0 35% 0);
    }
    40% {
      clip-path: inset(80% 0 1% 0);
    }
    45% {
      clip-path: inset(75% 0 9% 0);
    }
    50% {
      clip-path: inset(37% 0 3% 0);
    }
    55% {
      clip-path: inset(59% 0 3% 0);
    }
    60% {
      clip-path: inset(26% 0 67% 0);
    }
    65% {
      clip-path: inset(75% 0 19% 0);
    }
    70% {
      clip-path: inset(84% 0 2% 0);
    }
    75% {
      clip-path: inset(92% 0 6% 0);
    }
    80% {
      clip-path: inset(10% 0 58% 0);
    }
    85% {
      clip-path: inset(58% 0 23% 0);
    }
    90% {
      clip-path: inset(20% 0 59% 0);
    }
    95% {
      clip-path: inset(50% 0 32% 0);
    }
    100% {
      clip-path: inset(69% 0 9% 0);
    }
  }
`;

export default ({ children }) => {
  return <GlitchText data-text={children}>{children}</GlitchText>;
};

解决方案 #

方案一：使用具名变量导出（推荐） #

将匿名箭头函数赋值给一个具名变量，React会自动将变量名作为组件的displayName，同时解决匿名导出的警告：

import React from "react";
import styled from "@emotion/styled";

// 保留GlitchText的styled代码不变

const GlitchTextComponent = ({ children }) => {
  return <GlitchText data-text={children}>{children}</GlitchText>;
};

export default GlitchTextComponent;

方案二：手动设置displayName #

如果需要保留现有写法，可手动给组件添加displayName属性：

import React from "react";
import styled from "@emotion/styled";

// 保留GlitchText的styled代码不变

const GlitchTextComponent = ({ children }) => {
  return <GlitchText data-text={children}>{children}</GlitchText>;
};

// 手动指定displayName
GlitchTextComponent.displayName = "GlitchTextComponent";

export default GlitchTextComponent;

两种方案都能通过ESLint校验，解决Vercel部署失败的问题，方案一写法更简洁，无需手动设置displayName。

内容的提问来源于stack exchange，提问作者Shantanu Dwivedi