Next-i18next: Babel doesn't polyfill according preset-env

[StarpTech]

Describe the bug

As mentioned in https://github.com/isaachinman/next-i18next/issues/107 I expected that es6 functions are polyfilled but it's not. If you check the dist/es/utils/lng-path-corrector there is no polyfill for Array.includes. This throws in IE Edge.

[isaachinman]

We transpile to the same target that NextJs does. Polyfilling is up to the user. Am I misunderstanding?

[StarpTech]

mmh.. babel doesn't transpile ǹode_modules by default. Any idea how I can solve it with current nextjs version? I tried the with-polyfill example but it doesnt work.

[isaachinman]

Transpiling and polyfilling are two separate concerns. See https://github.com/zeit/next.js/issues/4572#issuecomment-395960145.

Ideally we'd like to support all browsers that NextJs does out of the box as well.

Does this throw in IE11? If so, we can think about improving that.

[StarpTech]

Yeah, I already read it but it doesn't answer my question how to polyfill a third party lib with a regular next setup. From my understanding next-i18next should provide a compatible version for all browsers because it's not part of the next babel process right?

[isaachinman]

a compatible version for all browsers

No, absolutely not. We aim to support the same subset of browsers that NextJs does.

[StarpTech]

Sry, I mean all browsers that NextJs supports, that includes ie11+.

[isaachinman]

If next-i18next breaks in IE11, please provide a detailed report and we'll fix it.

[StarpTech]

I could fix it by adding the

import 'core-js/es6/object'; // object.assign
import 'core-js/es6/array'; // ...
import 'core-js/es7/array'; // array.includes

to the polyfills.js as shown in the with-polyfill example. We should add it to the readme.

[kachkaev]

Related: https://github.com/isaachinman/next-i18next/issues/107

IMO this lib does not have to support IE11 out of box but for any steps enabling that, a section in README would be helpful.

[StarpTech]

I'm corious how it works if you import these as functions /fn/... . From my understanding in that way it can't work because the prototype isn't touched.

[StarpTech]

@isaachinman at the end the module will fail due to exact such missing methods. This means next-i18n doesn't support the same browsers as nextjs. I'm fine with documenting it in the Readme. I will send a PR.

[isaachinman]

As I've stated, I'd very much like for this package to support the exact same browsers that NextJs does, because this package is an enhancement _on top of_ NextJs.

[abelsoares]

I think you guys really need to figure this out, otherwise, this module becomes a little useless.

[isaachinman]

Hi @abelsoares, welcome. This is open source software and is developed in the free time of contributors. Feel free to contribute yourself.

[aralroca]

I have a similar problem in IE11 with arrow functions. Looks that they are not transpiled by babel...

[isaachinman]

@aralroca Which target are you consuming, commonjs or es?

[aralroca]

@isaachinman I have an independent file with all the things of i18n (including NextI18Next instance) with commonjs, because also my custom server with node v11 is consuming the instance with:

const { i18n } = require('../i18n')
// ...
server.use(nextI18NextMiddleware(i18n))

Do you think this should be fixed changing node 11 to node 12 (that I see that support es modules): http://2ality.com/2019/04/nodejs-esm-impl.html and replacing common.js to es modules everywhere?

I share my .babelrcif it can help

{
  "env":{
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "plugins": [
        ["transform-es2015-modules-commonjs"]
      ],
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    },
    "storybook": {
      "plugins": [
        ["transform-es2015-modules-commonjs"]
      ],
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}

[isaachinman]

I think you misunderstood my question. This package, next-i18next, transpiles to two separate targets.

Upgrading your Node version is not going to do anything for your browser support. You'll need to do one of these things:

1. Transpile your node_modules
2. Use runtime polyfills
3. Submit a PR on this repo's babelrc

[aralroca]

@isaachinman I know that the problem is not with the Node version itself, however, I'm using a shared file between server and browser in common.js with:

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

//...

const i18n = new NextI18Next({
  customDetectors: [langFromDomain],
  defaultLanguage: DEFAULT_LOCALE,
  localeSubpaths: 'all',
  otherLanguages: LOCALES,
  pluralSeparator: '_',
  simplifyPluralSuffix: true,
  loadPath: `${BASE_URL_STATICS}/static/locales/{{lng}}/{{ns}}.json`,
  detection: {
    order: ['querystring', 'cookie', 'from-domain', 'navigator'],
  },
})

So the browser also is using the require('next-i18next').default instead of import. Can be this the problem?

[aralroca]

@isaachinman I finally fixed transpiling only the next-i18next library with this in my next.config.js file:

const withTM = require('next-transpile-modules')

// ...

module.exports = withTM({
  transpileModules: ['next-i18next'],
  ...nextConfig,
})

Thank you for your time! Was a big help :)

[isaachinman]

@aralroca Which target are you importing? Our cjs target is also next/babel.

[aralroca]

@isaachinman as target are you refering to this?

"browserslist": [
    "last 2 versions",
    "> 1%"
  ]

My babel conf is simple:

{
  "env":{
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "plugins": [
        ["transform-es2015-modules-commonjs"]
      ],
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    },
  }
}

[isaachinman]

Yes, that's what I'm referring to. next-i18next transpiles to the same target that NextJs transpiles to. That said, there may be language features like Object.values which need to be polyfilled or transpiled themselves.

[isaachinman]

I've now brought the simple example online via Heroku and have updated the README. I've allocated a domain and the live demo can be found at next-i18next.com.

We can use this domain to do browser testing, etc, going forward.

[isaachinman]

BrowserStack has been kind enough to support the project and I've had a chance to test this in IE11. Should be fully supported with #402.