Importing constants

[GRA0007]

trafficstars

We have email templates with images from s3 and links that can change based on the env, which we were previously importing from a constants.ts file. This appears to work fine when running email export, however because the email templates are just copied into the .react-email folder when running email dev, these imports break.

It might be a better flow to run the next server from the original files, so imports don't break, which will also remove the need for any components to be in a folder with the name components. Storybook does this well.

[GRA0007]

Through some experimentation, I've figured out that nextjs can import external components by enabling the following option in the next.config.js:

experimental: {
  externalDir: true,
}

With this, the preview setup process could be simplified to creating a barrel file that reexports all of the email templates. Not sure if this is a good strategy though as it's an experimental feature and could break with different next versions or setups. (i.e. I had an absolute import in my email file /src/path/file which I had to change to a relative import to get working)

I think the alternative would be using vite or similar to build the files in place similar to how storybook operates, but I'm not very familiar with their setup.