Next.js: Module not found: Can't resolve 'fs' used on API endpoint

[joepagan]

Bug report

Describe the bug

I want to use fs on an API endpoint.
On the nextjs docs, it suggests that anything used under api/* is backend so anything node-based here should be fine?

will be treated as an API endpoint instead of a page. They are server-side only

When I import fs in an API endpoint, it builds ok initally, but, when I try view localhost:3000 I get the following in the server console:

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
error - ./pages/api/hello.js:2:0
Module not found: Can't resolve 'fs'
  1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
> 2 | import fs from 'fs';
  3 | 
  4 | export default (req, res) => {
  5 |   const readme = fs.readFileSync("package.json", "utf8");
{
  name: 'create-next-app-fs',
  version: '0.1.0',
  private: true,
  scripts: { dev: 'next dev', build: 'next build', start: 'next start' },
  dependencies: { next: '10.0.1', react: '17.0.1', 'react-dom': '17.0.1' }
}
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json

As you can see, it does genuinelly get the package.json file data... but fails?

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://github.com/joepagan/create-next-app-fs
2. npm run dev
3. view http://localhost:3000
4. See error in console

Expected behavior

Get data & no error

System information

• OS: macOS
• Version of Next.js: 10.0.1
• Version of Node.js: 12.18.3

[awareness481]

This isn't a bug. Basically what happens is that you're importing a function which uses the fs node module but you're executing it client-side.

You should either call the function on getStaticProps like this

export async function getStaticProps() {
  const request = await hello();

  return {
    props: {
      hello: request
    }
  }
}

or modify your function so that you can fetch() it as you would normally on an api route.

I setup a repo here which uses getStaticProps to call the api fn

[joepagan]

Ok thanks for getting back and the explanation, I thought it wasn't necessary when importing like I was, will set it up like that instead.

[TommySorensen]

@awareness481 This seems like a bug since the documentation here https://nextjs.org/docs/basic-features/data-fetching#reading-files-use-processcwd use the fs and path node package in the example.

[awareness481]

@TommySorensen It's not a bug.

In the repo provided in the issue, the user was calling the api function inside the React component. That's different than using it inside getStaticProps/getStaticPaths/getServerSideProps where it is allowed to do so, as seen in the docs link you provided.

[TommySorensen]

@awareness481 You are right. I think i didn't read all the text in this question :)