久しぶりに更新しようと思ったら gatsby が動かなくて他の ssg を物色していたのだけど、最近手に入れた quest3 で遊ぶべく A-Frame を初めており javascript が活性化されたので、やはり gatsby を続けることにした。以下、修復メモ。

CommonJS Error

$ gatsby develop

すると何かエラーになる。

 ERROR #10123  API.CONFIG.LOADING

We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.

  Error: [ERR_REQUIRE_ESM]: require() of ES Module node_modules/remark-gfm/index.js from gatsby-config.js not supported.
  Instead change the require of index.js in gatsby-config.js to a dynamic import() which is available in all CommonJS modules.

CommonJSとES Modulesについてまとめる

https://zenn.dev/yodaka/articles/596f441acf1cf3#commonjsのモジュールからesmを呼ぶ

CommonJSのモジュールからESMを呼ぶ

があかんらしい。

gatsby-config.js が以下のようになっていて CommonJs なのがよくないらしい。

module.exports = {
  siteMetadata: {
  },
}

この辺 A-Frame やりながら通ったのでだいたいわかる。

ESModule に書き換え。

ES Modules (ESM) and Gatsby | Gatsby

Introduction The ECMAScript module (ESM) format is the official TC39 standard for packaging JavaScript. For many years, CommonJS (CJS…

https://www.gatsbyjs.com/docs/how-to/custom-configuration/es-modules/

const config = {
  siteMetadata: {
  },
}

export default config

(node:16343) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)


 ERROR #10123  API.CONFIG.LOADING

conifg-gatsby.js => conifg-gatsby.mjs

なおった。

👈新