Firefox 34 Syntax Error

[fynncfchen]

🐛 Bug Report

Firefox 34 got syntax error, the file compiled by Babel are not use older syntax.

SyntaxError: missing ; before statement

Compiled file:

const arr = [];
const each = arr.forEach;
const slice = arr.slice;

function defaults(obj) {
  each.call(slice.call(arguments, 1), source => {
    if (source) {
      for (var prop in source) {
        if (obj[prop] === undefined) obj[prop] = source[prop];
      }
    }
  });
  return obj;
}

To Reproduce

1. Use i18next-xhr-backend for the first time with i18n.js

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init();

2. Open Firefox 34, the website is fine
3. Change to use i18next-http-backend

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init();

4. Open Firefox 34, got syntax error

Expected behavior

Use both i18next-xhr-backend and i18next-http-backend should be work fine.

Your Environment

• runtime version: Firefox 34
• i18next version: ^19.0.1
• os: Mac
• package.json

{
  "dependencies": {
    "@babel/runtime": "^7.7.6",
    "core-js": "^3.6.4",
    "i18next": "^19.0.1",
    "i18next-browser-languagedetector": "^4.0.1",
    "i18next-chained-backend": "^2.0.0",
    "i18next-http-backend": "^1.0.15",
    "i18next-localstorage-backend": "^3.0.0",
    "i18next-xhr-backend": "^3.2.2",
    "react": "^16.12.0",
    "react-i18next": "^11.2.5"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "babel-plugin-module-resolver": "^3.2.0"
  }
}

• .babelrc

{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3" }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

• .browserslistrc

Firefox 34

[adrai]

ohhh.... old browser version...
But I'm not able to reproduce it... I also tried v33...
Can you create a reproducable example?
Can you try a PR?
Or propose a concrete code change?

[fynncfchen]

Found a possible cause:

I use Parcel as our bundler, and the order they're use are

https://github.com/parcel-bundler/parcel/blob/060db2e2c56f08e223e9a9075035f0998e249763/packages/core/parcel-bundler/src/Resolver.js#L295

Means that the resolver will use a not-bundled version of package (./lib/index.js)

i18next-http-backend/package.json

Line 17 in 9c6a73b

"module": "./lib/index.js",

which using a ES6+ syntax.

That's very different from the i18next-xhr-backend:

https://github.com/i18next/i18next-xhr-backend/blob/d9a3daa6fd199b93430cb81860d197030188806a/package.json#L6

which use a bundled version of package:

import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _typeof from '@babel/runtime/helpers/esm/typeof';

var arr = [];
var each = arr.forEach;
var slice = arr.slice;
function defaults(obj) {
  each.call(slice.call(arguments, 1), function (source) {
    if (source) {
      for (var prop in source) {
        if (obj[prop] === undefined) obj[prop] = source[prop];
      }
    }
  });
  return obj;
}

There's a solution to solve this problem: use a browser field in package.json to tell a bundler to use for browser:

https://parceljs.org/module_resolution.html#package.json-%60browser%60-field

I suggest to provide a migration notes in document for replacing the deprecated i18next-xhr-backend with a different Behavior.

[adrai]

A little question: Is your parcel setup not babeling the files? (I've never used parcel)

[fynncfchen]

AFAIK the current stable version (v1) of Parcel doesn't have the option to include some of the package should be compiled, which means we should assume that all packages in node_modules are bundled.

Another approach to solve this issue is to import the cjs version of this package explicitly:

import Backend from 'i18next-http-backend/cjs';

[adrai]

Ok, didn't know Parcel is not able to transpile it... ok...
importing import Backend from 'i18next-http-backend/cjs'; is a valid solution 👍

[fynncfchen]

Unfortunately after some clean up and test, I found the solution from above not work anymore, even if I use

import Backend from 'i18next-http-backend/i18nextHttpBackend';

I think it might not to use any require in a bundled version CJS module, should be like i18next-xhr-backend do - bundle an internal AJAX inside.

because I got this new message:

TypeError: global.fetch is undefined

I'll go back to use i18next-xhr-backend anyway.

[adrai]

@fynncfchen if you create a reproducable example I can try to help.
i18next-xhr-request will not get any more updates, so it would be better to fix this here...

[fynncfchen]

I found it's hard to reproduce by myself also, sorry.....
I'll dig into my project to find the real problem and feedback to you, thanks for help!

[adrai]

This is my playground: https://github.com/adrai/parcel-example-i18next-http-backend
maybe you can reproduce it there

[fynncfchen]

Good news! I finally can reproduce what I've got!
https://github.com/fynncfchen/i18next-http-backend-issue
You can yarn then yarn start and see if the dist folder has a getFetch.[hash].cjs, also check at i18next-http-backend-issue.[hash].js you can find some ES6+ syntax there.
Open http://localhost:1234 on Firefox 34, you can see an syntax error just what I've reported.

[adrai]

This is because you’re importing like: import Backend from "i18next-http-backend";
Try: import Backend from "i18next-http-backend/cjs";

[adrai]

If you need a transpiled source (seems by default for parcel this is the case), you need to import /cjs

[fynncfchen]

I'm not sure what happened but after I deleted yarn.lock and re-install all packages, the /cjs version works on my project.
Maybe the problem coming from the dependence tree....

[adrai]

In your example: https://github.com/fynncfchen/i18next-http-backend-issue
you are not importing cjs

[fynncfchen]

I know, when I importing cjs in my example and it works, but in my real project it failed. I think the dependencies are different.

[fynncfchen]

I found that ^1.0.8 not work for cjs, but the latest version works!

[adrai]

fyi: With the latest version importing with /cjs should not be necessary anymore.