Gatsby Config Plugin Syntax

I often struggle with the syntax of config files. What are resolvers? How do options work? etc.

As a result, while making my way through Jason Lengstorf’s Introduction to Gatsby on Frontend Masters, I found the following interesting¹:

Within my gatsby-config.js file in the root of a Gatsby project, I have two plugins:

module.exports = {
    ...
  plugins: ['gatsby-plugin-emotion', 'gatsby-plugin-react-helmet']
  ...
}

That, however, is functionally equivalent to:

module.exports = {
    ...
  plugins: [{resolve: 'gatsby-plugin-emotion' }, {resolve: 'gatsby-plugin-react-helmet'}]
  ...
}

The former is just shorthand because for those, I didn’t need to add any configuration. What happens if I install a plugin that does require more detail about how it will be used? That’s where the fact that writing just gatsby-plugin-emotion is shorthand for an object starts to matter.

Using the gatsby-mdx as an example, we can see this in practice:

module.exports = {
  ...
  plugins: [
    {
      resolve: 'gatsby-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve('./src/components/layout.js'),
        },
      },
    },
  ],
  ...
};

What this is saying is that for any mdx files that I load, the files will be loaded into the layout template I defined in our src/components/layout.js.

There’s still the question of what options the gatsby-mdx will accept. For that, the docs are quite helpful in specifying the configuration options.²

Resources:

• ¹ Learn Gatsby with Jason Lengstorf | Frontend Masters
• ² gatsby-plugin-mdx#configuration | Github