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

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

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

@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.

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!

@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.

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

The root cause of this issue in storybook is related to this line.

In Webpack 5 there is no default polyfill for fs & path.

You have 2 choices to solve the issue:

1. disable fs by

//webpack.config.js
webpackFinal: async (config, { configType }) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: false, // <------
    path: false // <-----
  };
  return config;
};

1. if the first option doesn’t works, change it to work with browserify-fs

webpackFinal: async (config, { configType }) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: require.resolve("browserify-fs"), // <------
    path: require.resolve("path-browserify"), // <------
  };
  return config;
};

import of whatever we are currently using fs to achieve. Dynamic imports on the server side should be possible.

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

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

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

Please advise.

In my case, that was the use of

import { useTranslation } from 'next-i18next';

Replace all the occurences with fixes the problem.

import { useTranslation } from 'react-i18next';

As a side note, importing serverSideTranslations as an util works fine for me

export async function getServerSideProps() {
	return {
		props: {
			...(await getI18nProps()),
		},
	};
}

nextjs 12.2 add Edge SSR(https://nextjs.org/blog/next-12-2#edge-server-rendering-experimental) feature, it can also cause this issue.

What to do if I need to use it in components folder?

you can still use the useTranslation hook in components

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 Did you figure out a workaround other than the alias to Webpack config?

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

Hi!

when I follow this approach to get this work in storybook then I start getting this errors

ModuleNotFoundError: Module not found: Error: Can't resolve 'next-i18next/serverSideTranslations' in 'myproject/src/pages'

I bet this is because storybook is running in the same folder as the next.js app, and is loading I dont know why a file with that import.

Anybody has faced the same issue?

import of whatever we are currently using fs to achieve. Dynamic imports on the server side should be possible.

import of what?

@felixmosh Think we’d be better off relying directly on import at this point?

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

What to do if I need to use it in components folder?

@isaachinman, sound OK, I will prepare a PR