GatsbyにMuiテーマプラグインをいれたらビルドが通らなくなった

2021/02/10

発生しているエラー

Error: You can only have a single instance of gatsby-plugin-material-ui in your gatsby-config.js

「gatsby-config.jsにはgatsby-plugin-material-uiのインスタンスを1つだけ含めることができます」とのこと。

解決方法

gatsby-config.jsのpluginsの項目に,
gatsby-plugin-material-uigatsby-theme-material-uiの2つが記述されていないか確認する。
2つ記述されている場合はgatsby-plugin-material-uiを削除する。

// gatsby-config.js
module.exports = {
  // ~ (略) ~
  plugins: [
    // ~ (略) ~
    `gatsby-plugin-material-ui`, // ← この行を削除
    `gatsby-theme-material-ui`,
    // ~ (略) ~
  ],
}

これでビルドエラーが解消します。

原因

エラーメッセージのまんま,gatsby-plugin-material-uiインスタンスが複数含まれているのが原因として考えられます。
プラグインのドキュメントTheme vs. Pluginの項目を読むと,

gatsby-theme-material-ui uses the plugin under the hood,

と書かれており,どうやらgatsby-theme-material-uiは内部でプラグイン(gatsby-plugin-material-ui)を使用しているようです。
そのため,gatsby-plugin-material-uigatsby-theme-material-uiの両方をgatsby-config.jsに記述してしまうと冒頭のエラーが発生してしまうみたいです。

ひとこと

gatsby developコマンドでローカル環境で見てたときは開発サーバー立ち上がっていたので気づきませんでしたが,Netlifyにデプロイしたのに全然反映されないなと思っていたらビルドエラーでデプロイで来ていませんでした。。。 プラグイン入れるのはどっちかだけ(テーマのほう使う場合はプラグインの方いらない?)でよかったみたいですね。
VSって翌々考えたらそういうことなんだろうか。。。?

ひとまず,解消してブログ更新できてよかったです。

それではまた明日。


書いた人: こへ
音楽と漫画と読書とアニメとスノボが好き。多趣味でいろんなことに興味有ります。 誰しもが一度は使った事があるもののIoT開発をしてます。
Twitterフォローお願いします。