Tailwind not parsing the rendered children from components #1021

lunoob · 2023-11-06T13:10:52Z

Describe the Bug

Before version 0.0.8, the following code is working normally

<Tailwind>
  <Template />
</Tailwind>

After version 0.0.8, I found that it only analyzes Component with the Children attribute

// it work fine
<Tailwind>
   <Component className="text-[100px]">React Email</Component>
</Tailwind>

// it not work for <div>
<Tailwind>
   <Component className="text-[100px]">
        <div className="text-red">Color</div>
        React Email
   </Component>
</Tailwind>

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

example in codesandbox

To Reproduce

I compared the latest version and the source code of version 0.0.8, and found that the 0.0.8 version was replaced by the entire HTML, while the latest version only analyzes Children after the version 0.0.8.

0.0.8

0.0.8+

Expected Behavior

it can be parse the whole template component

What's your node version? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

gabrielmfern · 2023-11-06T15:07:48Z

Can you maybe elaborate more on what is happening to your email template? Does it work under some circumstances and others not, and if so, can you please tell me what circumstances?

giovannetti-eric · 2023-11-06T19:40:29Z

Same problem here, with @react-email/components": "0.0.7" my email templates were working well, after upgrade, a lot of Tailwind classes are not converted into style attributes anymore.

For example:

  <Link href={t("common.appStore.href")} className="inline-block">
    <Img
      src={t("common.appStore.img")}
      width="119"
      height="40"
      alt={t("common.appStore.label")}
      className="max-w-full h-auto inline"
    />
  </Link>

is generating

<a href="xxx" class="inline-block" style="color:#067df7;text-decoration:none" target="_blank"><img class="max-w-full h-auto inline" alt="xxx" height="40" src="xxx" style="display:block;outline:none;border:none;text-decoration:none" width="119"></a>

After some test, I found that the problem apply when I load custom components in an email template, for example:

import * as React from "react";
import MainLayout from "../components/ui/MainLayout";
import Email1 from "../components/views/Email1";
import { useGetToken } from "../hooks/useGetToken";

const locale = "en";

export const Email1En = () => {
  const { t } = useGetToken(locale);

  return (
    <MainLayout
      title={t("pnp23bf1_22.title")}
      preview={t("pnp23bf1_22.preview")}
    >
      <Email1 locale={locale} />
    </MainLayout>
  );
};

export default Email1En;

import { Body, Head, Html, Preview } from "@react-email/components";
import React from "react";
import TailwindProvider from "./TailwindProvider";

interface MainLayoutProps {
  title?: string;
  preview?: string;
  children?: React.ReactNode;
}

export const MainLayout = ({ title, preview, children }: MainLayoutProps) => {
  return (
      <Html>
        <Head>
          <title>{title}</title>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
            rel="stylesheet"
          />
          <style>
            {`
              @media screen and (max-width: 600px) {
                h1 {
                  font-size: 30px !important;
                }
              }
            `}
          </style>
        </Head>
        {preview && <Preview>{preview}</Preview>}
        <TailwindProvider>
          <Body className="text-gray-900 bg-white my-auto mx-auto font-sans leading-snug">
              {children}
          </Body>
        </TailwindProvider>
      </Html>
  );
};

export default MainLayout;

Most Tailwind classes into <Email1 /> are not generated

lunoob · 2023-11-07T01:16:26Z

Can you maybe elaborate more on what is happening to your email template? Does it work under some circumstances and others not, and if so, can you please tell me what circumstances?

yes, I maked an example

gabrielmfern · 2023-11-07T06:14:04Z

Going to take a look into fixing this to unblock you guys, a PR is coming that is going to improve a lot of things about the Tailwind component.

Maclay74 · 2023-11-07T12:39:42Z

I think it might be related with recent react update. Essentially, they "fixed bug" when rendering functions take context into account.

gabrielmfern · 2023-11-09T17:26:51Z

Same problem here, with @react-email/components": "0.0.7" my email templates were working well, after upgrade, a lot of Tailwind classes are not converted into style attributes anymore.

For example:

  <Link href={t("common.appStore.href")} className="inline-block">
    <Img
      src={t("common.appStore.img")}
      width="119"
      height="40"
      alt={t("common.appStore.label")}
      className="max-w-full h-auto inline"
    />
  </Link>

is generating

<a href="xxx" class="inline-block" style="color:#067df7;text-decoration:none" target="_blank"><img class="max-w-full h-auto inline" alt="xxx" height="40" src="xxx" style="display:block;outline:none;border:none;text-decoration:none" width="119"></a>

After some test, I found that the problem apply when I load custom components in an email template, for example:

import * as React from "react";
import MainLayout from "../components/ui/MainLayout";
import Email1 from "../components/views/Email1";
import { useGetToken } from "../hooks/useGetToken";

const locale = "en";

export const Email1En = () => {
  const { t } = useGetToken(locale);

  return (
    <MainLayout
      title={t("pnp23bf1_22.title")}
      preview={t("pnp23bf1_22.preview")}
    >
      <Email1 locale={locale} />
    </MainLayout>
  );
};

export default Email1En;

import { Body, Head, Html, Preview } from "@react-email/components";
import React from "react";
import TailwindProvider from "./TailwindProvider";

interface MainLayoutProps {
  title?: string;
  preview?: string;
  children?: React.ReactNode;
}

export const MainLayout = ({ title, preview, children }: MainLayoutProps) => {
  return (
      <Html>
        <Head>
          <title>{title}</title>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
            rel="stylesheet"
          />
          <style>
            {`
              @media screen and (max-width: 600px) {
                h1 {
                  font-size: 30px !important;
                }
              }
            `}
          </style>
        </Head>
        {preview && <Preview>{preview}</Preview>}
        <TailwindProvider>
          <Body className="text-gray-900 bg-white my-auto mx-auto font-sans leading-snug">
              {children}
          </Body>
        </TailwindProvider>
      </Html>
  );
};

export default MainLayout;

Most Tailwind classes into <Email1 /> are not generated

Working on a fix for this on a new PR that also improves performance.

The problem here is that only the children passed through props to components are handled,
while the resulting children of the rendered component are not.

This is indeed a bug and we are on it.

closes #1021

gabrielmfern · 2023-11-09T18:36:10Z

PR that solves this is basically done, this problem will go away soon guys.

If it takes too long for us to merge and release a new version out, I made a quick patch that fixes the issue as a workaround

diff --git a/dist/index.js b/dist/index.js
index 12a4d02aac2b2364deb79d7785bb5b2d735d9e12..12a042dd383a3e91cbfe803af11210c5b40457a7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -154,6 +154,17 @@ function processElement(element, headStyles, twi) {
       ...processedChildren
     );
   }
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        headStyles,
+        twi
+      );
+    }
+  }
   return modifiedElement;
 }
 function processHead(child, responsiveStyles) {
diff --git a/dist/index.mjs b/dist/index.mjs
index 2e58d8425e6bf5ed3928e99d20fd1e1006d70e36..3f7b69f98aaf9ab4c45c27153d55b774e6e326f8 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -121,6 +121,17 @@ function processElement(element, headStyles, twi) {
       ...processedChildren
     );
   }
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        headStyles,
+        twi
+      );
+    }
+  }
   return modifiedElement;
 }
 function processHead(child, responsiveStyles) {

J4v4Scr1pt · 2023-11-14T17:05:15Z

Still not working for me.
But my workaround with this is to wrap the component in Tailwind as well.. maybe not the best.. but it works for now.. 😅

import { Img, Section, Tailwind } from '@react-email/components';
import * as React from 'react';
import tailwindConfig from '../../tailwind.config';

export const Header = () => (
	<Tailwind config={tailwindConfig}>
		<Section className="round flex h-[120px] items-center justify-center rounded-tl-lg rounded-tr-lg bg-wt-black">
			<Img
				src="src"
			/>
		</Section>
	</Tailwind>
);

gabrielmfern · 2023-11-15T06:42:53Z

Still not working for me. But my workaround with this is to wrap the component in Tailwind as well.. maybe not the best.. but it works for now.. 😅

import { Img, Section, Tailwind } from '@react-email/components';
import * as React from 'react';
import tailwindConfig from '../../tailwind.config';

export const Header = () => (
	<Tailwind config={tailwindConfig}>
		<Section className="round flex h-[120px] items-center justify-center rounded-tl-lg rounded-tr-lg bg-wt-black">
			<Img
				src="src"
			/>
		</Section>
	</Tailwind>
);

can you maybe give a reproduction so I can narrow down the problem on your case?

J4v4Scr1pt · 2023-11-15T08:00:37Z

In my case its just that when I import this in to my email-template the tailwind styles dont get applied to the component.

import {
	Body,
	Button,
	Column,
	Container,
	Head,
	Heading,
	Hr,
	Html,
	Img,
	Link,
	Preview,
	Row,
	Section,
	Tailwind,
	Text,
} from '@react-email/components';
import * as React from 'react';
import tailwindConfig from '../tailwind.config';
import { Header } from './components/Header';
import { Footer } from './components/Footer';

export const AssignedRole = () => {
	return (
		<Html>
			<Head />
			<Preview>{`Preview text`}</Preview>
			<Tailwind config={tailwindConfig}>
				<Body className="mx-auto my-auto rounded-lg bg-white font-sans">
					<Container className="mx-auto my-[40px] w-[600px] rounded-lg border border-solid border-[#eaeaea]"> // Styles work
						<Header /> // No styles without wrapping the component in Tailwind
					// ALLL THE CONTENT and all styles work
						<Footer /> // No styles without wrapping the component in Tailwind
					</Container>
				</Body>
			</Tailwind>
		</Html>
	);
};

export default AssignedRole;

gabrielmfern · 2023-11-16T07:51:43Z

In my case its just that when I import this in to my email-template the tailwind styles dont get applied to the component.

import {
	Body,
	Button,
	Column,
	Container,
	Head,
	Heading,
	Hr,
	Html,
	Img,
	Link,
	Preview,
	Row,
	Section,
	Tailwind,
	Text,
} from '@react-email/components';
import * as React from 'react';
import tailwindConfig from '../tailwind.config';
import { Header } from './components/Header';
import { Footer } from './components/Footer';

export const AssignedRole = () => {
	return (
		<Html>
			<Head />
			<Preview>{`Preview text`}</Preview>
			<Tailwind config={tailwindConfig}>
				<Body className="mx-auto my-auto rounded-lg bg-white font-sans">
					<Container className="mx-auto my-[40px] w-[600px] rounded-lg border border-solid border-[#eaeaea]"> // Styles work
						<Header /> // No styles without wrapping the component in Tailwind
					// ALLL THE CONTENT and all styles work
						<Footer /> // No styles without wrapping the component in Tailwind
					</Container>
				</Body>
			</Tailwind>
		</Html>
	);
};

export default AssignedRole;

Could you try importing from @react-email/tailwind instead of components?

J4v4Scr1pt · 2023-11-16T09:58:25Z

I installed the Tailwind component and used it directly instead as you suggested but no styles get applied 🙁

gabrielmfern · 2023-11-16T12:32:05Z

I installed the Tailwind component and used it directly instead as you suggested but no styles get applied 🙁

how did you install the patch?

J4v4Scr1pt · 2023-11-16T13:03:02Z

Ahh maybe that the issue. I just installed it like this: pnpm add @react-email/tailwind -E

"prettier-plugin-tailwindcss": "^0.5.7",

gabrielmfern · 2023-11-16T14:21:35Z

Ahh maybe that the issue. I just installed it like this: pnpm add @react-email/tailwind -E

"prettier-plugin-tailwindcss": "^0.5.7",

As mentioned more above in the issue, we don't yet have a release with the issue fixed, but it is coming, so you'll have to use the patch for now. To use the patch you can either use pnpm's built-in patching mechanism, or use something like patch-package.

If you prefer using pnpm, you will need to go through the following:

add the following to the end of your package.json

  "pnpm": {
    "patchedDependencies": {
      "@react-email/[email protected]": "patches/@[email protected]"
    }
  }

copy and paste the following inside of patches/@[email protected]

diff --git a/dist/index.js b/dist/index.js
index 12a4d02aac2b2364deb79d7785bb5b2d735d9e12..12a042dd383a3e91cbfe803af11210c5b40457a7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -154,6 +154,17 @@ function processElement(element, headStyles, twi) {
       ...processedChildren
     );
   }
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        headStyles,
+        twi
+      );
+    }
+  }
   return modifiedElement;
 }
 function processHead(child, responsiveStyles) {
diff --git a/dist/index.mjs b/dist/index.mjs
index 2e58d8425e6bf5ed3928e99d20fd1e1006d70e36..3f7b69f98aaf9ab4c45c27153d55b774e6e326f8 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -121,6 +121,17 @@ function processElement(element, headStyles, twi) {
       ...processedChildren
     );
   }
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        headStyles,
+        twi
+      );
+    }
+  }
   return modifiedElement;
 }
 function processHead(child, responsiveStyles) {

Run pnpm install and the patch should be applied and the component should work now. Something to note that is important is that if you are not using pnpm somewhere the patch won't be applied, in a CI pipeline for example, so be sure to look out for that. A plus to patch-package if you are just using normal npm.

Also make sure you have @react-email/[email protected] installed since the patch is made for this version. For the patch-package way, you can look into its docs and I believe its going to be pretty similar to the above.

For context, a patch would be a manual change to a installed module that has some kind of problem that has not been fixed on a new version, its a sad reality, but sometimes we need patches on certain modules.

So instead of needing to do it manually there are these tools (such as pnpm patch or patch-package) that help you do this easily and in a way that everyone that also installs the dependencies of the project does not have to go through the library code again or apply the change manually.

Let me know if this works for you

OussamaFadlaoui · 2023-11-26T22:24:12Z

Ahh maybe that the issue. I just installed it like this: pnpm add @react-email/tailwind -E
"prettier-plugin-tailwindcss": "^0.5.7",

As mentioned more above in the issue, we don't yet have a release with the issue fixed, but it is coming, so you'll have to use the patch for now. To use the patch you can either use pnpm's built-in patching mechanism, or use something like patch-package.

If you prefer using pnpm, you will need to go through the following:

add the following to the end of your package.json
  "pnpm": {
    "patchedDependencies": {
      "@react-email/[email protected]": "patches/@[email protected]"
    }
  }
copy and paste the following inside of patches/@[email protected]
diff --git a/dist/index.js b/dist/index.js
index 12a4d02aac2b2364deb79d7785bb5b2d735d9e12..12a042dd383a3e91cbfe803af11210c5b40457a7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -154,6 +154,17 @@ function processElement(element, headStyles, twi) {
       ...processedChildren
     );
   }
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        headStyles,
+        twi
+      );
+    }
+  }
   return modifiedElement;
 }
 function processHead(child, responsiveStyles) {
diff --git a/dist/index.mjs b/dist/index.mjs
index 2e58d8425e6bf5ed3928e99d20fd1e1006d70e36..3f7b69f98aaf9ab4c45c27153d55b774e6e326f8 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -121,6 +121,17 @@ function processElement(element, headStyles, twi) {
       ...processedChildren
     );
   }
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        headStyles,
+        twi
+      );
+    }
+  }
   return modifiedElement;
 }
 function processHead(child, responsiveStyles) {
Run pnpm install and the patch should be applied and the component should work now. Something to note that is important is that if you are not using pnpm somewhere the patch won't be applied, in a CI pipeline for example, so be sure to look out for that. A plus to patch-package if you are just using normal npm.

Also make sure you have @react-email/[email protected] installed since the patch is made for this version. For the patch-package way, you can look into its docs and I believe its going to be pretty similar to the above.

For context, a patch would be a manual change to a installed module that has some kind of problem that has not been fixed on a new version, its a sad reality, but sometimes we need patches on certain modules.

So instead of needing to do it manually there are these tools (such as pnpm patch or patch-package) that help you do this easily and in a way that everyone that also installs the dependencies of the project does not have to go through the library code again or apply the change manually.

Let me know if this works for you

Appreciate this temporary alternative. It's not perfect but a better workaround than wrapping multiple components around <Tailwind />

gabrielmfern · 2023-11-27T06:27:35Z

Appreciate this temporary alternative. It's not perfect but a better workaround than wrapping multiple components around <Tailwind />

Hey @OussamaFadlaoui we have a new canary with a PR that should've fixed these kinds of issues, try out @react-email/[email protected] and any problems you have we will fix. Thanks for the patience!

tomaszczura · 2023-12-05T08:24:56Z

Unfortunately this still does not work for me event with @react-email/tailwind v0.0.13 - styles are not applied to custom components

EDIT: My components were wrapped with memo. I removed that and now it is working - styles are passed

lunoob · 2023-12-05T08:29:03Z

Unfortunately this still does not work for me event with @react-email/tailwind v0.0.13 - styles are not applied to custom components

me too

gabrielmfern · 2023-12-05T17:07:05Z

Hey guys @lunoob @tomaszczura, the original underlying problem here was fixed.
If there is a new problem I recommend you open up a new issue because it is going to be something else that may be somewhat of related to the problem.
Also, please don't forget to make a reproduction of your problem because that makes it much easier for me to help.
Thanks!

chris-trait · 2023-12-09T08:59:02Z

Hey @gabrielmfern Is it not possible to use react hooks within the Tailwind component?

If I try using a React hook inside of my e-mail components wrapped in <Tailwind> then I get the rules of hooks error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Minimal reproduction looks like:

const TestA = () => {
    const [foo] = React.useState("hello")
    return <p>{foo}</p>
}
const html = render(
    <Tailwind>
        <TestA />
    </Tailwind>
)

The use case is to wrap a React context around the e-mail with common props and then consume them from some child components.

gabrielmfern · 2023-12-09T19:50:45Z

@chris-trait
Hey, this is expected behavior, email templates will generally not work with hooks since they are supposed to be static,
all data that you want to add anywhere on it you should be passing through props to it before rendering with @react-email/render.
Hooks will work if you are rendering the email directly with React's rendering process but won't with our rendering process
because it generates static markup.

chris-trait · 2023-12-10T04:51:51Z

@gabrielmfern that does seem a little weird to me, as I do expect hooks to run for other "static" use cases like static site generation or server-side rendering, especially as async server side rendering is becoming more of a thing, and indeed hooks run fine with renderToStaticMarkup. React contexts also work fine in static rendering, the issue is with how the tailwind function traverses the component tree and calls components as plain functions: https://github.com/resendlabs/react-email/blob/2374d0d099360c63fe7427febb239776c3bd6b3b/packages/tailwind/src/tailwind.tsx#L95C32-L95C32.

For now my workaround is using <MyReactContext.Consumer>{context => ...}</MyReactContext.Consumer> instead of the hook.

gabrielmfern · 2023-12-11T19:29:50Z

@gabrielmfern that does seem a little weird to me, as I do expect hooks to run for other "static" use cases like static site generation or server-side rendering, especially as async server side rendering is becoming more of a thing, and indeed hooks run fine with renderToStaticMarkup. React contexts also work fine in static rendering, the issue is with how the tailwind function traverses the component tree and calls components as plain functions: https://github.com/resendlabs/react-email/blob/2374d0d099360c63fe7427febb239776c3bd6b3b/packages/tailwind/src/tailwind.tsx#L95C32-L95C32.

For now my workaround is using <MyReactContext.Consumer>{context => ...}</MyReactContext.Consumer> instead of the hook.

That's interesting, then I think this is an actual issue with the new Tailwind version, can you open an issue on this so we can reference it on a PR and discuss it there?

lunoob added the Type: Bug Confirmed bug label Nov 6, 2023

bukinoshita added the Package: @react-email/tailwind label Nov 6, 2023

giovannetti-eric mentioned this issue Nov 9, 2023

Tailwind component seems to not handle styles correctly on custom components shellscape/jsx-email#73

Closed

gabrielmfern added a commit that referenced this issue Nov 9, 2023

fix (tailwind): issues with components without children

a0ef1cf

closes #1021

gabrielmfern mentioned this issue Nov 10, 2023

fix(tailwind): Performance and stability #1024

Merged

bukinoshita closed this as completed in #1024 Nov 19, 2023

gabrielmfern changed the title ~~Tailwind not parse the whole template component~~ Tailwind not parsing the rendered children from components Dec 11, 2023

aplr mentioned this issue Dec 18, 2023

Hooks + Context not working within Tailwind component #1104

Open

DavidPetrasek mentioned this issue Jan 26, 2025

[DOCS] Tailwind component #1880

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind not parsing the rendered children from components #1021

Tailwind not parsing the rendered children from components #1021

lunoob commented Nov 6, 2023 •

edited

Loading

gabrielmfern commented Nov 6, 2023

giovannetti-eric commented Nov 6, 2023

lunoob commented Nov 7, 2023 •

edited

Loading

gabrielmfern commented Nov 7, 2023 •

edited

Loading

Maclay74 commented Nov 7, 2023

gabrielmfern commented Nov 9, 2023

gabrielmfern commented Nov 9, 2023 •

edited

Loading

J4v4Scr1pt commented Nov 14, 2023

gabrielmfern commented Nov 15, 2023

J4v4Scr1pt commented Nov 15, 2023

gabrielmfern commented Nov 16, 2023

J4v4Scr1pt commented Nov 16, 2023

gabrielmfern commented Nov 16, 2023

J4v4Scr1pt commented Nov 16, 2023

gabrielmfern commented Nov 16, 2023 •

edited

Loading

OussamaFadlaoui commented Nov 26, 2023

gabrielmfern commented Nov 27, 2023

tomaszczura commented Dec 5, 2023 •

edited

Loading

lunoob commented Dec 5, 2023

gabrielmfern commented Dec 5, 2023

chris-trait commented Dec 9, 2023 •

edited

Loading

gabrielmfern commented Dec 9, 2023

chris-trait commented Dec 10, 2023 •

edited

Loading

gabrielmfern commented Dec 11, 2023

Tailwind not parsing the rendered children from components #1021

Tailwind not parsing the rendered children from components #1021

Comments

lunoob commented Nov 6, 2023 • edited Loading

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

gabrielmfern commented Nov 6, 2023

giovannetti-eric commented Nov 6, 2023

lunoob commented Nov 7, 2023 • edited Loading

gabrielmfern commented Nov 7, 2023 • edited Loading

Maclay74 commented Nov 7, 2023

gabrielmfern commented Nov 9, 2023

gabrielmfern commented Nov 9, 2023 • edited Loading

J4v4Scr1pt commented Nov 14, 2023

gabrielmfern commented Nov 15, 2023

J4v4Scr1pt commented Nov 15, 2023

gabrielmfern commented Nov 16, 2023

J4v4Scr1pt commented Nov 16, 2023

gabrielmfern commented Nov 16, 2023

J4v4Scr1pt commented Nov 16, 2023

gabrielmfern commented Nov 16, 2023 • edited Loading

OussamaFadlaoui commented Nov 26, 2023

gabrielmfern commented Nov 27, 2023

tomaszczura commented Dec 5, 2023 • edited Loading

lunoob commented Dec 5, 2023

gabrielmfern commented Dec 5, 2023

chris-trait commented Dec 9, 2023 • edited Loading

gabrielmfern commented Dec 9, 2023

chris-trait commented Dec 10, 2023 • edited Loading

gabrielmfern commented Dec 11, 2023

lunoob commented Nov 6, 2023 •

edited

Loading

lunoob commented Nov 7, 2023 •

edited

Loading

gabrielmfern commented Nov 7, 2023 •

edited

Loading

gabrielmfern commented Nov 9, 2023 •

edited

Loading

gabrielmfern commented Nov 16, 2023 •

edited

Loading

tomaszczura commented Dec 5, 2023 •

edited

Loading

chris-trait commented Dec 9, 2023 •

edited

Loading

chris-trait commented Dec 10, 2023 •

edited

Loading