Next-i18next: [8.0.0-beta.4] Module not found: Can't resolve 'fs'

[kdelmonte]

Describe the bug

Getting the following error when running the app:

wait  - compiling...
error - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:28:0
Module not found: Can't resolve 'fs'

Occurs in next-i18next version

8.0.0-beta.4

Steps to reproduce

You must provide a reproducible repository, or copy/paste blocks of code which are sufficient to reproduce the bug.

Expected behaviour

You must provide a clear and concise description of what you expected to happen.

Screenshots

[isaachinman]

Hi @kdelmonte – this is most likely because you have imported serverSideTranslations in some place where client side code is being run. It can only be used in server side data fetching methods such as getStaticProps and getServerSideProps. Hope that helps!

[kdelmonte]

Thank you @isaachinman , I am only using it inside getServerSideProps:

export const getServerSideProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common', 'loginPage'])),
  },
})

Please advise.

[isaachinman]

@kdelmonte You'll need to provide a reproducible repo.

[kdelmonte]

@isaachinman I found this issue. I was exporting getServerSideProps from another file into the Next.js page file. Moving getServerSideProps directly to the page file fixed this issue. Thanks.

[ivnmood]

I have same issue, in 8.0.0-beta.4, but I did all the imports correctly and I totally tried to do it like in read.me file and example from the repository

wait - compiling...
error - ../node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:28:0
Module not found: Can't resolve 'fs'
null
react-i18next:: You will need to pass in an i18next instance by using initReactI18next

_app.tsx

import { appWithTranslation } from "next-i18next";
import { AppProps } from "next/app";

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  const MainLayout = (Component as any).MainLayout || DefaultLayout;
  const NestedLayout = (Component as any).NestedLayout || DefaultLayout;

  return (
    <>
     /.../
              <MainLayout>
                <NestedLayout>
                  <Component {...pageProps} />
                </NestedLayout>
              </MainLayout>
         /.../
    </>
  );
};

const DefaultLayout: React.FC = ({ children }) => <>{children}</>;

export default appWithTranslation(App);

file where i use serverSideTranslations:

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { GetStaticProps } from "next";
import Grid from "@material-ui/core/Grid";
import { Header } from "../components/Header";

const AppLayout: React.FC = ({ children }) => (
  <>
    <Grid container direction="column" alignItems="center">
      <Header />
      {children}
    </Grid>
  </>
);

export const getStaticProps: GetStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ["translation"])),
  },
});

export default AppLayout;

file where i use useTranslation

import { useTranslation } from "next-i18next";

import { NavLink } from "../../../../components/NavLink";

export const Header = () => {
  const { t } = useTranslation();
  return (
/ .../
          <NavLink title={t("something1")} href="/#"  />
          <NavLink title={t("something2")} href="/#"  />
          <NavLink title={t("something3")} href="/#"  />
/ .../
  );
};

next-18next-config.js

import { initReactI18next } from "react-i18next";

const path = require("path");

module.exports = {
  defaultLocale: "en",
  locales: ["en", "ru"],
  localePath: path.resolve("./public/translations"),
  use: [initReactI18next],   // this line did not affect the error in any way
  debug: true,
};

next.config.js

module.exports = {
  images: {
    domains: ["..."],
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ["@svgr/webpack"],
    });

    return config;
  },
  async redirects() {
    return [
      {
        source: "/",
        destination: "/...",
        permanent: false,
      },
    ];
  },
  i18n: {
    defaultLocale: "en",
    locales: ["en", "ru"],
  },
};

[ivnmood]

I'm resolve this issues, this code

export const getStaticProps: GetStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ["translation"])),
  },
});

must be in pages folder, but i'm use it in components folder

[kdelmonte]

This is exactly what happened to me. Beware, future readers.

[isaachinman]

Just want to note that this is a general NextJs "gotcha", and isn't necessarily specific to next-i18next. It's to do with how chunks are separated by webpack, despite there being client and server code in the same files (pages).

[dohomi]

@isaachinman I am using NextJS and Storybook together and I did not share any code SSR related code within both separate builds.

I still realise when I use the useTranslation hook in the Storybook environment I receive the error:

ERROR in ./node_modules/next-i18next/dist/esm/config/createConfig.js
Module not found: Error: Can't resolve 'fs'

I could solve it for now with importing useTranslation from react-118next instead of next-i18next - I am not sure if thats the right way to do this.

// import { useTranslation } from 'next-i18next' // => throws error
import { useTranslation, UseTranslationOptions, UseTranslationResponse } from 'react-i18next'

type TranslationNamespace = 'common'

const useLmTranslation = (
  ns?: TranslationNamespace,
  options?: UseTranslationOptions
): UseTranslationResponse<string> =>
  useTranslation((ns as string) ?? 'common', options)

export default useLmTranslation

EDIT:
I add an alias to point via Webpack config to different alias to solve the error for now.
```js
webpackFinal: async (config, {configType}) => {
config.resolve.alias = {
...config.resolve.alias,
'next-i18next': 'react-i18next'
}
return config
}

````

[isaachinman]

Hey @dohomi – hopefully we can solve this together.

As a package, next-i18next runs in both server and browser environments. For the createConfig code your error is referencing, we check if process.browser is true.

Strange that process.browser is not true in your Storybook env.

The swap from typeof window === 'undefined' to process.browser was done in #926 as a bundle optimisation. cc @felixmosh – we may need to also add typeof window === 'undefined' back in.

[felixmosh]

@isaachinman, sound OK, I will prepare a PR

[isaachinman]

Fixed by #974.

[dohomi]

@isaachinman @felixmosh I updated to 8.0.1 and the error still exists and Storybook is not building:

ERROR in ./node_modules/next-i18next/dist/esm/config/createConfig.js
Module not found: Error: Can't resolve 'fs' in '/node_modules/next-i18next/dist/esm/config'
 @ ./node_modules/next-i18next/dist/esm/config/createConfig.js 54:15-28
 @ ./node_modules/next-i18next/dist/esm/appWithTranslation.js
 @ ./node_modules/next-i18next/dist/esm/index.js
 @ ./lib/hooks/useLmTranslation.ts

I'm only using the useTranslation hook the rest is run by react-i18next

[felixmosh]

Do you use webpack 5 in you storybook build?

[Kalle-kula]

EDIT:
I add an alias to point via Webpack config to different alias to solve the error for now.

webpackFinal: async (config, {configType}) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'next-i18next': 'react-i18next'
    }
    return config
  }

Putting this in my /storybook/.main.js solved it for me, cheers