Gatsby v2でwrapPageElementを使う

2020-06-23GatsbyJavaScript


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今の所やりやすい