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

Parameterized Azure Cosmos DB Stored Procedure

encountering a glitch during the electron.js build process with nextjs

Displaying the information fetched using axios on the screen using node.js

Obtain the key's name from the select query

The error message "Unable to find 'encoding'" in NextJS is triggered by the use of try/require in the node_modules folder

The Next.js developer encounters an issue where the build fails due to a ReferenceError on a client component, stating that "window

What could be causing the span class data to not be retrieved by the getText method

What is the best way to set up jest to generate coverage reports for Selenium tests?

Learn the steps to dynamically show a navbar component upon logging in without the need to refresh the page using Angular 12

Tips for implementing multi-language URL routing in a Node.js application

Vue's keydown event will only fire when elements are in an active state

Ways to eliminate excess space in a string using Robot Framework

Tips on preventing the opening of a new browser tab by using Ctrl + click

Issues arise when attempting to determine the accurate dimensions of a canvas

Issues with triggering the success block in AngularJS and Node.js Express when using $http.get

Transform Objects Array from AJAX Response into a Distinct JSON Entity

What's the reason for not being able to customize classes for a disabled element in Material-UI?

deleting the current product information during an ajax request

Why does it seem like only one div is being added?

Using Angular to retrieve JSON data from a static file