Failed prop type: Invalid child component `[object Object]`. Must be one of: Cover, Body, Footer

[okonet]

I'm using Theme UI with the pragma set in .babelrc like this:

{
  "presets": [["next/babel", {
    "preset-react": {
      "pragma": "jsx"
    }
  }]],
  "plugins": [
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "module": "theme-ui",
        "import": "jsx",
        "export": "jsx"
      }
    ]
  ]
}

and I'm creating the following macro component:

import React from "react";
import Macro from "macro-components";
import Flex from "../Flex";
import Box from "../Box";
import Stack from "../Stack";

const Cover = ({ children }) => (
  <Box
    sx={{
      borderBottom: "thin",
      borderColor: "muted",
    }}
  >
    {children}
  </Box>
);

const Body = ({ children }) => <Stack gap={3}>{children}</Stack>;

const Footer = ({ children }) => <Box mt="auto">{children}</Box>;

const Card = Macro({ Cover, Body, Footer })(
  ({ Cover, Body, Footer }, props) => (
    <Flex
      sx={{
        bg: "bg",
        border: "thin",
        borderColor: "muted",
        borderRadius: "base",
        flexDirection: "column",
      }}
      {...props}
    >
      {Cover}
      <Stack height="100%" p={4} gap={4}>
        {Body}
        {Footer}
      </Stack>
    </Flex>
  )
);

export default Card;

but then I'm trying to use it in the app I see the error:

Failed prop type: Invalid child component `[object Object]`. Must be one of: Cover, Body, Footer

I'm wondering if this is somehow related...

[jxnblk]

Thanks! I haven't had time to look into this library or API recently, but some of the thinking in the mdx-blocks demo I put up, and the theme-ui library itself is more of a newer iteration on the ideas in this library – I'd recommend digging into that to see if it could solve a similar problem to what you're using macro-components for. (I was actually close to archiving this repo a few days ago)

That said, I'd suggest not using the theme-ui pragma everywhere via the Babel plugin and seeing if the issue persists? The other thing to try would be to only include one component at a time to narrow down which one is causing the error to throw, which I think happens if the element.type.macroName property is missing

[okonet]

Yeah, I’m going to spend some time investigating. But since you said it’s kinda deprecated, I’ll probably do something different. Thanks for the quick reply I’ll check out the blocks repo.