Next-i18next: Next.js App fails to start with next-i18next-middleware.js in server.js ...

[ahmedmusawir]

Here is the repo I'm working with:
https://github.com/ahmedmusawir/dc_next_pwa_stage_7

1. To start, my next.config.js looks like this:

const path = require('path');
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
    publicRuntimeConfig: {
        localeSubpaths: process.env.LOCALE_SUBPATHS === 'true',
    },
    webpack: (config, { buildId, dev }) => {
        /**
         * Install and Update our Service worker
         * on our main entry file :)
         * Reason: https://github.com/ooade/NextSimpleStarter/issues/32
         */
        const oldEntry = config.entry;

        config.entry = () =>
            oldEntry().then(entry => {
                entry['main.js'] &&
                    entry['main.js'].push(path.resolve('./utils/offline'));
                return entry;
            });

        /* Enable only in Production */
        if (!dev) {
            // Service Worker

            config.plugins.push(
                new WorkboxPlugin.InjectManifest({
                    swSrc: path.join(__dirname, 'utils', 'sw.js'),
                    swDest: path.join(__dirname, '.next', 'sw.js'),
                    globDirectory: __dirname,
                    globPatterns: [
                        'static/**/*.{png,jpg,ico}', // Precache all static assets by default
                    ],
                }),
            );
        }

        return config;
    },
};

1. My i18n.js file looks like this:

import NextI18Next from 'next-i18next';

const NextI18NextInstance = new NextI18Next({
    defaultLanguage: 'en',
    otherLanguages: ['de', 'es'],
    localeSubpaths: false,
});

export default NextI18NextInstance;

/* Export class methods as named exports. This is a must! */
export const {
    i18n,
    appWithTranslation,
    withNamespaces,
    Link,
    Trans,
    Router,
} = NextI18NextInstance;

1. And server.js file looks like this:

const { createServer } = require('http');
const path = require('path');
const next = require('next');
const routes = require('./routes');
const nextI18NextMiddleware = require('next-i18next/middleware'); // LINE 1
const nextI18next = require('./i18n'); // LINE 2

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dir: '.', dev });
const handle = routes.getRequestHandler(app);

const PORT = process.env.PORT || 5001;

app.prepare().then(_ => {
    const server = createServer((req, res) => {
        if (req.url === '/sw.js' || req.url.startsWith('/precache-manifest')) {
            app.serveStatic(req, res, path.join(__dirname, '.next', req.url));
        } else {
            handle(req, res);
        }
    });

    server.use(nextI18NextMiddleware(nextI18next)); // LINE 3

    server.listen(PORT, err => {
        if (err) throw err;

        console.log(`App running on port ${PORT} \n http://localhost:${PORT}`);
    });
});

1. Plz understand, before I add the 3 lines above. everything works great without issue. But as soon as I've added those 3 lines and tried yarn dev to start the app, I get the following:

Mooses-High-Sierra:1.dc_next_pwa_stage_7 moose$ yarn dev
yarn run v1.12.3
$ node server
/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/8-phase-new-design/1.dc_next_pwa_stage_7/i18n.js:1
(function (exports, require, module, __filename, __dirname) { import NextI18Next from 'next-i18next';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/8-phase-new-design/1.dc_next_pwa_stage_7/server.js:6:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

1. Then I alter my i18n.js file to the following (as the simple example has):

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

const NextI18NextInstance = new NextI18Next({
    defaultLanguage: 'en',
    otherLanguages: ['de', 'es'],
    localeSubpaths: false,
});

1. And this time when I start with yarn dev, it compiles and stops with the following:

✔ success server compiled in 4s 549ms
(node:90075) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property `allLanguages` of 'undefined' or 'null'.
    at _default (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/8-phase-new-design/1.dc_next_pwa_stage_7/node_modules/next-i18next/dist/commonjs/middlewares/next-i18next-middleware.js:29:7)
    at app.prepare.then._ (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/8-phase-new-design/1.dc_next_pwa_stage_7/server.js:23:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
(node:90075) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:90075) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

1. At this point I totally replace my server.js with the examples/simple/server.js and try to restart and get the exact error at above. What exactly I'm doing wrong? But when I remove the middle ware code, things work fine like here:
   https://dcnextpwa-oucwsvjrbu.now.sh/

Any help or guidance on this will be highly appreciated. Thanx in advance.

1. O'ya, here is my OS and Node version:

Mooses-High-Sierra:1.dc_next_pwa_stage_7 moose$ node -v
v8.12.0

1. Also, the following warning keeps showing up at the console even though I've declared the namespacesRequired array on every page:

Warn: You have not declared a namespacesRequired array on your page-level componen  t: Error. This will cause all namespaces to be sent down to the client, possibly n  egatively impacting the performance of your app. For more info, see: https://githu  b.com/isaachinman/next-i18next#4-declaring-namespace-dependencies

[isaachinman]

Please stop opening separate issues. Keep your questions contained to a single issue.

[isaachinman]

For Unexpected token import: https://github.com/isaachinman/next-i18next/issues/193#issuecomment-466316113

For the other problem: clearly NextI18NextInstance is undefined in your server file. I trust you can debug this and come back to us.

[ahmedmusawir]

I opened this ticket with details because you told me so and closed my first ticket. This is what I thought you are asking for ... Can you plz give me a little more details on what I need to do here. I could really use the help. Thanx.

[isaachinman]

Then I alter my i18n.js file to the following (as the simple example has)

If that is literally what your i18n.js file looks like, then you are not actually exporting the class. It's very hard to help you without a real example of your problem - your linked repo does not reproduce the issue.

[bndby]

I have same errors:

/var/www/html/bndby2/i18n.js:1
(function (exports, require, module, __filename, __dirname) { import NextI18Next from 'next-i18next'
                                                                     ^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/by/.npm/_logs/2019-02-25T20_06_41_750Z-debug.log
The terminal process terminated with exit code: 1

i18n.js from your example

import NextI18Next from 'next-i18next'

const NextI18NextInstance = new NextI18Next({
    defaultLanguage: 'en',
    otherLanguages: ['ru'],
    localeSubpaths: true
})

export default NextI18NextInstance

/* Optionally, export class methods as named exports */
export const {
    appWithTranslation,
    withNamespaces,
} = NextI18NextInstance`

[isaachinman]

Hi @bndby - transpiling your server code is up to you. You can search the Next repo, there are many people asking about how to do this.

[ahmedmusawir]

Hi, extremely sorry about the wrong link before, but here is the exact one that's causing the error and has all the files mentioned above in detail:
https://github.com/ahmedmusawir/dc-nexti18n-broken.git

Mooses-High-Sierra:dc-nexti18n-broken moose$ yarn dev
yarn run v1.12.3
$ node server
/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/temp/dc-nexti18n-broken/i18n.js:1
(function (exports, require, module, __filename, __dirname) { import NextI18Next from 'next-i18next';
                                                                     ^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any help or suggestion will be highly appreciated. Thanx in advance

[isaachinman]

Transpiling your server code is up to you. You can Google "nextjs transpile server".

[GainorB]

Was this ever solved? @ahmedmusawir I am getting the same error

(function (exports, require, module, __filename, __dirname) { import NextI18Next from 'next-i18next';

[isaachinman]

@GainorB What error are you experiencing?

[lucacattide]

To everyone: this works

[MSefer]

This works for me. This file doesn't transpile. Change your ES6 codes to ES5.

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

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'tr',
  otherLanguages: ['en']
})

module.exports = NextI18NextInstance

module.exports =  {
  appWithTranslation,
  withTranslation,
} = NextI18NextInstance