"Cannot resolve module 'fs'" inside static component methods

[CarsonMcKinstry]

Bug report

Describe the bug

When attempting to import fs inside a static method on a component, we are met with the message Cannot resolve module 'fs' in ....

To Reproduce

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

1. git clone https://github.com/CarsonMcKinstry/next-fs-bug
2. cd next-fs-bug
3. yarn build

Expected behavior

The fs module to be available.

System information

• OS: macOS 10.15.5
• Browser (if applies): N/A
• Version of Next.js: 9.4.4
• Version of Node.js: v12.6.1

Additional context

We are using some custom prop initializers in pages in order to handle pulling in translation data from the file system. This is handled as a static method on a provider component, which imports the fs module and gets the translation data from the file system. The example I've provided simply attempts to read from the current directory, but is essentially what we are doing in our app.

[IamLizu]

fs can be only be used in server side and must be excluded from the browser bundle. Please use whatever you are doing this fs inside getStaticProps. Also, make sure to call getStaticProps from the components/files from the pages dir only.

[CarsonMcKinstry]

This is exactly what we are doing though. The function that is called inside getStaticProps is responsible for importing fs and using it.

From my code: [dynamic].js imports component.js and uses Component.getInitializerProps inside of getStaticProps which is a function which dynamically imports foo/index.js which contains an re-export of foo/bar.js, which finally imports fs. So in all reality, fs is ONLY being imported inside of getStaticProps.