xrutayisire / react-js-cron

A React cron editor built with antd
https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo
MIT License
238 stars 105 forks source link

Vite + react-i18next issue #17

Closed codrin-iftimie closed 2 years ago

codrin-iftimie commented 2 years ago

Describe the bug When using the production mode from vite combined with react-i18next we get a weird issue where _typeof (babel) function is no longer defined properly. If I comment either this component or react-i18next usage the build version works. I've enabled the source maps to help out with the debug process but its a bit overwhelming for me to check the entire code of this codebase. I found that the LocaleProvider from antd might be the culprit.

To Reproduce Steps to reproduce the behavior:

  1. git clone https://github.com/codrin-iftimie/antd-vite-trial
  2. npm i
  3. npm run dev - (works)
  4. npm run build && npx serve dist (no longer works)

Expected behavior Definitely, it should not break the build when adding this library to an existing stack.

Versions (please complete the following information): Latest versions of everything. Check the package.json

Let me know if there is more info I can provide and thanks for this wonderful component! Later edit: Lowering the version of antd to 4.10.3 no longer breaks the build >.<

xrutayisire commented 2 years ago

Hello,

Thanks for using this library, and thanks for the issue! 🙂

I'm able to reproduce your bug with your test repository, but I didn't understand why. So I decided to check if it was working with the same dependencies on a code sandbox to see if it could possibly be a build problem. When I said build I talk about packages, typescript and build management.

Here is the link of this Cron component with react-i18next perfectly working: https://codesandbox.io/s/test-react-js-cron-i18next-sn3z7?file=/src/App.tsx

So I guess the library is working with react-i18next, and it's something else in your work that create the issue. Maybe you can try to reproduce with another way to build. Maybe you can try with a basic create-react-app with only the required dependencies.

For the moment I don't have any clue about why the bug happen since it's working in the codesandbox example.

codrin-iftimie commented 2 years ago

Thank you for the quick reply. Maybe I haven't described the bug correctly. The library works well in dev mode (which I'm guessing the code sandbox uses). There is no compatibility issue there.

The problem arises when the actual code is bundled and minimized. I have no idea why this happens.

Weirdly enough when lowering the antd version (4.10.x) I was no longer able to reproduce the bug (bundled version works). In my case, I'm trying to update all libraries to the latest version to remove any security issues libraries might have.

xrutayisire commented 2 years ago

Hum I'm not sure either if code sandbox use dev mode or prod mode.

What I was talking about is I think the problem come from the way you're building your project. I checked with a create-react-app build, and it's working in production mode.

Here is the test repository: https://github.com/xrutayisire/react-js-cron-i18next

So you should try to see why you have a problem with vite. I will also try to find the problem (and a solution :D), but I don't have a lot of time

xrutayisire commented 2 years ago

I was not able to reproduce with create-react-app, so I still assume it's a build problem. Did you have time to take a look to find out why your build create this problem?

codrin-iftimie commented 2 years ago

I test with cra as well. Seems to be working both dev and production build. Closing. Might be something upstream. Thanks!

codrin-iftimie commented 2 years ago

Just in case some1 else encounters this: Check this code https://github.com/codrin-iftimie/antd-vite-trial/commit/8c767582ad19201ed3a5564fe76f8bb1ac977c0b#diff-6a3b01ba97829c9566ef2d8dc466ffcffb4bdac08706d3d6319e42e0aa6890ddR4

You have to force vite to use the "lib" directory. Also to have this working I had to actually use at least one antd component in my application.

I have no idea why I encountered this issue and why in CRA works without any issue. To help out ppl using this keywords: Vite, react-i18next, react-js-cron and and play well on this latest master of antd-vite-trial