Error: Image with src "..." is missing required "width" property.

기존 Next.js 프로젝트에서는 Stitches를 사용하고 있었다. 그런데, Stitches는 더 이상 적극적으로 유지보수 되지 않는다고 하여 사용성이 비슷하면서 제로 런타임의 이점을 갖는 PandaCSS로의 마이그레이션을 진행 중이다. PandaCSS 공식 홈페이지에서 안내된 대로 마이그레이션을 완료했는데, dev로 실행했을 때 제목과 같은 오류가 발생했다. 물론 next/image 패키지의  Image 컴포넌트를 사용할 적에 나는 width, height 속성을 잘 전달했다. 기존에도 잘 동작하고 있었다. 관련하여 검색해도 비슷한 사례는 찾아볼 수 없었다. 

styled 함수를 이용하여 Image 컴포넌트를 감싸서 사용하고 있었는데, 

import { styled } from "@/styled-system/jsx";
import Image from "next/image";

const BannerImage = styled(Image, {
  base: {
    width: "100%",
    padding: "16px",
  }
});

export const AdvertiseBanners = () => {
  return (
    <Container>
      <BannerImage
        src="/assets/images/home/banner.png"
        alt="광고 배너"
        width={382}
        height={120}
      />
    </Container>
  );
};

이를  css 함수로 생성된 클래스를 사용하도록 변경했더니 해결됐다. styled 함수에서 제공하는 속성들이 덮어쓰기 되었나보다.

import { css } from "@/styled-system/css";
import Image from "next/image";

const bannerStyles = css({
  width: "100%",
  padding: "16px",
});

export const AdvertiseBanners = () => {
  return (
    <Container>
      <Image
        className={bannerStyles}
        src="..."
        alt="광고 배너"
        width={382}
        height={120}
      />
    </Container>
  );
};

공식문서를 찾아보니 jsx styled 함수 생성 규칙에 jsxStyleProps가 기본적으로 all로 설정된다고 적혀있다.

이를 none으로 바꿔 같은 문제가 재발하지 않도록 했다.

// panda.config.ts
import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ["./src/**/*.{js,jsx,ts,tsx}", "./src/pages/**/*.{js,jsx,ts,tsx}"],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {},
  },

  // The output directory for your css system
  outdir: "./src/styled-system",

  jsxFramework: "react",
  jsxStyleProps: "none",
});