GatsbyJS製サイトでビルドエラー "The page component must export a React component for it to be valid" を解決した

September 26, 2019

Gatsby製のサイトで下記のビルドエラーが出たので解消した作業ログ。ローカルではエラーは出ないのですが、Netlifyに上げたときのビルドだけで出たのでちょっと焦りました。

error [/opt/build/repo/node_modules/gatsby-plugin-offline/app-shell.js] The page component must export a React component for it to be valid

こちらのissueに解決方法が書いてありました。

gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js · Issue #17059 · gatsbyjs/gatsby · GitHub

In package.json, change the line "gatsby-plugin-offline": "^2.2.10" to "gatsby-plugin-offline": "2.2.9"

gatsby-plugin-offlineのプラグインのバージョン2.2.10の問題でした。

"gatsby-plugin-offline": "^2.2.9"

と指定していたので2.2.10がインストールされていました。2.2.9を直接指定することで解消されました。

"gatsby-plugin-offline": "2.2.9"