Next.js is throwing a TypeError because it does not recognize the function fs.readFileSync

Question

Next.js is throwing a TypeError because it does not recognize the function fs.readFileSync

In my JSON data file called total.json, I store information for a chatbot.

{ "guilds": 3, "users": 21 }

Within my index.tsx file, I want to display this data on the webpage, so I attempt the following:

import fs from 'fs';

function displayStats() {
  const botStats = JSON.parse(fs.readFileSync(`../util/total.json`, { encoding: 'utf8' }));
  const usersCount = botStats.users;

  console.log(usersCount);
  return usersCount;
}

Although the function correctly outputs the number (21) in the terminal, an error is encountered when trying to display it on the page:

TypeError: fs__WEBPACK_IMPORTED_MODULE_6___default(...).readFileSync is not a function

javascript next.js

Answer 1

Answer №1

When working in Node.js, you can utilize the fs module but keep in mind it is not compatible with browsers. If you need to access JSON data from a file within Next.js, options include using axios or fetch. Below is an example showcasing the usage of axios:

import axios from 'axios';

  async function stats() {
    var {data} = await axios.get("http://localhost:8888/utils/total.json");//Modify this URL accordingly
    const botcount = JSON.parse(data)
    const userscount = botcount.users;

    console.log(userscount);
    return userscount;
  }

Answer 2

When working in Node.js, you can utilize the fs module but keep in mind it is not compatible with browsers. If you need to access JSON data from a file within Next.js, options include using axios or fetch. Below is an example showcasing the usage of axios:

import axios from 'axios';

  async function stats() {
    var {data} = await axios.get("http://localhost:8888/utils/total.json");//Modify this URL accordingly
    const botcount = JSON.parse(data)
    const userscount = botcount.users;

    console.log(userscount);
    return userscount;
  }

Answer 3

Answer №2

As previously mentioned by @JaivBhup, using fs is not compatible with browsers.

In my opinion, a better approach would be to utilize a backend to fetch data (consider using the axios package for this). If you do not have a backend setup, you can explore using the Next.js api routes.

You can work with it just like you would with Node.js!

Check out the official documentation or refer to this article for further insights.

// File: pages/api/my-json.js

import fs from 'fs'
import path from 'path'

export default (req, res) => {
  // Assuming your json file is located at /public/assets/my-json.json
  const filePath = path.resolve('./public', 'assets', 'my-json.json');
  const json = fs.readFileSync(filePath);

  res.statusCode = 200
  res.json(json);
}

The key part here is path.resolve(...), which tells vercel to include the specified path in the serverless lambda function. This code snippet enables reading images and other files from both local and remote locations on vercel!

I made a slight modification to load the json file instead of file names.

Answer 4

As previously mentioned by @JaivBhup, using fs is not compatible with browsers.

In my opinion, a better approach would be to utilize a backend to fetch data (consider using the axios package for this). If you do not have a backend setup, you can explore using the Next.js api routes.

You can work with it just like you would with Node.js!

Check out the official documentation or refer to this article for further insights.

// File: pages/api/my-json.js

import fs from 'fs'
import path from 'path'

export default (req, res) => {
  // Assuming your json file is located at /public/assets/my-json.json
  const filePath = path.resolve('./public', 'assets', 'my-json.json');
  const json = fs.readFileSync(filePath);

  res.statusCode = 200
  res.json(json);
}

The key part here is path.resolve(...), which tells vercel to include the specified path in the serverless lambda function. This code snippet enables reading images and other files from both local and remote locations on vercel!

I made a slight modification to load the json file instead of file names.

Answer 5

Answer №3

To successfully read a file in Node.js, you can utilize the following code:

import { promises as fs } from "fs";

Additionally, ensure to use the await keyword when reading the JSON content:

const botcount = await fs.readFile(../util/total.json, 'utf8' ));

This method will allow you to read the file content asynchronously.

Answer 6

To successfully read a file in Node.js, you can utilize the following code:

import { promises as fs } from "fs";

Additionally, ensure to use the await keyword when reading the JSON content:

const botcount = await fs.readFile(../util/total.json, 'utf8' ));

This method will allow you to read the file content asynchronously.

Next.js is throwing a TypeError because it does not recognize the function fs.readFileSync

Answer №1

Answer №2

Answer №3

Similar questions

Jest snapshot tests using react-test-renderer encounter null references in refs

Using regex to confirm prices are accurate

Reducing the slide margins in impress.js?

Do JavaScript Promises operate asynchronously?

Utilizing Laravel's URL::asset method in conjunction with a JavaScript variable

Utilize Nuxt.js context within a Vue plugin

What is the process for including an item in an array within Firestore?

Improve code efficiency by streamlining a function and using more effective syntax techniques

Performing CRUD operations with mongoose and express

Display a pop-up window when hovering over a table cell using HTML and JavaScript

Having multiple upload forms on a single page with PHP, AJAX, and jQuery is not functioning as expected

Incorporating traditional Bootstrap styling directly into a React application without relying on the react-bootstrap library

Developing a dynamic slideshow using jQuery

"Steady layout of grid for the navigation bar and

Ways to combine X and Y velocities into a single velocity

Explore the power of Infinity.js for optimizing the rendering of large HTML tables, complete with a detailed example using prototype

Preventing the addition of duplicate items to an array

Is there a way to automatically refresh a page as soon as it is accessed?

Utilizing fluent-ffmpeg in nodejs and express to effortlessly download a video

A guide on transferring a Vue component to a custom local library