Compatibility with Next.js 9

[aralroca]

I'm using next-transpile-modules to transpile just one library:

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

// ..

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

This was working fine in Next.js 8. However, after migrate to Next.js 9 now I have some errors related with the imports of the next-i18next are undefined and crash all the app.

If I replace transpileModules: ['next-i18next'] to transpileModules: [] it works fine. However, I want to transpile this library because it have some arrow functions and they are not working fine in IE11...

Relates with i18next/next-i18next#382 (comment)

[martpie]

I did not experience any trouble with Next.js 9 on my setups. 🤔

It is not the first time I see the misconception to use this plugin as a IE11 polyfiller (it's not the case!). But let's try if we can fix it.

How do you polyfill your app? core-js? babel-runtime?

[aralroca]

@martpie I'm using core-js to pollyfill my app

polyfills.js

import 'core-js/es6/object'
import 'core-js/es6/array'
import 'core-js/es7/array'

And this webpack config in my next.config.js:

 webpack(conf) {
    const originalEntry = conf.entry

    conf.entry = async () => {
      const entries = await originalEntry()

      if (entries['main.js']) {
        entries['main.js'].unshift('./core/polyfills.js')
      }

      return entries
    }

    return conf
  },

My babel config is from next/babel

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    }
  }
}

It is not the first time I see the misconception to use this plugin as a IE11 polyfiller (it's not the case!). But let's try if we can fix it.

I'm sure that is not the best usage of this library. After hours fighting with IE11 problems caused only by the next-i18next package, this library helped me to workaround it... But I always feels that is not the best way. Maybe you can provide me some better tip?

[aralroca]

I created a repo that is reproducing the issue: https://github.com/aralroca/next-9-issue

To reproduce it

• Clone the repo
• npm i && npm run dev
• Open localhost:3000 in the browser

FAILS...

Ways to "fix it"

• Change in next.config.js the transpileModules: ['next-i18next'] to transpileModules: []. Run again npm run dev. WORKS.
• Change Next.js version from 9, to 8. WORKS.

[martpie]

Thank you, the repro will help a lot. I am currently overwhelmed, so I cannot promise when I'll have a look, but I'll do my best!

[aralroca]

Ok 🙂Thank you so much. I confirm that the problem is still happening with the latest next v9.0.1.

[martpie]

Can you tell me exactly what ES feature is not working in IE11 with next-i18next?

[martpie]

Okey, I did some tests, and tried to debug it, it does not seem it's because of next-transpile-modules but because of Next.js itself of next-i18next compilation not following the same targets as Next 9.

• Babel doesn't polyfill according preset-env i18next/next-i18next#290
• Polyfill documentation vercel/next.js#4572 (comment)
• The app throws in IE11 because of includes(), find() and assign() i18next/next-i18next#107

I'll follow those issues to see if anything happens.

Also, it is worth noticing that next-i18next targets the same browsers as Next.js, so I think the issue comes from there 🤔

Maybe you did not correctly setup core-js in your app?

[martpie]

TL,DR: Next.js targets IE11, next-i18next as well (in theory), so transpiling next-i18next with next-transpile-modules seems like an overkill, and the problem comes probably from upstream.

I'll close this, if you have some disagreements or new information, I'll gladly re-open it.

[martpie]

Next-i18next is now compatible with Next.js 9 https://github.com/isaachinman/next-i18next/releases/tag/v0.46.0

[martpie]

And here you are for the IE11 compatibility i18next/next-i18next#290 (comment)