Preserve folders inside "Email" Folder // Folder & Items Removed

[Bugs5382]

So I am working on creating "templates" around emails generated. Your classic parent, child components. So I have this structure:

but when it's compiled only the "files" inside the root folder emails:

... is created. I wouldn't be looking to "preview" or "export" the template so on the page:

this is correct that only "end-new-incident.tsx" shows up.

[bukinoshita]

Can you try the latest version?

[lxzxl]

the old version cpy: 8.1.2 won't keep the folder structure, I think upgrading it to the latest v9.0 would be better.

[Bugs5382]

Can you try the latest version?

Will update today and report back...

[Bugs5382]

@bukinoshita Updated to "react-email": "^1.7.11" and did a npm clean, etc. still same result.

It also put the static files in the same directory as well....

[akagire]

Same issue.

I'm trying to update cpy@9.0.1.

[bukinoshita]

cpy uses ESM does it break anything? And the people that are not using ESM, they need to start supporting ESM?

[bukinoshita]

@bastiaanv Can help take a look on this, looks like the static files is displayed in the sidebar right now

[akagire]

@bukinoshita This problem is cpy's default behavior has changed.

Possibly this PR #428 changes the latest referenced cpy document.

This PR's purpose is keep emails directories structure on Next.js for preview.

But the latest version of react-email does not keep the directory structure because cpy copies the files and flattens them like that #447 (comment). It is probably not the expected behavior.

However, this is cpy@8.1.2's correct behavior. So this issue can be solved by updating cpy to 9.0.1.

This is reproduce repository for cpy's behavior of these versions.

v8.1.2
https://github.com/Akagire/cpyTest

v9.0.1
https://github.com/Akagire/cpyTest/tree/cpy-901

index.{c,m}js just do copy slug to dest .

v8.1.2's dest is be flatten. But v9.0.1's dest keeps the structure.

But this fix has another problem. cpy has switched to pure ESM since version 9 so it needs to change the static import (built CJS files that use require) migrate to dynamic import ( built cjs files that use await import ).

This is my requested PR's purpose. #454

We have another option that detach cpy or use another one or implement copy process original.

Finally, IMHO, react-email doesn't need to support ESM right now.
For reason, according to this data https://github.com/wooorm/npm-esm-vs-cjs CommonJS is still the de-facto standard module system.

Fortunately, CommonJS can import ESM modules like my PR, and cpy code only used in command/dev.ts that is Next.js(for preview) preparation, so it probably won't affect other processes. (I think readability is worse than CommonJS library importing...)

On the other hand, as you can see previously mentioned esm-vs-cjs data, ESM library and dual packaging libraries share are growing up day by day. Perhaps someday need support ESM, but not now, at least for me.

[bastiaanv]

Ah yes, I see the problem. My bad, did not check the version of spy we were using. PR #454 looks good to me, hate the syntax used (but no other option available I guess). We could also switch to cpy-cli, then we can use shell and we do not need to think about ESM or CommonJS.

[bukinoshita]

That would be great solution I think at least for now.

[bukinoshita]

@akagire Let's try doing something like @bastiaanv mentioned in that PR?

[bastiaanv]

I made a PR that uses shelljs to replace cpy completely, as an alternative for #454. Would like to hear what you guys think of it