Add support for ES module syntax in `next-i18next.config.js` #1505

trezy · 2021-11-08T18:28:04Z

Is your feature request related to a problem? Please describe.

Next.js 12 supports ES module syntax for the next.config file if the file extension is .mjs. Creating next-i18next.config.mjs doesn't work, however, since next-i18next looks specifically for a next-i18next.config.js file.

Describe the solution you'd like

next-i18next should support ES module syntax for the next-i18next.config.js file.

Describe alternatives you've considered

I can achieve this by manually importing a next-i18next.config.js file and passing it to serverSideTranslations, but this is burdensome to do for apps with lots of pages.

Additional context

It was very surprising to me that next-i18next requires the existence of a next-i18next.config.js file. It'd be cool if in addition to adding ES modules support, next-i18next would grab its settings from the next.config.js file in the absence of a next-i18next.config.js file.

The text was updated successfully, but these errors were encountered:

isaachinman · 2021-11-08T19:10:35Z

We can release this in the v9.0.0 major. I'd certainly appreciate help if you have time to look into it.

It was very surprising to me that next-i18next requires the existence of a next-i18next.config.js file

The next-i18next package requires additional configuration on top of the NextJs i18n config object. It's not easy/advisable to try and "share" the next.config.js file as it is handled in a very specific way by the NextJs framework and Vercel platform. That is why we need a separate file.

If we standardise/force the localePath option (effectively removing it) as per #1202 (comment), we may also be able to drop the requirement of a config file, however we'd need to test filesystem issues on Vercel and other serverless platforms.

LaCocoRoco · 2022-05-30T10:38:42Z

Is there an update to this issue? The last time i tried to use "next-i18next.config.mjs" in combination with "next.config.mjs" i got some problems.

isaachinman · 2022-05-30T11:04:14Z

No update. @LaCocoRoco Would you like to look into it and contribute?

LaCocoRoco · 2022-05-30T20:06:11Z

This is probably way out of my league. If i got some free time i will take a look into it and if i have a solution i will give a response regarding the problem.

jlarmstrongiv · 2022-06-01T01:10:38Z

Supporting the cjs syntax would be a nice stopgap next-i18next.config.cjs

isaachinman · 2022-06-01T08:03:04Z

@jlarmstrongiv PRs welcome.

GabenGar · 2022-06-17T10:51:45Z

@isaachinman
The issue at hand is the usage of cjs imports within createConfig() which gets passed as is into esm bundle and thus resulting into invalid ESM module code. No idea how to fix it, especially since with require() rewritten as top level imports it builds just fine with yarn build and the test for it works too when ran standalone as yarn jest ./src/config/createConfig.test.ts.
However when running the package with the changes above I get this error:

error - ../next-i18next/dist/esm/config/createConfig.js:19:0
Module not found: Can't resolve 'fs'
  17 | 
  18 | import { defaultConfig } from './defaultConfig';
> 19 | import fs from 'fs';
  20 | import path from 'path';
  21 | var deepMergeObjects = ['backend', 'detection'];
  22 | export var createConfig = function createConfig(userConfig) {

Import trace for requested module:
../next-i18next/dist/esm/appWithTranslation.js
../next-i18next/dist/esm/index.js
./src/pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

appWithTranslation() in the logs suggests the bundler is confused about the environment this function is ran at and doesn't code-split it properly.

stale · 2022-07-10T05:37:47Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale · 2022-07-30T17:06:11Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

tkrotoff · 2022-07-30T17:07:17Z

I hate bots

AhmedBHameed · 2022-08-10T12:07:46Z

Hey everyone.

Before opening a PR to support cjs, I want to double check if this is the only part needed to be added here or?

const DEFAULT_CONFIG_PATH = './next-i18next.config.js'
const DEFAULT_CONFIG_PATH_CJS = './next-i18next.config.cjs'

[...]

  if (!userConfig) {
    if (fs.existsSync(path.resolve(DEFAULT_CONFIG_PATH))) {
      userConfig = await import(path.resolve(DEFAULT_CONFIG_PATH))
    } else if (fs.existsSync(path.resolve(DEFAULT_CONFIG_PATH_CJS))) {
      userConfig = await import(path.resolve(DEFAULT_CONFIG_PATH_CJS))
    }
  }
  
  [...]

I added it locally but I don't understand how the testing works?

otterDeveloper · 2022-08-15T23:26:08Z

What about mjs? @AhmedBHameed

otterDeveloper · 2022-08-16T07:45:23Z

Well I made an attempt at https://github.com/otterDeveloper/next-i18next/tree/esm-config-support-1

Importing cjs works but I didn't have any luck with mjs.

It either cant find the mjs file: Error: Cannot find module next-i18next.config.mjs

or because the package has support for CommonJS, in another test project, it throws an error about importing an ESM module using require
Error: require() of ES Module next-i18next.config.mjs not supported.

Even Jest doesn't like importing mjs

So I think this is a no go right now

A mitigation would be to make it clear in the Readme that the config must be named exactly next-i18next.config.js and add an example in on how to import from a mjs next config, next.config.mjs

jlarmstrongiv · 2022-08-16T08:18:33Z

@otterDeveloper have you tried the await import("/path/to/next-i18next.config.mjs") syntax when the package has support for CommonJS? (may not work in jest)

Elindorath · 2022-09-01T16:35:51Z

Maybe I should open another issue for this but just to add to the conversation:
Since Next.js now supports having the config as a function (even an async one since v12.1.0) it would be very nice to have the same for next-i18next.config.js.

For a use case example, as I tried to have only one source of truth for the list of supported locales, I used to do something like this in my next.config.js (with support for prefixing the default locale):

// @ts-check

const fs = require('fs/promises');

module.exports = async (/* phase, { defaultConfig } */) => {
  const locales = await fs.readdir('./public/locales');
  const defaultLocale = 'default';

  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    i18n: {
      locales: [defaultLocale, ...locales],
      defaultLocale,
      localeDetection: false,
    },
  };
}

stale · 2022-09-09T00:48:37Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

techquestions · 2022-09-29T20:22:33Z

not stale

Sevi7 · 2023-01-20T17:20:07Z

this issue should be open

mattp0123 · 2023-03-06T10:59:43Z

Any workaround?

Simvolick · 2023-04-02T09:41:31Z

This is still an issue that is not addressed. There are too many benefits to using mjs to not have a work around for this.

mustafamoe · 2023-04-04T10:22:27Z

Almost 2 years still nothing! yikes

adrai · 2023-04-04T11:17:25Z

feel free to provide a PR if you like it

Quietly-20201113 · 2023-06-28T07:53:56Z

不使用mjs也不使用cjs后缀就直接写成js即可
// next-i18next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
const languagesConfig = [
    {
        label: 'English',
        value: 'EN',
    },
    {
        label: '中文',
        value: 'ZH_CN',
    },
];

const i18n = {
    defaultLocale: 'ZH_CN',
    locales: languagesConfig.map((language) => language.value),
    localePath: path.resolve('./public/locales'),
};

module.exports = {
    i18n,
    languagesConfig,
};

import withBundleAnalyzer from "@next/bundle-analyzer"
import withPlugins from "next-compose-plugins"
import { env } from "./env.mjs"
import { i18n  } from "./next-i18next.config.js";
/**
 * @type {import('next').NextConfig}
 */
const config = withPlugins([[withBundleAnalyzer({ enabled: env.ANALYZE })]], {
  reactStrictMode: true,
  experimental: { instrumentationHook: true },
  rewrites() {
    return [
      { source: "/healthz", destination: "/api/health" },
      { source: "/api/healthz", destination: "/api/health" },
      { source: "/health", destination: "/api/health" },
      { source: "/ping", destination: "/api/health" },
    ]
  },
  head: {
    link: [
      {
        rel: 'icon',
        href: '/favicon.ico',
      },
    ],
  },
  i18n
})

export default config

我这样写可以使用

nick4fake · 2023-07-03T11:09:43Z

Why isn't this reopened?

perezpefaur · 2024-04-13T19:45:20Z

reopen

stale bot added stale and removed stale labels Jul 10, 2022

stale bot added the stale label Jul 30, 2022

stale bot removed the stale label Jul 30, 2022

stale bot added the stale label Sep 9, 2022

stale bot closed this as completed Sep 22, 2022

joepio mentioned this issue Dec 27, 2022

AWS amplify no longer building ontola/home#45

Closed

nick4fake mentioned this issue Jul 3, 2023

Usage example for ESM #2185

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for ES module syntax in `next-i18next.config.js` #1505

Add support for ES module syntax in `next-i18next.config.js` #1505

trezy commented Nov 8, 2021 •

edited

Loading

isaachinman commented Nov 8, 2021

LaCocoRoco commented May 30, 2022

isaachinman commented May 30, 2022

LaCocoRoco commented May 30, 2022

jlarmstrongiv commented Jun 1, 2022

isaachinman commented Jun 1, 2022

GabenGar commented Jun 17, 2022

stale bot commented Jul 10, 2022

stale bot commented Jul 30, 2022

tkrotoff commented Jul 30, 2022

AhmedBHameed commented Aug 10, 2022 •

edited

Loading

otterDeveloper commented Aug 15, 2022 •

edited

Loading

otterDeveloper commented Aug 16, 2022

jlarmstrongiv commented Aug 16, 2022 •

edited

Loading

Elindorath commented Sep 1, 2022 •

edited

Loading

stale bot commented Sep 9, 2022

techquestions commented Sep 29, 2022

Sevi7 commented Jan 20, 2023

mattp0123 commented Mar 6, 2023

Simvolick commented Apr 2, 2023

mustafamoe commented Apr 4, 2023

adrai commented Apr 4, 2023

Quietly-20201113 commented Jun 28, 2023 •

edited

Loading

nick4fake commented Jul 3, 2023

perezpefaur commented Apr 13, 2024

Add support for ES module syntax in next-i18next.config.js #1505

Add support for ES module syntax in next-i18next.config.js #1505

Comments

trezy commented Nov 8, 2021 • edited Loading

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

isaachinman commented Nov 8, 2021

LaCocoRoco commented May 30, 2022

isaachinman commented May 30, 2022

LaCocoRoco commented May 30, 2022

jlarmstrongiv commented Jun 1, 2022

isaachinman commented Jun 1, 2022

GabenGar commented Jun 17, 2022

stale bot commented Jul 10, 2022

stale bot commented Jul 30, 2022

tkrotoff commented Jul 30, 2022

AhmedBHameed commented Aug 10, 2022 • edited Loading

otterDeveloper commented Aug 15, 2022 • edited Loading

otterDeveloper commented Aug 16, 2022

jlarmstrongiv commented Aug 16, 2022 • edited Loading

Elindorath commented Sep 1, 2022 • edited Loading

stale bot commented Sep 9, 2022

techquestions commented Sep 29, 2022

Sevi7 commented Jan 20, 2023

mattp0123 commented Mar 6, 2023

Simvolick commented Apr 2, 2023

mustafamoe commented Apr 4, 2023

adrai commented Apr 4, 2023

Quietly-20201113 commented Jun 28, 2023 • edited Loading

nick4fake commented Jul 3, 2023

perezpefaur commented Apr 13, 2024

Add support for ES module syntax in `next-i18next.config.js` #1505

Add support for ES module syntax in `next-i18next.config.js` #1505

trezy commented Nov 8, 2021 •

edited

Loading

AhmedBHameed commented Aug 10, 2022 •

edited

Loading

otterDeveloper commented Aug 15, 2022 •

edited

Loading

jlarmstrongiv commented Aug 16, 2022 •

edited

Loading

Elindorath commented Sep 1, 2022 •

edited

Loading

Quietly-20201113 commented Jun 28, 2023 •

edited

Loading