CODEWITHSUNDEEP
reactjsdrupalgraphqlgatsby
Omkar Dhumal
Omkar Dhumal

Reputation: 101

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

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

  1. 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,
      }
    })
  });
}
  1. 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. enter image description here

Upvotes: 0

Views: 1179

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29320

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.

Upvotes: 0

Himanshu Rathore
Himanshu Rathore

Reputation: 19

const path = require('path')

import the path module , it will work

Upvotes: 1

Related Questions