ERROR path is not defined ReferenceError: path is not defined gatsby-node.js

Question

I am looking to fetch data from Drupal site to Gatsby via JsonApi.
I want render particular content type with all the details and info.
I am able fetch article title from drupal site with JsonApi but now I want render image and info of that article(content type) on the another page. So i used createPage method from gatsby but i am getting the following error :

**ERROR path is not defined ReferenceError: path is not defined - gatsby-node.js:28**

Reference Link here:

My file structure

gatsby-node.js

exports.createPages = async ({ graphql, actions, getNodesByType }) => {
  const { createPage } = actions;

  const allArticles = await graphql(`
  {
    allNodeArticle {
      nodes {
        title
        drupal_internal__nid
        path {
          alias
        }
        relationships {
          field_image {
            uri {
              url
            }
          }
        }
      }
    }
  }
  `);

  allArticles.data.allNodeArticle.nodes.map(async (node) => {
    createPage({
      path: node.path.alias,
      component: path.join(__dirname, '/src/Components/Articledetails.js'),
      context: {
        id: node.drupal_internal__nid,
      }
    })
  });
}

listing.js file

import React from "react";
import { graphql, Link  } from "gatsby"

const listing = ({data}) => {
  return (
          data.allNodeArticle.nodes.map((info) =>
          <div>
              <div>
                  <h2><Link to={"/node/" + info.drupal_internal__nid}>{info.title}</Link></h2>
              </div>
          </div>
          )
  )
}
export const query = graphql`
{
  allNodeArticle {
    nodes {
      title
      drupal_internal__nid
      path {
        alias
      }
      relationships {
        field_image {
          uri {
            url
          }
        }
      }
    }
  }
}
`
export default listing

Folder/Directory Structure is as seen in the screenshot.

Can you check this github.com/gatsbyjs/gatsby/issues/19727#issuecomment-557756721 ? — harshal
– harshal, Commented Apr 5, 2022 at 10:39

Himanshu Rathore · Accepted Answer · 2022-04-05 10:57:01Z

1

const path = require('path')

import the path module , it will work

answered Apr 5, 2022 at 10:57

Himanshu Rathore

191 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Ferran Buireu · Accepted Answer · 2022-04-05 17:28:31Z

0

Outside the scope of the question, you should replace your map loop for a forEach loop:

  allArticles.data.allNodeArticle.nodes.forEach((node) => {
    createPage({
      path: node?.path?.alias,
      component: path.join(__dirname, '/src/Components/Articledetails.js'),
      context: {
        id: node.drupal_internal__nid,
      }
    })
  });

Double-check that path and alias are fulfilled in all article references.

Regarding your main issue (ERROR path is not defined ReferenceError: path is not defined - gatsby-node.js:28), is because, to use path, you need first to import it as a module:

const path = require(`path`);

This will allow you to do path.join.

edited Apr 5, 2022 at 17:28

answered Apr 5, 2022 at 10:50

Ferran Buireu

29.4k7 gold badges48 silver badges73 bronze badges

Collectives™ on Stack Overflow

ERROR path is not defined ReferenceError: path is not defined gatsby-node.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related