Gatsby + TypeScriptでgatsby-source-filesystemを使う場合の注意点

Posted: March 26, 2022

問題

Gatsbyの gatsby-source-filesystem プラグインを利用する際に、公式の使い方ではJavascriptを想定しているため、Typescript環境だとその通りに設定してもエラーが出てしまう。エラー発生時の設定は以下の通り。

gatsby-config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import type { GatsbyConfig } from "gatsby"

const config: GatsbyConfig = {
  siteMetadata: {
    title: `site title`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `some-name`,
        path: `${__dirname}/some/path`,
      }
    },
  ],
}

export default config

この設定では以下のようなエラーが出る。

1
2
3
4
The path passed to gatsby-source-filesystem does not exist on your file system:
${project root dir}/.cache/compiled/some/path
Please pick a path to an existing directory.
See docs here - https://www.gatsbyjs.org/packages/gatsby-source-filesystem/

利用している環境は以下の通り。

1
2
3
4
5
6
7
8
System:
  OS: WSL2 ubuntu 20.04.4 LTS (on windows)
  Shell: zsh 5.8
Softwares:
  node: 17.8.0
  npm: 8.5.5
  gatsby: 4.10.2
  gatsby-source-filesystem: 4.10.1

原因

${__dirname} で、本来は ${project root dir} を参照したいが、おそらくコンパイル時の作業ディレクトリであろう ${project root dir}/.cache/compiled/ が参照されてしまっている。

対策

以下のように ${__dirname}/some/path → path.resolve('some/path') とすれば解決する。

gatsby-config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import type { GatsbyConfig } from "gatsby"
import path from "path"

const config: GatsbyConfig = {
  siteMetadata: {
    title: `site title`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `some-name`,
        path: path.resolve(`some/path`),
      }
    },
  ],
}

export default config

Gatsby + TypeScriptでgatsby-source-filesystemを使う場合の注意点

問題

原因

対策

参考文献