Next.JS use fs module in a component that is not directly rendered

Question

My goal is to display code beautifully using prismjs on a next.js application. My code is stored in a data folder locally. I use react-syntax-highlighter and fs-extra npm packages. fs cannot be used directly because it doesn't work in the browser but the fs-extra npm package allows us to use it as a promise.

The following code works:

import { promises as fs } from "fs-extra";

export async function getStaticProps() {
  const code1 = await fs.readFile("./data/code1.js", "utf8");

  return {
    props: {
      code1,
    },
  };
}

and then i use code 1 and can display it as wished.

HOWEVER, I currently want to fetch the data of a dynamic route and thus my component does not render directly and i have the following error "Error: Module not found: Can't resolve 'fs'"

I changed my next config and added the following:

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

After it, the error changed to : TypeError: fs.realpath is undefined

What can I do?

PS: It's my first post, I hope it is not messed up

Next.JS use fs module in a component that is not directly rendered

0 Answers0