0
Gatsby v2でwrapPageElementを使う
2020-06-23

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

0

Profile

swfz
swfz
日々学んだことを残していく
Today I Learned
コード片置き場

Account

RSS

Powered by Pixela
© 2024. swfz