Usage with Webpack and Typescript importing cjs instead of esm

🐛 Bug Report

A project setup with Typescript (targeting es5) and Webpack seems to be causing i18next-http-backend to be loaded via require which is configured to load the library from the cjs distribution.

If I chage my import to import i18nextHttpBackend from "i18next-http-backend/esm"; it works as expected, but then TypeScript cannot find the type declaration.

To Reproduce

Sandbox: https://codesandbox.io/s/re1sn (run npm start if not already running)

https://re1sn.sse.codesandbox.io/ (should show something like defaultBackend is undefined and esmBackend is function)

Expected behavior

import i18nextHttpBackend from "i18next-http-backend"; to result in i18nextHttpBackend !== undefined.

Your Environment

• runtime version: node v14
• i18next version: 20.1.0
• i18next-http-backend version: 1.2.1

[pedrodurek]

Hey @villasv, This seems to be the problem: https://github.com/i18next/i18next-http-backend/blob/master/package.json#L7-L19

It’s basically saying that if you import the library using es6 syntax (before compiling your code), it’ll fallback to ./esm/index.js, and as you specified that your target is es5, it’ll not include the ./esm/index.js file, only ./cjs/index.js. That’s why is returning undefined.

import defaultBackend from "i18next-http-backend"; // Returns undefined

However, if you rely on the es5 syntax (require), it works! That’s because it’s pointing to ./cjs/index.js now.

const defaultWithRequire = require("i18next-http-backend"); // Returns the proper object

Here is an example: https://codesandbox.io/s/i18next-cjsvsesm-forked-6wypj?file=/src/App.tsx

This “export” rule should not be considered before your code is compiled.

I’ll see what I can do in the coming days. Let’s keep this issue opened for now.

[adrai]

I’m not a TypeScript user, but probably this is because of the target option “es5” in the tsconfig.json ? You may want to change that to es6?