ちょっとしたエラーです。一応メモとして残しておきます。
エラー内容
エラー自体は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ライブラリーは便利であるものの、多少編集が必要だったりとエラーの温床になりがちなのと、コピペの際はきちんとエラーを解消してから次の作業に進む必要があると思いました。
この記事にコメントする
このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。