[@mantine/core] <Title> renders <element> with vite build

[hauptrolle]

Hello Guys,

first of all, thank your for this awesome library 👏

I have found an issue with the <Title> component from @mantine/core when using it together with Vite.

In the development mode everything works fine, but after building the app the Title components gets rendered as <element> instead of h1. You can find an example repo here

[rtivital]

Hi @hauptrolle, here is our output esm code for Title component:

const Title = forwardRef((_a, ref) => {
  var _b = _a, { className, order = 1, children, align, style, sx } = _b, others = __objRest(_b, ["className", "order", "children", "align", "style", "sx"]);
  if (![1, 2, 3, 4, 5, 6].includes(order)) {
    return null;
  }
  const element = `h${order}`;
  const { classes, cx } = useStyles({ element }, { sx, name: "Title" });
  const styles = __spreadValues({}, style);
  if (align) {
    styles.textAlign = align;
  }
  const { mergedStyles, rest } = useExtractedMargins({ others, style: styles });
  return React.createElement(element, __spreadValues({
    className: cx(classes.root, className),
    style: mergedStyles,
    ref
  }, rest), children);
});

It looks correct to me – we do not use element as a string here. I do not think that there is something that we can do on our side to fix it as it seems to be a bug in Vite bundler.

[rtivital]

I think this issue contains details – vitejs/vite#5441

[rtivital]

Alright, I've released a patch that fixes this issue, update to 3.1.2 and Title will render correct element.

[hauptrolle]

Wow! Thank you so much for your fast response!