1

I am woking on a Next.js Project and in there I need to read data using an api and for that I have created 1 api route in /pages/api directory and that Api is using a function from `/store/manipulate.js' and I have imported that particular function in my api Route file but when I request on that api route it is giving me an error.

So, the component below is requesting for data on that api route.

Homepage.jsx

import axios from 'axios'
import { useEffect, useState } from 'react'
import EventList from '../components/events/EventList'

const HomePage = () => {

  const [featuredEvents, setFeaturedEvents] = useState([])

  useEffect(() => {
    (async () => {
      const res = await axios.get('/api/getfeaturedevents')

      if (res.status(200)) {
        console.log(res.data)
        setFeaturedEvents(res.data)
        return
      }

      console.log(res.status)
    })()
  }, [])

  return (
    <div>
      <h1>
        The Home Page.
      </h1>
      <EventList items={featuredEvents} />
    </div>
  )
}

export default HomePage

Now, the code shown below is the code of api route file

getFeaturedEvents.js

import { fetchFeaturedEvents } from '../../store/manipulate'

const getFeaturedEvents = (req, res) => {
    if (req.method === 'GET') {
        try {
            const data = fetchFeaturedEvents()

            res.send(data)
        } catch (error) {
            console.log(error)
            res.status(500).send()
        }
    }
}

export default getFeaturedEvents

Now, let's take a look at manipulate.js which will just update store.json present in same folder.

manipulate.js

const path = require('path')
const fs = require('fs')

const readData = () => {
    const data = JSON.parse(fs.readFileSync(path.join(__dirname, 'store.json')))
    return data
}

export const fetchFeaturedEvents = () => {
    let data = readData()
    const result = data.filter(event => event.isFeatured)

    return result
}

Now, the Error I am getting is...

Error Image

D_Gamer
  • 168
  • 12
  • Does this answer your question? [How to capture no file for fs.readFileSync()?](https://stackoverflow.com/questions/14391690/how-to-capture-no-file-for-fs-readfilesync) – Arvind Oct 10 '21 at 04:35
  • It is saying that How I can catch the error but in my case I know that I am unable to find the `store.js` file but why? that is my question. – D_Gamer Oct 10 '21 at 06:40
  • Please check whether your file exists in the given path. If it exists it will find otherwise not. – Arvind Oct 10 '21 at 06:50
  • Yeah ! my file does exist in `/store` directory as `store.json` but the path that you see to read that file has been given in `manipulate.js` and I imported that `manipulate.js` file in api route file ; so as I understand the importing thing in JS if I have imported `manipulate.js` in my api route file and `manipulate.js` reads `store.json` file then I think when I request that api it should find that file in `/store/` directory instead `/pages/api/store.json` as the last line in Error Photo suggests ! So all I want to know is why this is happening? – D_Gamer Oct 10 '21 at 09:46
  • 1
    @D_Gamer Try using `process.cwd()` instead of `__dirname` (see [Next.js: How to get static assets from within getStaticProps](https://stackoverflow.com/a/65861629/1870780)). – juliomalves Oct 10 '21 at 11:58

2 Answers2

1

Like you said @juliomalves I just changed my __dirname to process.cwd() in manipulate.js file in readData() method.

Something like this

const readData = () => {
    const data = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'store', 'store.json')))
    return data
}
D_Gamer
  • 168
  • 12
0

In my case, I removed the default API folder in pages

Gian Marco Del Freo
  • 61
  • 1
  • 4