react-email: Not able to use `next-intl`'s createTranslator with Tailwind component
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
About this issue
- Original URL
- State: open
- Created 5 months ago
- Reactions: 4
- Comments: 22
Same error with
createIntlfrom@formatjs/intlwhen using<Tailwind>@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-packagefor 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
pnpmI 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 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
what’s plan of this PR
@gabrielmfern I can confirm that the provided patch is working now 👍
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:
(working with @antoinerousseau here 👋 ) => Same error