Next-i18next: Use webpack or rollup to export package properly

[Renaud009]

Tried to integrate simple example in my code base today and ran into that error "export 'withNamespaces' was not found in '../i18n'

i18n.js:

import NextI18Next from 'next-i18next'

const options = {}
export default new NextI18Next(options)

next-i18next: v0.23.1
i18next: v.14.0.1
react-i18next: v9.0.9
next: v7.0.2
react: v16.6.3
node: v11.6.0
npm: v6.6.0

[RobinDvorak]

You can use this workaroud:

const i18n = new NextI18Next(options);
export default i18n;
export const withNamespaces = i18n.withNamespaces;
export const Link = i18n.Link;
export const Trans = i18n.Trans;
export const appWithTranslation = i18n.appWithTranslation;
export const config = i18n.config;

[isaachinman]

Good catch.

I wasn't aware that module.exports = works for a class, but export default does not. Always something new to learn with the different module systems.

@capellini @lucasfeliciano Does anyone have a proposed solution for this, besides simply changing the docs?

[capellini]

@isaachinman Here's what I think is the standard solution:

1. Build two copies of next-i18next -- one with CommonJS and another with ES modules (let's say the CommonJS build goes into /dist/cjs and the ES modules build goes into /dist/es).
2. Change "main" in package.json to "main": "dist/cjs/index.js"
3. Add a "module" (and, probably for thoroughness, even though it seems finicky and now obsolete "jsnext:main") entry in package.json - "module": "dist/es/index.js"

[isaachinman]

@capellini At the moment, our dist/index.js has exports that look like:

exports.default = NextI18Next;
module.exports = exports.default;
module.exports.default = exports.default;

Is this not sufficient? Can you provide an example of a cjs and es combined export approach that isn't too complicated? We'll be using babel for the foreseeable future - TypeScript rewrite is not going to happen until we're stable.

[isaachinman]

So far I've avoided getting into more complicated build tools with this project because it was completely experimental. A lot of people seem to be using it now, and I think we're going to need a proper webpack or rollup solution.

[capellini]

@isaachinman Sorry on the delay. I had tried earlier this morning to get an example of using cjs and es combined approach up, but got lost in babel plugins and presets, named vs. default exports, etc. and was not able to come up with something.

It looks from the :+1: on the above comment that the doc fix appears to be a good workaround. If I can come up with something that works, I'll post it.

I think we're going to need a proper webpack or rollup solution.

I think you may be right.

[isaachinman]

doc fix appears to be a good workaround

What do you mean, exactly?

I'd like to use rollup on this project. I will set it up as time allows.

[capellini]

What do you mean, exactly?

Replying to this comment:

Does anyone have a proposed solution for this, besides simply changing the docs?

At the moment, I don't have a proposed solution besides changing the docs.

I'd like to use rollup on this project. I will set it up as time allows.

:+1:

[isaachinman]

An important consideration here is that we also need to export next-i18next-middleware separately. I'm not sure how that's going to work - to support all possible import paradigms we'll need to leverage main, module, and browser via package.json. We won't be able to do that for next-i18next-middleware unless we make it into a sub-package or move it to its own repo.

[lucasfeliciano]

You can assign me to this one @isaachinman

[isaachinman]

A bit of an update: I've made good progress on a rollup solution that will support es, cjs, umd, amd, and iife. I've committed those changes to a branch called rollup. It's still very much a WIP and needs to be cleaned up, but it is a good proof of concept.

That being said, I've realise we are never going to be able to support named exports out of the box. That's just the way the package works. Because of this, I've updated the docs to be a lot more explanatory with 83ca225.

@lucasfeliciano I was writing this update as you commented - most likely I will be able to handle this one alone, but would appreciate your feedback at some point. Thanks.

[lucasfeliciano]

Nice!

Build with rollup will be a nice improvement. Count with me!

[isaachinman]

See #159 for my current thoughts.

[isaachinman]

I'll be merging #159 soon, but in general there's no way to get named exports off a class with ES modules without explicitly declaring them.

If anyone has any questions let me know.

[rdewolff]

You can use this workaroud:

const i18n = new NextI18Next(options);
export default i18n;
export const withNamespaces = i18n.withNamespaces;
export const Link = i18n.Link;
export const Trans = i18n.Trans;
export const appWithTranslation = i18n.appWithTranslation;
export const config = i18n.config;

Thanks, that fixed the import issue I had from my server file.

[ali-turki]

TypeError: Cannot read property 'cloneInstance' of undefined

[husseinbob]

TypeError: Cannot read property 'cloneInstance' of undefined

me too since updating to:

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

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

module.exports = {
  default: NextI18NextInstance,
  withNamespaces: NextI18NextInstance.withNamespaces,
  Link: NextI18NextInstance.Link,
  Trans: NextI18NextInstance.Trans,
  appWithTranslation: NextI18NextInstance.appWithTranslation,
  config: NextI18NextInstance.config,
};

[isaachinman]

Hi @husseinbob. This CodeSandbox runs that exact code without issue. Please post on StackOverflow for help requests.

[mstankov]

@husseinbob @isaachinman seems like exporting only the given properties causes the issue - i18next isn't passed to the middleware's handle function (thus the undefined error)

Fixed it for me by exporting the entire instance:

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

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'bg',
  otherLanguages: ['en'],
  ignoreRoutes: ['/_next/', '/static/', 'robots.txt']
});

module.exports = NextI18NextInstance;

[tomq123]

TypeError: Cannot read property 'cloneInstance' of undefined

export const i18n solves the problem:

import NextI18Next from 'next-i18next'
const NextI18NextInstance = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['pl']
})

export default NextI18NextInstance

export const {
  appWithTranslation,
  Link,
  Trans,
  config,
  withTranslation,
  i18n,
} = NextI18NextInstance