How does hot-reload work with dynamic imports?

[Maclay74]

Hey, I'm trying to adopt the solution for our corporate needs (we need some integration from api side and tools like language switcher, etc) and I tried the same approach with dynamic imports of emails into the preview.

The problem is, when I change the email, it indeed recompiles the file, but doesn't kick off hot-reload. I have to reload the page manually to see changes in email.

Moreover, if I run my app with "turbo", it works, but turbo has broken dynamic imports (it always imports the same file), so I can't use it (and I see it wasn't used in client app too).

So, could you please explain how it was resolved?
Thanks.

[Maclay74]

Anybody? Please?

[gabrielmfern]

Hey, I'm trying to adopt the solution for our corporate needs (we need some integration from api side and tools like language switcher, etc) and I tried the same approach with dynamic imports of emails into the preview.

The problem is, when I change the email, it indeed recompiles the file, but doesn't kick off hot-reload. I have to reload the page manually to see changes in email.

Moreover, if I run my app with "turbo", it works, but turbo has broken dynamic imports (it always imports the same file), so I can't use it (and I see it wasn't used in client app too).

So, could you please explain how it was resolved? Thanks.

I didn't get your question exactly, could you elaborate more?

If I am getting this right, you are trying to load some data into your email's props and you tried some kind of the same approach as the preview client for the CLI does?
If that is the case, It may be better for you to fetch the data you need, then pass this as props into the email before rendering.

[Maclay74]

No, the solution is:

 const {
    default: Newsletter,
  } = (await import(
    /* webpackMode: "eager" */ `../../../../newsletters/${project}/${slug}`
  )) as {
    default: React.FC<{ i18n: i18n }>;
  };

For those, who want to force webpack to reload page after email was changed, it is a way.
It works with both webpack and turbopack.
Just add /* webpackMode: "eager" */ before url.