React Email import works not correctly with Storybook

[donni911]

Describe the Bug

I want to create a Storybook with react-email components, but I have an issue.

When I import like:
import { Text } from "@react-email/components"
I receive this Error
SyntaxError: Unexpected string (at @react-email_components.js?v=25ba9bd9:48627:14)

When I import like:
import { Text } from "@react-email/text"
All works correctly

Used packages:
"@react-email/components": "0.0.25",
"@react-email/render": "1.0.1",
"storybook": "^8.3.5",

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

private

To Reproduce

1. Create a simple component with import any component from @react-email/components.
2. Create storybook file.
3. Run a storybook.

Storybook file

import type { Meta, StoryObj } from "@storybook/react";
import { Tag } from "..";

const meta: Meta<typeof Tag> = {
  title: "Components/Tag",
};

export default meta;

type Story = StoryObj<typeof Tag>;

export const DefaultTag: Story = {
  render: () => <Tag>Test Tag</Tag>,
};

Tag file

import { Text } from "@react-email/components";
import React, { ReactNode } from "react";

type Props = {
  children: ReactNode;
  type: TagType;
};

export function Tag({ children, type }: Props) {
  return (
    <Text>
      {children}
    </Text>
  );
}

Expected Behavior

SyntaxError: Unexpected string (at @react-email_components.js?v=25ba9bd9:48627:14)

What's your node version? (if relevant)

v20.11.0

[jasongoetz]

@donni911 Thank you for logging this. I'm having the same issue, although I didn't know about your workaround.

[gabrielmfern]

Can you share the code for this? Try making a minimal project that has the issue you mentioned.

This might also be something on your side, rather than in ours, most likely.

[donni911]

Can you share the code for this? Try making a minimal project that has the issue you mentioned.

This might also be something on your side, rather than in ours, most likely.

Sorry, I can't share the repository because it's private.
I can show you the components and storybook.
Or you can try to create workspace using code I described above.

[gabrielmfern]

@donni911 You don't need to share your private code, you can create a new project with the least amount of code possible that has the same error and then share it here. I won't be able to fix it properly otherwise.