Layout的なコンポーネントを一ヵ所で設定したくて調べてみると
Gatsby Browser APIs | GatsbyJS
ここでwrapPageElementを定義すればよしなにやってくれるようなのでそれっとコピって実行したらエラーが出た
success open and validate gatsby-configs - 0.196s
ERROR
This plugin file is using both CommonJS and ES6 module systems together which we don't support.
You'll need to edit the file to use just one or the other.
plugin: /mnt/c/Users/hoge/from-wsl/til/gatsby-browser.js
This didn't cause a problem in Gatsby v1 so you might want to review the migration doc for this:
https://gatsby.dev/no-mixed-modules書いてあるとおりrequire使う場合はmodule.exports
import使う場合はexport defaultを使えということらしい
Migrating from v1 to v2 | GatsbyJS
ということで次のように変えてエラー回避した
- gatsby-browser.js
import React from "react"
import Layout from "./src/components/layout"
const wrapElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
export { wrapElement as wrapPageElement }対応ページそのままexport defaultでexportしてしまうと呼び出し側でwrapPageElementを区別できないので読み込まれない
named exportでwrapPageElementと名前を付けてexportしてあげる
エラーでも公式へのリンクで対応方法が示されていることが多く進めやすい
Gatsby今の所やりやすい


