【エラー】Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`? の原因と解消法

プログラミング

ちょっとしたエラーです。一応メモとして残しておきます。

エラー内容

エラー自体は2つ発生しているものの、原因は同じような感じなので同時に扱います。調べてみた感じsvgファイルの書き方？あたりが怪しいです。

//エラー①
Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?
    at svg
    at div
    at footer
    at Footer
    at div
    at div
    at MyApp (webpack-internal:///./pages/_app.tsx:48:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:258:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:754:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:893:25)
//エラー②
Warning: Invalid DOM property `clip-rule`. Did you mean `clipRule`?
    at svg
    at div
    at footer
    at Footer
    at div
    at div
    at MyApp (webpack-internal:///./pages/_app.tsx:48:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:258:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:754:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:893:25)

原因

svgデータを直接記述してしまうとこのようなエラーが発生するようです。ロゴデータ周りが原因かと思ったのですが関係なく、どこでsvgファイルを使っているのかと思ったら、UIライブラリーからコピペした箇所に記述が埋まっていて気づくのが遅れました。

解消法

簡単な方法としては、SVGデータをインポートする際にImageコンポーネントを使えばOKだと思います。SVGRやbabelのプラグインを扱う方法もあります。

OKコード例①

import Image from "next/image";
import logo from "../../public/logo.svg";
...
<Image src={logo} width={100} height={30} />

OKコード例②

import Image from "next/image";
...
<Image src="/logo.svg" width={100} height={30} />

パスをインポートする際は、現在のファイルからの相対パス。Imageコンポーネントで直接パスを記述する際は、publicフォルダ内のパスを記述することになります。

まとめ

UIライブラリーは便利であるものの、多少編集が必要だったりとエラーの温床になりがちなのと、コピペの際はきちんとエラーを解消してから次の作業に進む必要があると思いました。

参考：Importing SVGs to Next.js

ー　この記事をシェアする？　ー

  • 【エラー】Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`? の原因と解消法

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事