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:
git clone https://github.com/AlexanderProd/gatsby-source-filesystem-theme-bug
yarn workspace example.com install
yarn workspace example.com start
- go to http://localhost:8000/___graphql
- 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.