Nextjs: TypeError: 지원되지 않는 파일 형식: v.11로 업데이트한 후 정의되지 않음

Nextjs: TypeError: 지원되지 않는 파일 형식: v.11로 업데이트한 후 정의되지 않음

업데이트 후 이미지를 로드하려고 할 때 11에서 다음 항목:

import segmentLogoWhitePng from 'assets/images/my-image.png'

다음 오류가 발생함:

TypeError: unsupported file type: undefined (file: undefined)

최신 업데이트

그것은 지금 현재 작동하고 있다.next@v11.0.1. 아래 단계를 따를 필요가 없음.

---

해결 방법으로 지금은 정적 이미지 기능을 사용하지 않도록 설정하십시오.

// next.config.js

module.exports = {
  images: {
    disableStaticImages: true
  }
}

---

업데이트: 이 문제는 다음@11.0.1-카나리아.4에서 해결되었다.설치:

$ npm install next@canary

관련 이슈 및 PR을 참조하십시오.

정적 가져오기 사용 안 함

-10.0.0 버전 이후 Next.js에는 이미지 구성요소와 자동 이미지 최적화 기능이 내장되어 있음

기본 동작은 가져오기 아이콘과 같은 정적 파일을 './icon.png에서 가져온 다음 src 속성으로 전달할 수 있도록 한다.경우에 따라 가져오기가 다르게 동작할 것으로 예상하는 다른 플러그인과 충돌할 경우 이 기능을 사용하지 않도록 설정할 수 있다.아래 구성으로 정적 이미지 가져오기를 사용하지 않도록 설정할 수 있다.

  // next.config.js
  
  images: {
        disableStaticImages: true
    }

웹 팩(next.config.js)에서 이미지/css 로더 구성을 방금 제거했는데 작동하기 시작했어.

인next.config.js파일 형식 검사 및 처리기를 추가할 수 있다.svg는 다음과 같은 코드를 넣고 npm 패키지 @svgr/webpack을 다운로드하여 처리할 수 있다는 것을 알고 있어 .png 등가물이 있을 수 있다.

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

이 스택 오버플로에서 발생하는 이 코드를 예로 들 수 있다.

module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      ],
    }
};

이 대답이 100%가 아니었던 건 알지만, 조금이나마 도움이 되었으면 좋겠다.

GitHub repo fix 유형에서 문제를 검토하여 현재 작동 중인 정적 이미지를 확인하십시오.

https://github.com/vercel/next.js/pull/25808

  module.exports = {
  images: {
    disableStaticImages: true
  }
}

참조URL: https://stackoverflow.com/questions/68008498/nextjs-typeerror-unsupported-file-type-undefined-after-update-to-v-11