Skip to content

Latest commit

 

History

History
56 lines (46 loc) · 1.78 KB

c52234e135aec0.md

File metadata and controls

56 lines (46 loc) · 1.78 KB
title emoji type topics published published_at
Next.js+TypeScript importしたSVGの型がanyになる(外伝)
😰
tech
nextjs
eslint
svg
true
2022-12-28 01:40

環境

  • Next.js 13.0.5
  • Typescript 4.8.4
  • ESLint 8.21.0

経緯

元々babel-plugin-inline-react-svgというSVGをインラインで読み込むプラグインを使用していたのですが、この度SWCに切り替えるということで@svgr/webpackに置き換える作業を行いました。

https://zenn.dev/catnose99/articles/49c12f84182bdf

コチラの記事を参考にビルドが通るところまでは漕ぎ着けたのですが、

ESLint: Unsafe assignment of an `any` value.(@typescript-eslint/no-unsafe-assignment)

というESLintのエラーだけがずっと残った状態に。

原因1

eslintのキャッシュファイル.next/cache/eslint/.cache_cnavtvが悪さしていた。

GitHub Actions上ではlintが通るのが不思議だったので、試しに生成物を消してみたらうまくいきました。

原因2

/// <reference types="next/image-types/global" />

next-env.d.tsに上記参照が残ったままになっていた。

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

このようにdisableStaticImagesを記載してもビルドしない限りずっと該当行が残り続けるため、eslint上ではエラーとなっていた訳です。 ※上記記載した後にビルド

$ npm run build

まとめ

disableStaticImagesを記載して.next/cache/eslint/.cache_cnavtvを削除した後にnpm run buildすれば直る。

GitHub Actionsでは通るのでずっと頭傾げてましたが差異を洗ったら簡単でしたね...(めっちゃ調べた)