Next-i18next: Edge Support

[RizziWilliam]

It does support Edge?

[isaachinman]

CJS export targets latest Node. See the babelrc .

Also see #191.

If people want to request different targets for the CJS export, I will consider that.

[RizziWilliam]

I'm using the next-i18next, it do work's fine in chrome and firefox, but now on edge things are just not work. For example i have a title that uses the translation function, and now it just don't appears (if i inspect the dom tree the text is there). I go back to a point where the next-i18next wasn't being using yet and it do work's. You can check in here https://cwi.com.br/.

[isaachinman]

Do you understand my point about transpilation targets?

[RizziWilliam]

Not really. I have been looking in the code and find out that em the link component of next-i18next, there is a const with name 'as' and this is a reserved word and edge don't seen to work like chrome that accept it.

const { as, children, href: hrefProp, lng, nextI18NextConfig, ...props } = this.props;

I already try to use babel costume config from next.js to use @babel/plugin-transform-reserved-words but i don't think this work in file's in node modules.
Don't really know what to do to get this to work.

Update : Have been reading about transpilation targets, and i do know now what they are, but still don't understand that file you linked.

[isaachinman]

Hi @RizziWilliam. As far as I know, as is not a reserved word in JavaScript.

The file I linked is our babelrc, which tells Babel what targets we would like to transpile to. Our target for CJS is the latest Node, as I've said.

[isaachinman]

Depending on if this is a transpilation/JS-feature issue or some other sort of "reserved keyword" issue, we can decide how to proceed. Let me know.

[RizziWilliam]

Ok, i do found a away to get this to work, when using next we create a next.congif.js, in this file we have :

 webpack(config, options) {
config.module.rules.push({
      test: /\.(txt|jpg|png|svg|ico)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: '[path][name].[hash].[ext]',
            publicPath: '/_next',
          },
        },
      ],
    })
}

what i did was also put this inside webpack :

config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: [options.defaultLoaders.babel],
    })

Get into this by reading this https://github.com/zeit/next.js/issues/706

Thank you for your answers.

[isaachinman]

Yes that's correct - you're transpiling the dep to your specific target. That said, can you copy/paste your Babel settings? I'm fine to change our target to make this easier for you and others.

[RizziWilliam]

I actually don't have a custom babel config, it only uses the babel config from the next.js.
Looking in their docs, this is the config they use :

preset-react
plugin-proposal-class-properties
plugin-proposal-object-rest-spread
plugin-transform-runtime
styled-jsx

[isaachinman]

That's a really good point - we should transpile to the same target as Next.

[isaachinman]

Hey @RizziWilliam - with v0.36.0 we are transpiling the CJS output to the exact same target that NextJs does. This means if you don't want to transpile your deps you can consume next-i18next/dist/commonjs for the same browser support that NextJs delivers out of the box.

[2WheelCoder]

@isaachinman Thanks for your work here. My next app is being compiled to a static site using yarn run build and yarn run export. Unfortunately, Edge and IE failed with this error when I upgraded from 0.8.0 to 0.32.1:

SCRIPT 1028: Expected identifier, string or number

I just upgraded to 0.36.0 and updated my config file to use i18next/dist/commonjs:

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

const options = {
  defaultLanguage: 'en',
  otherLanguages: ['fr'],
}
module.exports = new NextI18Next(options)

Edge now loads correctly. IE has some other errors but they may not be related to this project. I think it'd be useful to document the commonjs target in the README for others who experience this same issue. Thanks!

[isaachinman]

Hi @2WheelCoder - a couple things:

This project does not support export explicitly as it breaks universal rendering. See the README.

Second, what exactly would you like to have added to the README? The example targets the CJS export.

[RizziWilliam]

Hey, going to update to the new version. Thank you for the attention on this issue 👍

[isaachinman]

@RizziWilliam Please let me know if it fixes your issue!

[RizziWilliam]

@isaachinman it's working as expected in edge (and the others browser's, didn't look IE). Doesn't need do put any code on next.config for this to work anymore. Thank you for the quickly fix.

[2WheelCoder]

@isaachinman Apologies, I missed that example.

I haven't added the site's second language yet. Looks like I'll have to think through my usage of this package when I do. I only need to toggle translations on the clientside so perhaps all I need is react-i18next, not this package...

[isaachinman]

@2WheelCoder One of the main reasons you might want SSR (especially in the context of localisation) is for indexing. Just something to keep in mind. Good luck in your exploration!

[isaachinman]

@RizziWilliam I am very glad to hear it.

[2WheelCoder]

Yeah, that's true. The main reason I went with Next was that I could switch over to SSR when we need it and that may be the trigger. But for the next month or so we are supporting only one language so the static site setup is simple to manage.

[isaachinman]

@2WheelCoder The new serverless stuff in v8 may be of interest to you.