Changing gatsby-config to export a function breaks filesystem

[karatechops]

Description

When changing my gatsby-config.js to export a function rather than an object my data disappears from graphql queries.

Steps to reproduce

I am running the Node v10.16.0 on with the following project dependencies:

"gatsby": "^2.13.33",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"gatsby-source-filesystem": "^2.1.6",
"gatsby-transformer-yaml": "^2.2.3"

Here is what the working config looks like -

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: "data"
      }
    },
    {
      resolve: "gatsby-transformer-yaml",
      options: {
        typeName: "Event"
      }
    }
  ]
};

With the above config my data populates correctly in graphql. When this config file is adjusted to the following my graphql queries are empty.

module.exports = ({ contentPath = "data" }) => ({
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: contentPath
      }
    },
    {
      resolve: "gatsby-transformer-yaml",
      options: {
        typeName: "Event"
      }
    }
  ]
});

Expected result

Exporting an object or a function returning an object should behave the same.

Actual result

My data breaks when exporting a function implicitly returning an object.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.0/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 65.0.1
    Safari: 12.1.1

[DSchau]

Hi Alex!

Exporting a function from gatsby-config.js is reserved for themes. Are you trying to create a theme?

If so -- you'll want to check out some of the theme documentation, which will give a bit more detail.

In general -- an app/site uses a theme (which can export a function) as a plugin.

Hope this helps -- let us know if we can provide more detail!

[karatechops]

Thanks for the prompt response! Yes, this is a theme built using @jlengstorf's course. What I'm gathering is once my theme is exporting its config as a function I can no longer test data locally within the theme folder - at that point I must use a secondary workspace to develop, correct?

[andihaki]

same issue here, on Mac or Windows either. @DSchau here the link for tutorial : egghead.

there's missing step, after change gatsby-config.js from object to function?

[LekoArts]

Once your theme uses gatsby-config as a function you have to use an example site (the other gatsby site in your yarn workspace) to run gatsby develop. The theme itself can't be run standalone after that.

[karatechops]

Sounds like this is intended functionality. If that is the case feel free to close the issue. I will say, it's not a very intuitive developer experience. Couldn't the theme accept the original data source and allow the theme consumer to override the data directory? What if I want to pre-populate my theme with data?

[bluehat974]

If you really want to launch the theme in a standalone mode, you can imagine something like this:

// theme gatsby-config.js
const config = (options = {...}) => ({
  siteMetadata: {...}, 
  plugins: [...]
})

module.exports = process.env.THEME_STANDALONE ? config() : config

// package.json
"scripts": {
    "build": "THEME_STANDALONE=true gatsby build",
    "develop": "THEME_STANDALONE=true gatsby develop"
  },

[jlengstorf]

@karatechops @andihaki this is the expected behavior, yes. I don't call it out strongly enough in the egghead course, but the command switches to yarn workspace site develop after we convert the theme to export a config function.

I'm going to close this because this is expected behavior, but please feel free to follow up with questions!