Gatsby: ReferenceError: path is not defined

[rutikwankhade]

Description

I am new to react as well as gatsby. I need help.
I want to install gatsby-remark-vscode pluggin. I installed it from terminal,and copied the required code in gatsby-config.js according to the documentations. but while deploying to netlify,
error comes as follows

ReferenceError: path is not defined

what should I do ?

gatsby-config.js file is as follows

module.exports = {
  siteMetadata: {
    title: `Rutik Wankhade`,
    author: `Rutik Wankhade`,
    description: `An avid learner`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
    social: {
      twitter: `WankhadeRutik`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [

//syntax
{

  resolve: `gatsby-remark-vscode`,
  // All options are optional. Defaults shown here.
  options: {


    colorTheme: 'Dark+ (default dark)', // Read on for list of included themes. Also accepts object and function forms.
    wrapperClassName: '',   // Additional class put on 'pre' tag
    injectStyles: true,     // Injects (minimal) additional CSS for layout and scrolling
    extensions: [],         // Extensions to download from the marketplace to provide more languages and themes
    extensionDataDirectory: // Absolute path to the directory where extensions will be downloaded. Defaults to inside node_modules.
      path.resolve('extensions'),
    languageAliases: {},    // Map of custom/unknown language codes to standard/known language codes
    replaceColor: x => x,   // Function allowing replacement of a theme color with another. Useful for replacing hex colors with CSS variables.
    getLineClassName: ({    // Function allowing dynamic setting of additional class names on individual lines
      content,              //   - the string content of the line
      index,                //   - the zero-based index of the line within the code fence
      language,             //   - the language specified for the code fence
      codeFenceOptions      //   - any options set on the code fence alongside the language (more on this later)
    }) => '',
    logLevel: 'error'       // Set to 'warn' to debug if something looks wrong
  }
},
//



          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/blogfavicon.png`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },

],
}

error while deploying on netlify

Executing user command: gatsby build
10:12:35 PM: error We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.
10:12:35 PM: 
10:12:35 PM:   ReferenceError: path is not defined
10:12:35 PM:   
10:12:35 PM:   - gatsby-config.js:44 Object.<anonymous>
10:12:35 PM:     /opt/build/repo/gatsby-config.js:44:7
10:12:35 PM:   
10:12:35 PM:   - v8-compile-cache.js:178 Module._compile
10:12:35 PM:     [repo]/[v8-compile-cache]/v8-compile-cache.js:178:30
10:12:35 PM:   
10:12:35 PM:   - loader.js:789 Object.Module._extensions..js
10:12:35 PM:     internal/modules/cjs/loader.js:789:10
10:12:35 PM:   
10:12:35 PM:   - loader.js:653 Module.load
10:12:35 PM:     internal/modules/cjs/loader.js:653:32
10:12:35 PM:   
10:12:35 PM:   - loader.js:593 tryModuleLoad
10:12:35 PM:     internal/modules/cjs/loader.js:593:12
10:12:35 PM:   
10:12:35 PM:   - loader.js:585 Function.Module._load
10:12:35 PM:     internal/modules/cjs/loader.js:585:3
10:12:35 PM:   
10:12:35 PM:   - loader.js:692 Module.require
10:12:35 PM:     internal/modules/cjs/loader.js:692:17
10:12:35 PM:   
10:12:35 PM:   - v8-compile-cache.js:159 require
10:12:35 PM:     [repo]/[v8-compile-cache]/v8-compile-cache.js:159:20
10:12:35 PM:   
10:12:35 PM:   - get-config-file.js:25 getConfigFile
10:12:35 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
10:12:35 PM:     [repo]/[gatsby]/dist/bootstrap/get-config-file.js:25:20
10:12:35 PM:   
10:12:35 PM:   - index.js:127 module.exports
10:12:35 PM: Shutting down logging, 41 messages pending

Any help will be appriciated. How can I fix this. Pls suggest.

[anuraghazra]

Hi @rutikwankhade , did you included the path module in gatsby-config.js?

// gatsby-config.js
const path = require('path')

[rutikwankhade]

Hi @rutikwankhade , did you included the path module in gatsby-config.js?

// gatsby-config.js
const path = require('path')

in gatsby-config.js, where should I include this path ?

[anuraghazra]

In the 1st line of gatsby-config.js

const path = require('path')

module.exports = {
  // other stuffs
}

You need path because gatsby-remark-vscode plugin's config have path.resolve.

{
  resolve: `gatsby-remark-vscode`,
  options: {
    colorTheme: 'Dark+ (default dark)', 
    wrapperClassName: '', 
    injectStyles: true, 
    extensions: [],
    extensionDataDirectory: path.resolve('extensions'), // here
    languageAliases: {},  
    replaceColor: x => x,  
    getLineClassName: ({
      content,        
      index,            
      language,          
      codeFenceOptions   
    }) => '',
    logLevel: 'error'
  }
},

// All options are optional.

[rutikwankhade]

In the 1st line of gatsby-config.js

const path = require('path')

module.exports = {
  // other stuffs
}

You need path because gatsby-remark-vscode plugin's config have path.resolve.

{
  resolve: `gatsby-remark-vscode`,
  options: {
    colorTheme: 'Dark+ (default dark)', 
    wrapperClassName: '', 
    injectStyles: true, 
    extensions: [],
    extensionDataDirectory: path.resolve('extensions'), // here
    languageAliases: {},  
    replaceColor: x => x,  
    getLineClassName: ({
      content,        
      index,            
      language,          
      codeFenceOptions   
    }) => '',
    logLevel: 'error'
  }
},

// All options are optional.

Hey @anuraghazra Thanks for your help. It worked.