CODEWITHSUNDEEP
javascriptnext.jsfsreadfile
Gutelaunetyp
Gutelaunetyp

Reputation: 1882

NextJS - Read local files (readdir, readFile) - Module not found: Can't resolve 'fs'

I am using NextJS and would like to populate some data by using the getStaticProps functionality. I have used this for a couple of projects in the past and it worked perfectly.

Now I have set up a new NextJS project and it seems that it does not work anymore.

I use next -p 3005 to start the local dev server. This has worked in former projects.

Here is my function to read in local .json files:

import {
  promises as fs
} from "fs";
import path from "path";

const readData = async(dir: string) => {
  const dataDirectory = path.join(process.cwd(), dir);
  const filenames = await fs.readdir(dataDirectory);

  const dataItems = filenames.map(async(filename) => {
    const filePath = path.join(dataDirectory, filename);
    const fileContents = await fs.readFile(filePath, "utf8");
    const parsedItem = JSON.parse(fileContents);
    return parsedItem;
  });
  return {
    data: await Promise.all(dataItems),
  };
};

export default readData;

And this is my component:

import { FC } from "react";
import { Props } from "./types";
import readData from "../../../lib/api/readData";

const notebookPath = "notebooks";
export async function getStaticProps(context) {
  const notebookData = await readData(`/data/${notebookPath}`);
  const notebook = notebookData?.data;
  return {
    props: {
      notebook,
      hallo: ["nice"],
    },
  };
}

const Home: FC<Props> = (props) => {
  console.log("Home props", props);
  return <h1>This is the rendering</h1>;
};

export default Home;

The error:

error - ./lib/api/readData.ts:1:0 Module not found: Can't resolve 'fs'

My tries / approaches to fix the issue:

// Approach 1: next.config.js - with Webpack 5


module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
}

// Approach 2: next.config.js - with Webpack 5

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }
    return config
  }
}

// Approach 3: next.config.js - with Webpack 5

module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };
    return config;
  },
};

// Approach 4: next.config.js - with Webpack 4

module.exports = {
  webpack5: false,
}

// Approach 5: next.config.js - with Webpack 5

module.exports = {
  webpack5: false,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

// Approach 6: Removing package-lock.json & node_modules. After that reinstalled the node_modules.

Always this errorn is shown:

error - ./lib/api/readData.ts:1:0 Module not found: Can't resolve 'fs'

Is there really no way to read in local .json files and use them for getStaticProps any more in NextJS ?

Upvotes: 1

Views: 6752

Answers (1)

Trong
Trong

Reputation: 161

I use version 11.0.0, 'fs' works fine without any webpack configuration.

Sorry, which next.js version that you use?

Could you please, try to log in HomePage to check like this? Is there any problem?

import { FC } from "react";
import { Props } from "./types";
import fs from 'fs'; // <--- try to 


const notebookPath = "notebooks";
export async function getStaticProps(context) {
  // const notebookData = await readData(`/data/${notebookPath}`);
  //  const notebook = notebookData?.data;
  console.log(fs); // <--- try to log here
  return {
    props: {
      // notebook,
      hallo: ["nice"],
    },
  };
}

const Home: FC<Props> = (props) => {
  console.log("Home props", props);
  return <h1>This is the rendering</h1>;
};

export default Home;

Upvotes: 1

Related Questions