React-i18next: Hooks - SyntaxError: Unexpected token export

[rodrigooler]

https://react.i18next.com/experimental/using-with-hooks

I'm trying to follow the new documentation that came out using the i18n with hooks. But unfortunately the error below occurs

Error:

/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/node_modules/react-i18next/hooks.js:1
(function (exports, require, module, __filename, __dirname) { export * from './dist/es/hooks';
                                                              ^^^^^^

SyntaxError: Unexpected token export
    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:656:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.react-i18next/hooks (/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/.next/server/static/development/pages/_document.js:667:18)
    at __webpack_require__ (/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/.next/server/static/development/pages/_document.js:23:31)
    at Module../utils/i18n.ts (/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/.next/server/static/development/pages/_document.js:545:77)
    at __webpack_require__ (/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/.next/server/static/development/pages/_document.js:23:31)
    at Module../pages/_document.tsx (/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/.next/server/static/development/pages/_document.js:423:69)
    at __webpack_require__ (/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/.next/server/static/development/pages/_document.js:23:31)
/Users/rodrigooler/projects/x-workstation/x/core/web-frontend/node_modules/react-i18next/hooks.js:1
(function (exports, require, module, __filename, __dirname) { export * from './dist/es/hooks';

i18n.js

import i18n from 'i18next';
import { initReactI18n } from 'react-i18next/hooks';
​
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
// not like to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init
​
i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18n)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,
​
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
​
    // special options for react-i18next
    // learn more: https://react.i18next.com/components/i18next-instance
    react: {
      wait: true
    }
  });
​
​
export default i18n;

My dependencies

  "dependencies": {
    "@zeit/next-typescript": "1.1.1",
    "axios": "0.18.0",
    "date-fns": "1.29.0",
    "i18next": "11.3.2",
    "i18next-browser-languagedetector": "2.2.3",
    "i18next-xhr-backend": "1.5.1",
    "idx": "2.4.0",
    "next": "7.0.2",
    "prop-types": "15.6.2",
    "react": "16.7.0-alpha.0",
    "react-autocomplete": "1.8.1",
    "react-dom": "16.7.0-alpha.0",
    "react-i18next": "8.3.0",
    "reworm": "2.0.2",
    "styled-components": "3.4.10"
  },

[rodrigooler]

I was able to resolve the above error using the following import.

import { initReactI18n } from 'react-i18next/dist/commonjs/hooks'

[jamuhl]

could you please retry with [email protected]

and more important what's your opinion on the changes (if you used previous react-i18next versions to have a comparison)

[jamuhl]

v8.3.3 removes the ready value in favour to use react Suspense -> sample and docs were updated

[jamuhl]

that's weird. hm...do you use it in an older webpack environment...means does the sample work: https://github.com/i18next/react-i18next/tree/master/example/react-hooks

[newsiberian]

Hi, @jamuhl, no, I have everything latest. I receive this error while backend starts.

Also, if I change routes to dist/commonjs/... I receive the following error:

SERVER: SSR rendering: TypeError: Cannot read property '0' of undefined
    at .../node_modules/react-i18next/dist/commonjs/hooks/useT.js:54:49

Languages are not yet defined while SSR loads
return i18n.hasResourceBundle(i18n.languages[0], n);

[jamuhl]

@newsiberian the experimental version is not yet ready to be used with next.js - we will add that support for v10 - before / or close to react 16.7 release

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project :pray:

[newsiberian]

sure, I'm using i18next for several years. btw, I'm not using next.js. I'm using another boilerplate with ssr supported.

[jamuhl]

@newsiberian you might watch/subscribe https://github.com/i18next/react-i18next/issues/591 to get informations when SSR support lands

[rodrigooler]

@jamuhl is partially working fine here with nextjs, just did not create the server.js file with the i18n configuration. I'm looking forward to an update with more up-to-date support for nextjs. But for now it seems to work well here.