"ReferenceError: path is not defined" in my Gatsby project - reactjs

Question

Background
I am trying to install gatsby-plugin-categories following the instructions at https://www.gatsbyjs.org/packages/gatsby-plugin-categories/ but they are either missing steps or I have something conflicting or missing in my code.
gatsby-config-js
module.exports = {
siteMetadata: {
title: `VLLG`,
description: `Village | California Campsites.`,
author: `Juan Gallardo`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
{
resolve: "gatsby-plugin-categories",
options: {
templatePath: path.join(__dirname, "/src/templates/category.js")
}
},
{
resolve: `gatsby-transformer-remark`,
options: {
// CommonMark mode (default: true)
commonmark: true,
// Footnotes mode (default: true)
footnotes: true,
// Pedantic mode (default: true)
pedantic: true,
// GitHub Flavored Markdown mode (default: true)
gfm: true,
// Plugins configs
plugins: [],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `VLLG`,
short_name: `vllg`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}
src/templates/category.js
import React from "react";
import Helmet from "react-helmet";
import { graphql } from "gatsby";
import Layout from "../layout";
import PostListing from "../components/PostListing";
export default class CategoryTemplate extends React.Component {
render() {
const { pageContext, data } = this.props;
const { category } = pageContext;
return (
<Layout>
<div className="category-container">
<Helmet title={`Posts in category "${category}"`} />
<PostListing postEdges={data.allMarkdownRemark.edges} />
</div>
</Layout>
);
}
}
export const pageQuery = graphql`
query CategoryPage($category: String) {
allMarkdownRemark(
limit: 1000
filter: { fields: { category: { eq: $category } } }
) {
totalCount
edges {
node {
fields {
slug
category
}
excerpt
timeToRead
frontmatter {
title
tags
date
}
}
}
}
}
`;
they have one line that i find confusing, import PostListing from "../components/PostListing"; they never gave the sample code for that. And there is no starter that has what is in there
not sure if the solution would be there in that file or if i need to tweak something in my config.

Answer 1

can you try like your other paths
{
resolve: "gatsby-plugin-categories",
options: {
templatePath: `${__dirname}/src/templates/category.js`
}
}