🌟
プラグインを使わずにGatsbyでpnpmを使う方法
Gatsbyでpnpmを使うと大量のエラーが出る
Gatsby(Gatsby.js/GatsbyJS)ベースのWebサイト開発でパッケージマネージャにpnpmを使うと以下のようなエラーが出てgatsby developやgatsby buildに失敗します。Webpack の依存関係が pnpm に認識されないのが原因のようです。
Module not found: Error: Can't resolve 'prop-types' in '...'
Module not found: Error: Can't resolve 'query-string' in '...'
Module not found: Error: Can't resolve 'lodash/merge' in '...'
Module not found: Error: Can't resolve 'mitt' in '...'
Module not found: Error: Can't resolve '@gatsbyjs/reach-router' in '...'
Module not found: Error: Can't resolve 'gatsby-react-router-scroll' in '...'
Module not found: Error: Can't resolve 'gatsby-link' in '...'
Module not found: Error: Can't resolve 'gatsby-script' in '...'
Module not found: Error: Can't resolve 'gatsby-core-utils/create-content-digest' in '...'
この問題の簡単な解決策をみつけたので紹介します。
解決策
Gatsby では gatsby-node.ts に onCreateWebpackConfig 関数を定義することで Webpack 周りの設定をいろいろ追加することができます。gatsby-node.ts に以下のコードを追加してください。
gatsby-node.ts
import fs from 'fs'
import path from 'path'
import { CreateWebpackConfigArgs } from 'gatsby'
let gatsbyNodeModules = fs.realpathSync('node_modules/gatsby')
gatsbyNodeModules = path.resolve(gatsbyNodeModules, '..')
export const onCreateWebpackConfig = ({ actions }: CreateWebpackConfigArgs) => {
actions.setWebpackConfig({
resolve: {
modules: [gatsbyNodeModules, 'node_modules']
}
})
}
上記コードを追加してからgatsby developやgatsby buildを実行するとエラーは消え普通に実行できるようになります。
JavaScriptの場合
TypeScript使ってないよという方のためにJavaScriptのコードも貼っておきます。
gatsby-node.js
let gatsbyNodeModules = require('fs').realpathSync('node_modules/gatsby')
gatsbyNodeModules = require('path').resolve(gatsbyNodeModules, '..')
exports.onCreateWebpackConfig = ({ stage, actions }) => {
actions.setWebpackConfig({
resolve: {
modules: [gatsbyNodeModules, 'node_modules'],
},
})
}
補足:pnpm対応のプラグインはあるものの更新が止まっています
Gatsby を pnpm に対応させるプラグインがあるものの2年くらい更新が止まっています。Gatsby v5にも未対応です。
Discussion