next-i18next: 🌍 no such file or directory for custom localePath

Describe the bug

I’m setting up my Nextjs project with internationalization using this module. I’m following the setup guidelines and I am having to customize my localePath as my translation files are placed into a different folder to what next-i18n expects.

Occurs in next-i18next version

"next-i18next": "^8.1.3"

Steps to reproduce

I’ll show my code below.

Expected behaviour

The correct translation files should be found in the directory described in localePath

Screenshots

Folder structure

OS (please complete the following information)

• Device: Macbook pro (16-inch, 2019), Catalina
• Browser: Any

Additional context

Error

Error: ENOENT: no such file or directory, scandir '/Users/francisleigh/Documents/C/visage/src/localization/en'

next.config.js

const withTM = require('next-transpile-modules')(['maisonsport-common-ui', 'styled-components/native']);
const withImages = require('next-images');

const { i18n } = require('./next-i18next.config')

module.exports = withTM(
  withImages({
    webpack: (config) => {
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        // Transform all direct `react-native` imports to `react-native-web`
        'react-native$': 'react-native-web',
      }
      config.resolve.extensions = [
        '.web.js',
        '.web.ts',
        '.web.tsx',
        ...config.resolve.extensions,
      ]
      return config
    },
    i18n,
  })
);

next-i18next.config.js

const path = require('path');

module.exports = {
  i18n: {
    // These are all the locales you want to support in
    // your application
    locales: ['en', 'fr', 'it', 'de'],
    // This is the default locale you want to be used when visiting
    // a non-locale prefixed path e.g. `/hello`
    defaultLocale: 'en',
    // This is a list of locale domains and the default locale they
    // should handle (these are only required when setting up domain routing)
    // Note: subdomains must be included in the domain value to be matched e.g. "fr.example.com".
  },
  localePath: path.resolve('src/localization'),
  localeStructure: '{{lng}}',
}

Quick note: If I set localeExtension: '' and set localeStructure: '{{lng}}.json it ends up looking for /en.json. and If i set localeExtension: 'json' - get the same error.