next-translate: Invalid next.config.js options detected

next-translate: 1.5.0 next: 12.2.3

i18n.js

const hoistNonReactStatics = require('hoist-non-react-statics');

module.exports = {
  locales: ['en', 'nl'],
  defaultLocale: 'en',
  pages: {
    '*': ['common'],
  },
  loadLocaleFrom: async (lang) => {
    const commonTranslations = await import('translations');
    const appTranslations = await import('./src/translations/');

    return new Promise((resolve) =>
      resolve({ ...commonTranslations[lang], ...appTranslations[lang] })
    );
  },
  defaultNS: 'common',
  staticsHoc: hoistNonReactStatics, // required for loading custom layouts with translations
};

next.config.js

/** @type {import('next').NextConfig} */

const nextTranslate = require('next-translate');
const withTM = require('next-transpile-modules')([
  'components',
  'hooks',
]);

const nextConfig = {
  reactStrictMode: true,
};


module.exports = withTM(nextTranslate(nextConfig));

Whenever I run my app, I get following warning on my console. How can I fix this?

warn  - Invalid next.config.js options detected: 
[
  {
    "instancePath": "/i18n",
    "schemaPath": "#/properties/i18n/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "loadLocaleFrom"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "/i18n",
    "schemaPath": "#/properties/i18n/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "defaultNS"
    },
    "message": "must NOT have additional properties"
  },
  {
    "instancePath": "/i18n",
    "schemaPath": "#/properties/i18n/additionalProperties",
    "keyword": "additionalProperties",
    "params": {
      "additionalProperty": "staticsHoc"
    },
    "message": "must NOT have additional properties"
  }
] 

Is there something wrong with how I have configured things?

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 6
  • Comments: 15 (6 by maintainers)

Most upvoted comments

@tuncatakan yes it’s because Next.js config didn’t support those additionalProperties from next-translate.

Yes, I understand the situation. @Dragate said that he started using the new ajv validation. I guess we will wait for the new version to be released for this error to be fixed.

Is there something wrong with how I have configured things?

No. Next.js has started validating its config with ajv. Currently, next-translate is injecting irrelevant information, which triggers this warning. For next.js, only locales, defaultLocale, localeDetection and domains are valid.

Culprit: https://github.com/vinissimus/next-translate/blob/7ebba0c71362b2dd349472d854730c098c793152/src/plugin/index.ts#L53

I had to move both logBuild and loadLocaleFrom inside the config file, in order for the next.js to compile, otherwise, I would get:

./i18n.js Critical dependency: the request of a dependency is an expression

Am I doing something wrong here? Any help will be very much appreciated 🙏🏻

I think is related to this issue about dynamic import and SWC: https://github.com/aralroca/next-translate/issues/851. At the moment we don’t know how to fix it yet, but there is a temporal workaround to fix it https://github.com/aralroca/next-translate/issues/851#issuecomment-1173611946 (without using require, that increase the bundle size). Any help to fix this will be very welcome.