Dev server showing error "could not match the columns in the row" #2424

anthonyma94 · 2025-08-22T12:35:57Z

anthonyma94
Aug 22, 2025

Hi all, I'm having an error pop up in the dev server saying "could not match the columns in the row". The email renders properly both in preview and in render(), so I'm not too fussed about it, but if anyone knows how to get rid of the error I'd appreciate it!

const Email: React.FC<React.PropsWithChildren<{
  vendorName: string;
  poNumber: string;
  referenceNumber: string;
  partNumber: string;
  quantity: number;
  specialInstructions?: string;
  contactName?: string;
  contactEmail?: string;
  contactPhone?: string;
  footer?: string;
}>> = ({
  vendorName,
  poNumber,
  referenceNumber,
  partNumber,
  quantity,
  specialInstructions,
  contactName,
  contactEmail,
  contactPhone,
  footer = "© 2025 Company. All rights reserved.",
}) => {
  return (
    <Html>
      <Head />
      <Body style={main}>
        <Section style={header}>
          <Img
            src={logoUrl}
            alt="Company Logo"
            style={logo}
            height={46}
            width={150}
          />
        </Section>

        <Section style={contentSection}>
          <Preview>Purchase order request for {partNumber}</Preview>
          <Text style={heading}>Purchase Order Request</Text>

          <Text style={greeting}>Dear {vendorName},</Text>
          <Text style={paragraph}>XXX</Text>
          <Text style={paragraph}>XXX</Text>

          <Section style={orderDetailsSection}>
            <Text style={sectionTitle}>Order Details</Text>

            <Section style={detailRow}>
              <Text style={detailLabel}>Purchase Order Number:</Text>
              <Text style={detailValue}>{poNumber}</Text>
            </Section>

            <Section style={detailRow}>
              <Text style={detailLabel}>Part Number:</Text>
              <Text style={detailValue}>{partNumber}</Text>
            </Section>

            <Section style={detailRow}>
              <Text style={detailLabel}>Quantity:</Text>
              <Text style={detailValue}>{quantity} units</Text>
            </Section>

            <Section style={detailRow}>
              <Text style={detailLabel}>Reference Number:</Text>
              <Text style={detailValue}>{referenceNumber}</Text>
            </Section>

            {specialInstructions && (
              <Section style={specialInstructionsSection}>
                <Text style={detailLabel}>Special Instructions:</Text>
                <Text style={specialInstructionsText}>
                  {specialInstructions}
                </Text>
              </Section>
            )}
          </Section>

          <Section style={actionSection}>
            <Text style={actionTitle}>Action Required</Text>
            <Text style={actionText}>
              Please confirm this order and provide:
            </Text>
            <Text style={actionList}>
              XXX
            </Text>
          </Section>

          {/* Contact Information */}
          <Section style={contactSection}>
            <Text style={contactTitle}>Contact Information</Text>
            <Text style={contactInfo}>
              <strong>Contact:</strong> {contactName}
              <br />
              <strong>Email:</strong>{" "}
              <Link
                href={`mailto:${contactEmail}?subject=${encodeURIComponent(
                  `Order Inquiry: ${referenceNumber} - ${partNumber}`
                )}`}
              >
                {contactEmail}
              </Link>
              <br />
              <strong>Phone:</strong> {contactPhone}
            </Text>
            <Text style={referenceNote}>
              <strong>Important:</strong> When contacting us regarding this
              order, please include the Reference Number ({referenceNumber}) for
              faster processing.
            </Text>
          </Section>
        </Section>

        <Section style={dividerSection}>
          <Hr style={hr} />
        </Section>

        <Section style={footerStyle}>
          <Text style={footerText}>{footer}</Text>
        </Section>
      </Body>
    </Html>
  );
};

// Styles
const main = {
  backgroundColor: "#f6f9fc",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
  width: "100%",
  margin: "0",
  padding: "0",
};

const header = {
  width: "100%",
  padding: "5px",
  backgroundColor: "#51479d",
  position: "relative" as const,
  maxHeight: "50px",
};

const logo = {
  display: "block",
  width: "150px",
  maxWidth: "150px",
  height: "auto",
  maxHeight: "50px",
};

const contentSection = {
  width: "100%",
  backgroundColor: "#ffffff",
  padding: "40px 20px",
  color: "#3c4149",
};

const dividerSection = {
  width: "100%",
  backgroundColor: "#ffffff",
  padding: "0 20px",
};

const hr = {
  borderColor: "#dfe1e4",
  margin: "20px 0",
  width: "100%",
};

const footerStyle = {
  width: "100%",
  backgroundColor: "#ffffff",
  padding: "0px 20px",
};

const footerText = {
  margin: "0 0 10px",
  fontSize: "12px",
  lineHeight: "1.4",
  color: "#8898aa",
  textAlign: "center" as const,
  width: "100%",
};

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dev server showing error "could not match the columns in the row" #2424

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Dev server showing error "could not match the columns in the row" #2424

Uh oh!

anthonyma94 Aug 22, 2025

Replies: 0 comments

anthonyma94
Aug 22, 2025