1

Using this code I am trying to load Markdown files that are stored in the /legal directory. As loading these files needs to be run on the server, I am using getStaticProps. According to my knowledge and what I could find on the internet, this is the place where I can use fs. The problem is that when I access the page, I get this error:

Module not found: Can't resolve 'fs'

Does anyone have a solution to this. Is there anything wrong with the imports or the server-side code?

import marked from 'marked';
import getConfig from 'next/config';
import path from 'path';
import fs from 'fs';
import { useRouter } from 'next/router';

export async function getStaticProps() {
    const { serverRuntimeConfig } = getConfig()

    function getLegalDocument(key: string, locale: string) { 
        return marked.parse(fs.readFileSync(path.join(serverRuntimeConfig.PROJECT_ROOT, './legal', key + '.' + locale + '.md'), 'utf8'))
    }

    let legalDocuments = { 
        legalNotice: {
            de: getLegalDocument('legal_notice', 'de'),
            en: getLegalDocument('legal_notice', 'en'),
            es: getLegalDocument('legal_notice', 'es'),
            fr: getLegalDocument('legal_notice', 'fr'),
            it: getLegalDocument('legal_notice', 'it'),
        },
        privacyPolicy: {
            de: getLegalDocument('privacy_policy', 'de'),
            en: getLegalDocument('privacy_policy', 'en'),
            es: getLegalDocument('privacy_policy', 'es'),
            fr: getLegalDocument('privacy_policy', 'fr'),
            it: getLegalDocument('privacy_policy', 'it'),
        },
        termsOfService: {
            de: getLegalDocument('terms_of_service', 'de'),
            en: getLegalDocument('terms_of_service', 'en'),
            es: getLegalDocument('terms_of_service', 'es'),
            fr: getLegalDocument('terms_of_service', 'fr'),
            it: getLegalDocument('terms_of_service', 'it'),
        }
    }

    return { 
        props: legalDocuments,
    }
};

type Props = {
    legalDocuments?: any;
    documentType: string;
}

const LegalDocument = ({ legalDocuments, documentType }: Props) => {
    const languages: Map<String, String> = legalDocuments[documentType]
    const { locale, locales, defaultLocale, asPath } = useRouter();
    let document = ''
    
    if (locale in languages) {
        document = languages[locale]
    } else if (defaultLocale in languages) {
        document = languages[defaultLocale]
    } else {
        return (
            <div>
                {documentType}
            </div>
        )
    }
    
    return (
        <div>
            {document}
        </div>
    )
}

export default LegalDocument
1
  • That code should definitely not throw that error as you're correctly only using fs and path on the server. Have you tried deleting your .next folder are re-starting your dev server? It could be a caching issue with Next.js. Jun 25, 2022 at 17:34

1 Answer 1

0

Add this to your next.config.js

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}
3
  • So do I need to setup webpack? I am not using it yet in this project as far as I know.
    – PlutoHDDev
    Jun 23, 2022 at 13:37
  • With what you have provided I get the following output: ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema followed by: configuration[0].node has an unknown property 'fs'
    – PlutoHDDev
    Jun 23, 2022 at 13:42
  • This is my current next.config.js: toptal.com/developers/hastebin/ibanujoliv.typescript
    – PlutoHDDev
    Jun 23, 2022 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.