Module not found: Can't resolve 'fs' when upgrading to 8.0.0

[pdugan20]

Describe the bug

I'm getting the same issue described here: #935

Any idea what's going wrong?

error - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:28:0
Module not found: Can't resolve 'fs'
null
Could not find files for / in .next/build-manifest.json

Occurs in next-i18next version

8.0.0

Steps to reproduce

next.config.js

const withSourceMaps = require('@zeit/next-source-maps')();
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const { i18n } = require('./next-i18next.config');

const {
    NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
    SENTRY_ORG,
    SENTRY_PROJECT,
    SENTRY_AUTH_TOKEN,
    NODE_ENV,
} = process.env;

process.env.SENTRY_DSN = SENTRY_DSN;

module.exports = withSourceMaps({
    i18n,

    async headers() {
        return [
            {
                source: '/images/:path*',
                headers: [
                    {
                        key: 'Cache-Control',
                        value:
                            'public, max-age=31536000, stale-while-revalidate',
                    },
                ],
            },
        ];
    },

    images: {
        domains: ['firebasestorage.googleapis.com', 'googleapis.com'],
    },

    webpack: (config, options) => {
        if (!options.isServer) {
            config.resolve.alias['@sentry/node'] = '@sentry/browser';
        }

        if (
            SENTRY_DSN &&
            SENTRY_ORG &&
            SENTRY_PROJECT &&
            SENTRY_AUTH_TOKEN &&
            NODE_ENV === 'production'
        ) {
            config.plugins.push(
                new SentryWebpackPlugin({
                    include: '.next',
                    ignore: ['node_modules'],
                    urlPrefix: '~/_next',
                    release: options.buildId,
                }),
            );
        }

        return config;
    },
});

next-i18next.config.js:

const path = require('path');

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es'],
        localePath: path.resolve('./public/static/locales'),
        debug: true,
    },
};

index.js

import React from 'react';
import styled from 'styled-components';
import { withTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Page from '../layouts/main';
import IntroSection from '../components/landing/section/Intro';
import CarouselSection from '../components/landing/section/Carousel';
import MapSection from '../components/landing/section/Map';
import DownloadSection from '../components/landing/section/Download';
import FooterSection from '../components/landing/section/Footer';

class HomePage extends React.Component {
    static async getServerSideProps({ locale }) {
        return {
            props: {
                ...(await serverSideTranslations(locale, [
                    'common',
                    'hike',
                    'landing',
                    'header',
                    'footer',
                ])),
            },
        };
    }

    renderMainColumn = () => {
        return (
            <RootView>
                <IntroSection />
                <CarouselSection />
                <MapSection />
                <DownloadSection />
                <FooterSection />
            </RootView>
        );
    };

    render() {
        const { t } = this.props;

        return (
            <Page
                singleColumn
                fullWidth
                title={t('slogan', { appName: t('appName') })}
                mainColumn={this.renderMainColumn()}
            />
        );
    }
}

export default withTranslation('common')(HomePage);

_app.js

import App from 'next/app';
import React from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import { ToastProvider } from 'react-toast-notifications';
import SimpleReactLightbox from 'simple-react-lightbox';
import { appWithTranslation } from 'next-i18next';
import MapkitProvider from '../components/map/MapKitProvider';
import Toast from '../components/Toast';
import { getTheme, initSentry } from '../utils/app';
import { initAnalytics } from '../utils/analytics';
import { settings } from '../constants/toast';
import { initFirebase } from '../utils/firebase/app';

import '../css/reset.css';
import '@brainhubeu/react-carousel/lib/style.css';
import '../scss/components/_index.scss';

const { NEXT_PUBLIC_MAPKIT_TOKEN } = process.env;

initSentry();
initFirebase();
initAnalytics();

class HikeAround extends App {
    render() {
        const { Component, pageProps, err } = this.props;
        const theme = getTheme();

        return (
            <ToastProvider
                autoDismiss
                autoDismissTimeout={settings.autoDismissTimeout}
                placement={settings.placement}
                components={{ Toast }}
            >
                <ThemeProvider theme={theme}>
                    <MapkitProvider tokenOrCallback={NEXT_PUBLIC_MAPKIT_TOKEN}>
                        <SimpleReactLightbox>
                            <Component {...pageProps} err={err} />
                        </SimpleReactLightbox>
                    </MapkitProvider>
                </ThemeProvider>
            </ToastProvider>
        );
    }
}

export default appWithTranslation(HikeAround);

Expected behaviour

Index.js should load with translated content

[isaachinman]

Hey @pdugan20 and thanks for the first v8 issue!

First, your config object should look like this:

const path = require('path');

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es'],
    },
    localePath: path.resolve('./public/static/locales'),
    debug: true,
};

Only the NextJs options themselves go in the nested i18n object.

Second, I believe you're getting this error because of your class-based approach. You need to export const getServerSideProps so that NextJs can strip it out of the client bundles. As far as I know, getServerSideProps isn't compatible with class components – it's a separate function that runs elsewhere.

Let me know if that makes sense, and if that indeed fixes the issue.

[pdugan20]

Yup that was able to load index.js for me! Thanks!

[pdugan20]

Hey thanks again for such a quick response, that was awesome!

Everything's working fine but I'm now getting the following issue:
vercel/next.js#22508

Assuming that's on the nextjs side and has nothing to do with your library.

[isaachinman]

Not sure exactly what that issue is, but if you're not able to use suspense, you can easily override it.

The relevant default value is here.

You would want to do something like:

const path = require('path');

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es'],
    },
    localePath: path.resolve('./public/static/locales'),
    debug: true,
    react: {
      useSuspense: false,
      wait: true,
    }
};

Let me know if that does the trick.

[pdugan20]

Oh hey that fixed it too! I'm completely migrated!

For whatever reason suspense was throwing errors on the custom _document.js nextjs recommends using for styled-componenets:
https://github.com/vercel/next.js/tree/master/examples/with-styled-components

[isaachinman]

Great, glad to hear it!

[SalahAdDin]

Not sure exactly what that issue is, but if you're not able to use suspense, you can easily override it.

The relevant default value is here.

You would want to do something like:

const path = require('path');

module.exports = {
    i18n: {
        defaultLocale: 'en',
        locales: ['en', 'es'],
    },
    localePath: path.resolve('./public/static/locales'),
    debug: true,
    react: {
      useSuspense: false,
      wait: true,
    }
};

Let me know if that does the trick.

It seems there is a warning related to it:

react-i18next:: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.