Build fails with Vite and other rollup-based bundlers

🐛 Bug Report

Vite is a blazingly fast bundler and is being increasingly used amongst devs. I’ve recently gotten the product team at our company to use it more because webpack-dev-server can get extremely slow for large projects.

In production mode, Vite uses rollup internally to bundle code. The problem is, it seems that this library specifically is causing builds to fail with runtime errors on initial load.

To save you some time, I’ve already done a little bit of research and figured out the root of this problem. node-fetch is somehow being bundled into the browser in rollup. Thus the runtime errors are from trying to access non-existent node libs in the browser.

To Reproduce

Pull from this test repo: https://github.com/diracs-delta/i18next-http-backend-rollup-demo

And then run

yarn
yarn vite build && yarn vite preview

and navigate to localhost:5000.

Expected behavior

i18next plugins should be compatible with the latest bundlers and not sometimes import node-fetch on accident.

Your Environment

• runtime version: node 15, any
• i18next version: see package.json
• os: Mac

[dlqqq]

I moved the conditional within the if statement to a console log, which returned false. VIte might not be optimized enough to detect that, and is still trying to bundle node-fetch. Nevertheless, I think you are right. A dynamic import is not the answer. I truthfully don’t know enough about CJS to understand what’s actually going on here.

I’ll reach out to Vite and link them this issue, but it might be worth considering using cross-fetch instead of trying to re-invent the wheel here. cross-fetch seems to work just fine on Vite, so if it isn’t too much of a change, perhaps i18next-http-backend could switch to using cross-fetch?

[dlqqq]

@adrai It’s fixed! Thank you so much! We can use i18next in our production builds now. I’ll let the Vite community know that this update will fix their builds. 👍