gilbsgilbs / babel-plugin-i18next-extract

Babel plugin that statically extracts i18next and react-i18next translation keys.
https://i18next-extract.netlify.com
MIT License
161 stars 37 forks source link

Cannot read property 'includes' of undefined with next-i18next #182

Open haapti opened 3 years ago

haapti commented 3 years ago

Describe the bug

I'm trying to get babel-plugin-i18next-extract to work with i18next, but ending always up a type error Cannot read property 'includes' of undefined when starting the next dev environment. The error is most likely caused by allLanguages being undefined.

Occurs in next-i18next version

I'm running next 10.0.3, i18next 7.0.1 and i18next-extract 0.8.2.

Steps to reproduce

.babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        ["i18next-extract", { "outputPath": "public/static/locales/{{locale}}/common.missing.json" }]
    ]
}

i18n.js

const NextI18Next = require('next-i18next').default;
const path = require('path');

const DEFAULT_LOCALE = 'en-GB';
const supportedLangs = ['en-GB', 'fi-FI', 'da-DK', 'no-NO', 'sv-SE'];

const domainLocaleMap = {
    'domain.co.uk': 'en-GB',
    'domain.fi': 'fi-FI',
    'domain.dk': 'da-DK',
    'domain.no': 'no-NO',
    'domain.se': 'sv-SE',
};

const domainDetector = {
    // We use the name to refer to it later when we want to tell i18next when to use it.
    name: 'domain',
    lookup(req, res, options) {
        let locale = DEFAULT_LOCALE;
        let host;
        // In the browser, get the hostname from window.location.
        if (typeof window !== 'undefined') {
            host = window.location.hostname;
        }
        // On the server, get the hostname from the request headers.
        // We use the host header which is available on IncomingMessage.
        // https://nodejs.org/api/http.html#http_class_http_incomingmessage
        // But the host header may include the port so first we take that off, if it exists.
        else {
            const hostname = req.headers.host?.split(':')[0];
            host = hostname;
        }

        Object.keys(domainLocaleMap).forEach((domain) => {
            if (host.indexOf(domain) !== -1) {
                locale = domainLocaleMap[domain];
            }
        });

        return locale;
    },
};

module.exports = new NextI18Next({
    defaultLanguage: DEFAULT_LOCALE,
    otherLanguages: supportedLangs,
    localePath: path.resolve('./public/static/locales'),
    customDetectors: [domainDetector],
    detection: {
        order: ['domain'],
    },
    saveMissing: false,
    keySeparator: false,
    debug: false,
});

Expected behaviour

i18next-extract should extract the translations into given file.

Additional context

Error and call stack

Server Error
TypeError: Cannot read property 'includes' of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///var/www/node_modules/next-i18next/dist/commonjs/utils/lng-from-req.js (30:25)
Array.find
<anonymous>
lngFromReq
file:///var/www/node_modules/next-i18next/dist/commonjs/utils/lng-from-req.js (29:37)
<unknown>
file:///var/www/node_modules/next-i18next/dist/commonjs/middlewares/next-i18next-middleware.js (60:46)
<unknown>
file:///var/www/node_modules/next-i18next/dist/commonjs/hocs/app-with-translation.js (249:38)
new Promise
<anonymous>
_loop$
file:///var/www/node_modules/next-i18next/dist/commonjs/hocs/app-with-translation.js (248:36)
tryCatch
file:///var/www/node_modules/regenerator-runtime/runtime.js (63:40)
Generator.invoke [as _invoke]