Fallback to node-fetch in browser about i18next-http-backend HOT 18 CLOSED

Strange, there's also a dedicated test to test non-fetch environments: npm run test:xmlhttpreq
Can you create a reproducable example?

from i18next-http-backend.

Okay, I see where the issue is coming from. I am using webpack and it supports CommonJS so require is available in that context, therefore it is able to export node-fetch.
I assume you don't have such a setup in your test env and that is why you don't experience with this problem.

//getFetch.cjs
if (typeof require !== 'undefined') {
  var f = fetchApi || require('node-fetch')
  if (f.default) f = f.default
  exports.default = f
  module.exports = exports.default
}

Do you still need an example or is this description provides enough context?

from i18next-http-backend.

Any idea how this could be fixed?

from i18next-http-backend.

Could we check if it is node env maybe

const isNode =
  typeof process !== 'undefined' &&
  process.versions != null &&
  process.versions.node != null;

But as I see you support Deno as well, so in that case I don't know if it will work maybe better to check if it is NOT a browser, like

const isBrowser = 
  typeof window !== 'undefined' && 
  typeof window.document !== 'undefined';

I did not check this, but I suppose the tests should fail if it is not the right check.

from i18next-http-backend.

Can you test this in your environment?
just modify it directly in the node_modules...
I think this will not work, because when running webpack this is node that runs it...

from i18next-http-backend.

These solutions could work

const isNode =
  typeof process !== 'undefined' &&
  process.versions != null &&
  process.versions.node != null;

if (isNode && !fetchApi && fetchNode) fetchApi = fetchNode.default || fetchNode

or

const isBrowser =
  typeof window !== 'undefined' &&
  typeof window.document !== 'undefined';

if (!isBrowser && !fetchApi && fetchNode) fetchApi = fetchNode.default || fetchNode

Only now the XHR request fall into the error case as x.statusText === "OK" in

//lib/request.js
callback(x.statusText, { status: x.status, data: x.responseText })

and it is handled as err by

//index.js
    this.options.request(this.options, url, undefined, (err, res) => {
      if (res && res.status >= 500 && res.status < 600) return callback('failed loading ' + url, true /* retry */)
      if (res && res.status >= 400 && res.status < 500) return callback('failed loading ' + url, false /* no retry */)
      if (err) return callback(err, false)

But it could be tackled as a different bug I assume

from i18next-http-backend.

This sounds all a bit hacky...
So to recap... You have this only in cypress?
I don't know cypress.
I would love to have a small reproducable example. Is it possible for you to create it?

from i18next-http-backend.

Yep it is getting too confusing. I will put something together in next week.

Anyway thank you for the fast responses!

from i18next-http-backend.

alternatively, you could try to omit the require of node-fetch, with something like https://webpack.js.org/plugins/ignore-plugin/

from i18next-http-backend.

Hi @adrai

I just pushed a really simple example to reproduce the issue:
https://github.com/defko/i18next-xhr-webpack

from i18next-http-backend.

should be fixed with v1.0.14

from i18next-http-backend.

Thank you @adrai

from i18next-http-backend.

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 🙏

from i18next-http-backend.

Hi @adrai,

First of all thank you for the quick fix, but looks like there is still an issue with a current solution. You can check the same example. As you can see there, the translation is still not working.

After a quick debug the issue is the XHR request set the error even if the request is success.
See loadUrl function in index.js,

 this.options.request(this.options, url, undefined, (err, res) => {
     // Here err==='OK'
      if (res && res.status >= 500 && res.status < 600) return callback('failed loading ' + url, true /* retry */)
      if (res && res.status >= 400 && res.status < 500) return callback('failed loading ' + url, false /* no retry */)
      if (err) return callback(err, false)

Do y want me to open a different bug for this?

from i18next-http-backend.

sorry, I missed that... will fix it asap

from i18next-http-backend.

should be fixed with v1.0.15

from i18next-http-backend.

Thanks! It is working flawlessly now

from i18next-http-backend.

Nice to hear 👍

from i18next-http-backend.