😰
Next.js+TypeScript importしたSVGの型がanyになる(外伝)
環境
- Next.js 13.0.5
- Typescript 4.8.4
- ESLint 8.21.0
経緯
元々babel-plugin-inline-react-svgというSVGをインラインで読み込むプラグインを使用していたのですが、この度SWCに切り替えるということで@svgr/webpackに置き換える作業を行いました。
コチラの記事を参考にビルドが通るところまでは漕ぎ着けたのですが、
ESLint: Unsafe assignment of an `any` value.(@typescript-eslint/no-unsafe-assignment)
というESLintのエラーだけがずっと残った状態に。
原因1
eslintのキャッシュファイル.next/cache/eslint/.cache_cnavtvが悪さしていた。
GitHub Actions上ではlintが通るのが不思議だったので、試しに生成物を消してみたらうまくいきました。
原因2
next-env.d.ts
/// <reference types="next/image-types/global" />
next-env.d.tsに上記参照が残ったままになっていた。
next.config.js
module.exports = {
images: {
disableStaticImages: true,
},
}
このようにdisableStaticImagesを記載してもビルドしない限りずっと該当行が残り続けるため、eslint上ではエラーとなっていた訳です。
※上記記載した後にビルド
$ npm run build
まとめ
disableStaticImagesを記載して.next/cache/eslint/.cache_cnavtvを削除した後にnpm run buildすれば直る。
GitHub Actionsでは通るのでずっと頭傾げてましたが差異を洗ったら簡単でしたね...(めっちゃ調べた)
Discussion