CODEWITHSUNDEEP
javascriptgatsby
Joshua Appleman
Joshua Appleman

Reputation: 11

How do I add more than one Gatsby Plug-in using the gatsby-config.js file?

I am trying to add additional Gatsby Plug-ins to a Gatsby Project. I want to add 'gatsby-plugin-styled-components' to the gatsby-config.js file. Any help would be appreciated. Newbie to React and learning a lot fast.

added already and threw errors all over the place after running npm run build

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

 module.exports = {
   plugins: [`gatsby-plugin-emotion`],
 }

[email protected] build /Users/jappleman/code/hello-world/tutorial-part-two

gatsby build

  error We encountered an error while trying to load your site's gatsby-config. 
  Please fix the error and try again.


  Error: /Users/jappleman/code/hello-world/tutorial-part-two/gatsby-config.js:8
     plugins: ['`gatsby-plugin-emotion`],['`gatsby-plugin-styled-components'],
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  SyntaxError: Unterminated template literal

  - v8-compile-cache.js:226 NativeCompileCache._moduleCompile
    [tutorial-part-two]/[v8-compile-cache]/v8-compile-cache.js:226:18

  - v8-compile-cache.js:172 Module._compile
    [tutorial-part-two]/[v8-compile-cache]/v8-compile-cache.js:172:36

  - loader.js:712 Object.Module._extensions..js
    internal/modules/cjs/loader.js:712:10

  - loader.js:600 Module.load
    internal/modules/cjs/loader.js:600:32

  - loader.js:539 tryModuleLoad
    internal/modules/cjs/loader.js:539:12

  - loader.js:531 Function.Module._load
    internal/modules/cjs/loader.js:531:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [tutorial-part-two]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - get-config-file.js:33
    [tutorial-part-two]/[gatsby]/dist/bootstrap/get-config-file.js:33:22

  - Generator.next

  - new Promise

Upvotes: 0

Views: 1273

Answers (1)

ksav
ksav

Reputation: 20830

gatsby-config.js exports an object

module.exports = {}

and within that object, the plugins you want to use on your project are specified as an array of plugin names (strings) that you have already installed as dependencies to your project (for example by typing npm install gatsby-plugin-react-helmet or yarn add gatsby-plugin-react-helmet into your terminal).

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`
  ]
}

However, some of the plugins you will install might need some options to be set in order to work correctly. So these plugins should each be specified as an object within the same plugins array. And in this case, the value of each object's resolve property is the name of the plugin, usually followed by an object for their own options. 

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/data/`
      }
    }
  ]
}

For more information see Using a Plugin in Your Site

Also, given that your error is caused by a SyntaxError, please see MDN - Template_literals for information on backticks vs regular quotes, the differences between:

`gatsby-plugin-styled-components` & 'gatsby-plugin-styled-components'

& why the following line might be causing the Unterminated string literal SyntaxError:

plugins: ['`gatsby-plugin-emotion`],['`gatsby-plugin-styled-components']

After that, if the solution is not obvious, try changing your plugins to either of the following:

plugins: [`gatsby-plugin-emotion`],[`gatsby-plugin-styled-components`]

or

plugins: ['gatsby-plugin-emotion'],['gatsby-plugin-styled-components']

Upvotes: 4

Related Questions