Skip to content

gatsby-source-filesystem not sourcing files from site directory when used in a theme

Alexander Hörl

I’m trying to build a gatsby theme that uses gatsby-source-filesystem to source images.

I have set up a yarn workspace for development, my folder structure looks like this.

workspace/
├─ example.com/
│  ├─ src/
│  │  ├─ pages/
│  │  │  ├─ test.js
│  ├─ gatsby-config.js
│  ├─ package.json
├─ gatsby-theme-example/
│  ├─ src/
│  ├─ images/
│  ├─ gatsby-config.js
│  ├─ gatsby-node.js
│  ├─ package.json

The yarn workspace is also set up correctly and the gatsby-theme-example is a dependency of it. yarn workspaces info correctly shows it in workspaceDependencies.

Both workspaces have a gatsby-config.js file, the gatsby-theme-example has the gatsby-source-filesystem in it.

{
   resolve: `gatsby-source-filesystem`,
   options: {
      name: `images`,
      path: path.join(__dirname, "images"),
   },
},

The problem I’m facing is that I have to put the images inside the theme directories image folder, otherwise they are not found by gatsby-source-filesystem. From following this video and reading the tutorial, using path.join and the __dirname variable should point to the package that has the theme installed as a dependency, in my case example.com

Strangely, the gatsby-plugin-page-creator plugin in gatsby-theme-example/gatsby-config.js creates the pages defined in example.com/src/pages (the site directory) perfectly.

{
   resolve: "gatsby-plugin-page-creator",
   options: {
      path: path.join(__dirname, "src/pages"),
   },
},

I also have onPreBootstrap defined in gatsby-theme-example/gatsby-node.js like this

exports.onPreBootstrap = ({ reporter }) => {
  const contentPath = `${__dirname}/images/`
  if (!fs.existsSync(contentPath)) {
    reporter.info(`creating the ${contentPath} directory`)
    fs.mkdirSync(contentPath)
  }
}

and it creates the images directory in gatsby-theme-example not example.com

I’m using gatsby@4.18.0 and gatsby-source-filesystem@4.18.0 and start the project using this command: yarn workspace example.com start

I’ve set up a repo, which you can use to reproduce the issue like this:

  1. git clone https://github.com/AlexanderProd/gatsby-source-filesystem-theme-bug
  2. yarn workspace example.com install
  3. yarn workspace example.com start
  4. go to http://localhost:8000/___graphql
  5. run the following query
query MyQuery {
  allFile {
    edges {
      node {
        id
        name
      }
    }
  }
}

Advertisement

Answer

Another solution and in this case the optimal one is to just use images as a path.

{
   resolve: `gatsby-source-filesystem`,
   options: {
      name: `images`,
      path: `images`,
   },
},

Based on this answer.