search

aralroca / next-translate-plugin

Next-translate plugin for i18n in Next.js 🌍 - Load page translations and use them in an easy way!
MIT License
30 stars 17 forks source link

next-translate-plugin swaps the imports in the bundle #33

Closed brunoscopelliti closed 1 year ago

brunoscopelliti commented 1 year ago 
Ventura 13.3.1 (a) 
Node: 18.15.0

next: 13.4.5
next-translate: 2.3.0-canary.3
next-translate-plugin: 2.3.0-canary.3

next-translate-plugin causes error when used with react-hot-toaster in new next.js app folder. It looks like next-translate-plugin swaps the imports in the bundle.

I've created a fresh new repository (npx create-next-app@latest) in which you can replicate the issue. I'm attaching it here: bug-repro.zip. Follow these steps:

  1. Download the archive, unzip, cwd into it
  2. npm i
  3. npm run dev
  4. Visit localhost:3000
  5. Notice the error in the shell where you executed npm run dev:
- error node_modules/react-hot-toast/dist/index.mjs (244:19) @ eval
- error TypeError: next_translate_withTranslationClientComponent__WEBPACK_IMPORTED_MODULE_2__ is not a function
    at __webpack_require__ (/Users/bruno/Desktop/bug-repro/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/button-toast/index.tsx:11:73)
    at Module.(sc_client)/./src/components/button-toast/index.tsx (/Users/bruno/Desktop/bug-repro/.next/server/app/page.js:1703:1)
    at __webpack_require__ (/Users/bruno/Desktop/bug-repro/.next/server/webpack-runtime.js:33:43)

Despite the error, the page is loading fine. In fact, now, you should see something like:

bug-repro-image

  1. Click the "Test toast" button in the sample web app.
  2. Click the "Close" button, and look at DevTools console. You should see logged something like this:

bug-repro-image-2

It looks like next-translate is swapping the import in the bundle... and what should have been the default export of the react-hot-toaster library is something completely different.

aralroca commented 1 year ago

Probably is related with this one https://github.com/aralroca/next-translate-plugin/issues/30

aralroca commented 1 year ago

Can you try if this solves the problem? https://github.com/aralroca/next-translate/blob/master/docs/hoist-non-react-statics.md

brunoscopelliti commented 1 year ago

I can confirm this is likely related to #30; in fact I had the same problem also with ReactQueryDevtools. I did try what you suggested here, but unfortunately it didn't change nothing.

aralroca commented 1 year ago

I found the error 👍 thanks to report it

aralroca commented 1 year ago

@brunoscopelliti Should be fixed in next-translate-plugin version 2.3.0-canary.5. Would be great if you give here some feedback if is already solved. Thanks! 😊

brunoscopelliti commented 1 year ago

Thank you for the quick action. Would be glad to help testing it, but canary.5 isn't published on npm yet. Could you publish it?

aralroca commented 1 year ago

Is plublished! https://www.npmjs.com/package/next-translate-plugin?activeTab=versions !

brunoscopelliti commented 1 year ago

Ah, sorry, you were right - it's likely I tried to install 2.3.0-canary.5 also for next-translate (that doesn't exist). Anyway, I can confirm now the new version fixes this issue (and also the one with ReactQueryDevtools). Thank you

aralroca commented 1 year ago

Sounds good, thanks for the feedback