Not able to use `next-intl`'s createTranslator with Tailwind component #1244

Robin-Ln · 2024-01-25T12:11:36Z

Describe the Bug

i have this template :

export const MagicLinkEmail: FC<MagicLinkEmailProps> = ({ magicLink }) => {
  const t = createTranslator({
    locale: defaultLocale,
    messages,
    namespace: 'MagicLinkEmail'
  });

  return (
    <Tailwind>
      <Html>
        <Head />
        <Body>{t('preview')}</Body>
      </Html>
    </Tailwind>
  );
};

export default MagicLinkEmail;

in preview mode i have this error :

TypeError: extendStatics is not a function
 at <unknown> (/Users/rlouarn/git/programme-tz-2023/src/emails/magic-link-email.tsx:27:2)
 at __extends (/Users/rlouarn/git/programme-tz-2023/src/emails/magic-link-email.tsx:27:2)
 at <unknown> (/Users/rlouarn/git/programme-tz-2023/src/emails/magic-link-email.tsx:84536:2)
 at <unknown> (/Users/rlouarn/git/programme-tz-2023/src/emails/magic-link-email.tsx:84542:2)
 at Script.runInContext (node:vm:133:12)
 at Script.runInNewContext (node:vm:138:17)
 at Object.runInNewContext (node:vm:296:38)
 at getEmailComponent (webpack-internal:///(rsc)/./src/utils/get-email-component.ts:84:56)
 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 at async renderEmailBySlug (webpack-internal:///(rsc)/./src/actions/render-email-by-slug.tsx:31:20)
 at async Page (webpack-internal:///(rsc)/./src/app/preview/[slug]/page.tsx:27:34)

when i remove Tailwind it s work correctly :

export const MagicLinkEmail: FC<MagicLinkEmailProps> = ({ magicLink }) => {
  const t = createTranslator({
    locale: defaultLocale,
    messages,
    namespace: 'MagicLinkEmail'
  });

  return (
    <Html>
      <Head />
      <Body>{t('preview')}</Body>
    </Html>
  );
};

export default MagicLinkEmail;

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://gitlab.com/robin.louarn/programme-tz-2023

To Reproduce

nvm use
pnpm install
pnpm email:dev

Expected Behavior

see a preview of email

What's your node version? (if relevant)

20.11.0

The text was updated successfully, but these errors were encountered:

antoinerousseau · 2024-01-27T15:51:37Z

Same error with createIntl from @formatjs/intl when using <Tailwind>

gabrielmfern · 2024-01-28T06:01:20Z

@antoinerousseau Is it the same exact error or just a similar error?

ababol · 2024-01-28T17:08:20Z

@antoinerousseau Is it the same exact error or just a similar error?

(working with @antoinerousseau here 👋 )
=> Same error

gabrielmfern · 2024-01-29T10:04:37Z

After digging around a lot this should be fixed by #1124 which I have tested myself. Not sure how this is caused but some of the polyfills we have currently on tailwind are causing this—something to do with tslib. @ababol @antoinerousseau lmk if you are blocked by not using intl here cuz I can make a patch for you from #1124.

Also, the error overlay is just not helping here so I'm opening up a new PR #1264 to improve it to show something more accurate. Here's the actual stack trace:

antoinerousseau · 2024-01-29T12:31:43Z

Thanks @gabrielmfern! But no worries it's not urgent, meanwhile we developed our own minimalist preview that uses RSC and next-intl :)
I'll retry when your fix is out

ababol · 2024-01-30T13:53:56Z

Thanks @gabrielmfern!
Btw, we face another issue when using tailwind with media queries

Error: Tailwind: To use responsive styles you must have a element as a direct child of the Tailwind component.

#666 (comment) (see details)

It works perfectly in dev mode but not when we actually build the web app (next build / next start).
This happen when running renderAsync(<Component />) (@react-email/render)
Do you know if your PR actually fix this issue?

gabrielmfern · 2024-01-30T14:04:29Z

It works perfectly in dev mode but not when we actually build the web app (next build / next start).
Do you know if your PR actually fix this issue?

Nope, that's something else, someone also had this #1112

mmachatschek · 2024-01-31T14:44:37Z

After digging around a lot this should be fixed by #1124 which I have tested myself. Not sure how this is caused but some of the polyfills we have currently on tailwind are causing this—something to do with tslib. ababol antoinerousseau lmk if you are blocked by not using intl here cuz I can make a patch for you from #1124.

@gabrielmfern ist there any possibility to get a patch for this so we can test this? we also seem to run into this exact error.

gabrielmfern · 2024-01-31T15:27:03Z

@mmachatschek Sure, no problem.
Here's a gist of the patch for it

And here is a quick guide of how to apply it if you have any trouble

lmk if it works out for you

mmachatschek · 2024-02-02T11:23:56Z

@gabrielmfern the patch didn't solve the issue for me (we are not using the next-intl library but cloudinary-build-url. I do some further debugging of the exact reason.

justinnais · 2024-02-05T04:07:48Z

@gabrielmfern patch failed for me also. Using react-intl with the Tailwind component.

gabrielmfern · 2024-02-05T16:52:19Z

@mmachatschek @justinnais Could one of you give a reproduction for this? Seems like your issue is something else here 🤔

gabrielmfern · 2024-02-05T16:57:32Z

Also, were you not able to apply the patch or did it apply successfully but still fail when running?

I tried applying it myself and wasn't able to, so I've updated it and it should apply properly now

justinnais · 2024-02-05T23:15:32Z

Failed to apply. I'll retry the patch. What's the best way to provide you a repro @gabrielmfern?

mmachatschek · 2024-02-06T08:09:55Z

Also, were you not able to apply the patch or did it apply successfully but still fail when running?

I tried applying it myself and wasn't able to, so I've updated it and it should apply properly now

@gabrielmfern for me the patch applied correctly with pnpm

I'll provide a repro asap

mmachatschek · 2024-02-06T08:19:39Z

@gabrielmfern this is the reproduction repo: https://github.com/mmachatschek/react-email-repro-issue-1244

check the vercel-invite-user mail

gabrielmfern · 2024-02-06T18:17:45Z

@mmachatschek Thank you so much for providing the reproduction here, I applied the patch I sent before and the error wasn't gone. I then realized I sent the wrong patch here, I properly got the diff and swapped the patch with the proper one and it seems to be working fine even with your repro.
I just updated the gist and it should now work just fine. Sorry for the confusion here. cc @justinnais

Also from what I saw you had an issue applying the patch @justinnais; if you were using patch-package for it, you will need to make some changes to the patch which would be quite hard as it is kind of massive atm. I can look into making one specific to patch-package if you want to though, so lmk.

If you used pnpm I also had a few issues applying when copying it from the gist and pasting, maybe you can download and move it to your patches folder and it should work. 🤔

mmachatschek · 2024-02-06T18:45:21Z

@gabrielmfern I can confirm that the provided patch is working now 👍

gijsmin · 2024-03-12T07:57:38Z

When trying to apply your patch, I get the following error:

 ERR_PNPM_PATCH_FAILED  Could not apply patch /Users/user/project/email/patches/[email protected] to Users/user/project/email/node_modules/.pnpm/[email protected]_patch_hash=64x3xoqklzdoazybctmgozwdum_@[email protected][email protected]/node_modules/react-email

Any idea?

gabrielmfern · 2024-03-12T16:43:52Z

@gijsmin You need to apply the patch to @react-email/tailwind not to the react-email package.

tianyingchun · 2024-03-23T02:56:43Z

what's plan of this PR

Raphaww · 2024-04-25T22:20:52Z

a specific to patch-package patch would be appreciated since I cannot apply the patch even after modifying it, probably im doing something wrong but can't tell what.
Also, any news on the official release of this patch?
Thank you

Robin-Ln added the Type: Bug Confirmed bug label Jan 25, 2024

gabrielmfern added the Package: @react-email/tailwind label Jan 25, 2024

gabrielmfern changed the title ~~Tailwind error on preview app : TypeError: extendStatics is not a function~~ Not able to use next-intl's createTranslator with Tailwind component Jan 27, 2024

gabrielmfern linked a pull request Jan 28, 2024 that will close this issue

feat(tailwind): Smaller bundle size #1124

Closed

gabrielmfern mentioned this issue Mar 27, 2024

feat(tailwind): Smaller bundle size #1383

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not able to use `next-intl`'s createTranslator with Tailwind component #1244

Not able to use `next-intl`'s createTranslator with Tailwind component #1244

Robin-Ln commented Jan 25, 2024 •

edited by gabrielmfern

antoinerousseau commented Jan 27, 2024 •

edited

gabrielmfern commented Jan 28, 2024

ababol commented Jan 28, 2024

gabrielmfern commented Jan 29, 2024

antoinerousseau commented Jan 29, 2024 •

edited

ababol commented Jan 30, 2024 •

edited

gabrielmfern commented Jan 30, 2024

mmachatschek commented Jan 31, 2024

gabrielmfern commented Jan 31, 2024 •

edited

mmachatschek commented Feb 2, 2024

justinnais commented Feb 5, 2024

gabrielmfern commented Feb 5, 2024

gabrielmfern commented Feb 5, 2024 •

edited

justinnais commented Feb 5, 2024

mmachatschek commented Feb 6, 2024 •

edited

mmachatschek commented Feb 6, 2024

gabrielmfern commented Feb 6, 2024

mmachatschek commented Feb 6, 2024

gijsmin commented Mar 12, 2024

gabrielmfern commented Mar 12, 2024

tianyingchun commented Mar 23, 2024

Raphaww commented Apr 25, 2024

Not able to use next-intl's createTranslator with Tailwind component #1244

Not able to use next-intl's createTranslator with Tailwind component #1244

Comments

Robin-Ln commented Jan 25, 2024 • edited by gabrielmfern

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

antoinerousseau commented Jan 27, 2024 • edited

gabrielmfern commented Jan 28, 2024

ababol commented Jan 28, 2024

gabrielmfern commented Jan 29, 2024

antoinerousseau commented Jan 29, 2024 • edited

ababol commented Jan 30, 2024 • edited

gabrielmfern commented Jan 30, 2024

mmachatschek commented Jan 31, 2024

gabrielmfern commented Jan 31, 2024 • edited

mmachatschek commented Feb 2, 2024

justinnais commented Feb 5, 2024

gabrielmfern commented Feb 5, 2024

gabrielmfern commented Feb 5, 2024 • edited

justinnais commented Feb 5, 2024

mmachatschek commented Feb 6, 2024 • edited

mmachatschek commented Feb 6, 2024

gabrielmfern commented Feb 6, 2024

mmachatschek commented Feb 6, 2024

gijsmin commented Mar 12, 2024

gabrielmfern commented Mar 12, 2024

tianyingchun commented Mar 23, 2024

Raphaww commented Apr 25, 2024

Not able to use `next-intl`'s createTranslator with Tailwind component #1244

Not able to use `next-intl`'s createTranslator with Tailwind component #1244

Robin-Ln commented Jan 25, 2024 •

edited by gabrielmfern

antoinerousseau commented Jan 27, 2024 •

edited

antoinerousseau commented Jan 29, 2024 •

edited

ababol commented Jan 30, 2024 •

edited

gabrielmfern commented Jan 31, 2024 •

edited

gabrielmfern commented Feb 5, 2024 •

edited

mmachatschek commented Feb 6, 2024 •

edited