is importing getStaticProps in a page component not supported?

[stefanprobst]

when not writing getStaticProps directly in a page component, but importing it from somewhere else, i see a "Module not found: Can't resolve 'fs'" error.

is the following not supported? (or a limitation of the babel plugin)?

// pages/post.js
export { default, getStaticProps } from '../screens/post';

// screens/post.js
import * as fs from 'fs';
import { join } from 'path';

export default function Screen(props) {
  return <h1>{props.title}</h1>;
}

export async function getStaticProps() {
  const { title } = JSON.parse(
    fs.readFileSync(join(process.cwd(), 'metadata.json'))
  );
  return { props: { title } };
}

[stefanprobst]

probably related: #16153

[jamesmosier]

Could you instead create a helper and not export getStaticProps itself?

For example:

import * as fs from 'fs';
import { join } from 'path';

export default function MyGspHelper() {
  const { title } = JSON.parse(
    fs.readFileSync(join(process.cwd(), 'metadata.json'))
  );
  return  { title }
}

import MyGspHelper from '../helpers/MyGspHelper';

export default function Screen(props) {
  return <h1>{props.title}</h1>;
}

export async function getStaticProps() {
  const props = MyGspHelper();
  return { props };
}

You can use this tool to see what gets eliminated: https://next-code-elimination.now.sh/ and in this case it should eliminate the imports from the MyGspHelper;

[stefanprobst]

@jamesmosier thanks for your response! yes, it's not really a blocker, it's just that it's not very clear to me from the docs why the above example is breaking. i guess it has to do with the next-ssg-transform plugin, but i'm not sure.

[deadcoder0904]

@stefanivic it's because fs is a node module that is available only on the server-side & not client-side so if you use fs anywhere other than getStatic* or getServer* (or other server-side places) you will get that error. Read that error carefully once again so you'll understand what it's saying. And use the Next Code Elimination tool linked above to see what parts get stripped out of the client-bundle to find causes of bugs.

[stefanprobst]

i am using fs in getStaticProps only. but there seems different code elimination behavior when getStaticProps is re-exported from a page component, than when it's directly exported as a function from the page.

[deadcoder0904]

oh got it. do you think you are doing something like I did? =► #17138

if not, then I think that you're right. if you use any node modules & you import it inside the client-side somewhere, then it will throw that error.

[MoOx]

See #16153 (comment): in short Node import & code MUST be in pages folder, otherwise not correctly removed for the frontend