Resolving HTML and JSX Template Conflicts

HTML and JSX Template Conflicts

Template conflicts in HTML, JSX, or Vue SFC files are challenging because the nested tag structure means a change to one element may affect the indentation or wrapping of many surrounding lines. Two branches might modify different aspects of the same component, but Git sees the entire template block as conflicting.

Typical JSX Conflict

<<<<<<< HEAD
<Card className="p-4">
  <CardHeader>
    <h2>{title}</h2>
    <Badge variant="success">{status}</Badge>
  </CardHeader>
  <CardBody>{description}</CardBody>
</Card>
=======
<Card className="p-6 shadow-lg">
  <CardHeader>
    <h2>{title}</h2>
    <span className="text-sm text-gray-500">{date}</span>
  </CardHeader>
  <CardBody>{description}</CardBody>
  <CardFooter>
    <Button onClick={onAction}>View Details</Button>
  </CardFooter>
</Card>
>>>>>>> feature/card-actions

Analysis Approach

Break the template into logical sections:

Section	HEAD changes	Incoming changes
Card wrapper	className="p-4"	className="p-6 shadow-lg"
Header content	Added Badge	Added date span
Body	No change	No change
Footer	Not present	Added with Button

Resolution Strategy

JSX conflicts almost always require Manual Edit. Build the resolved version by:

1. Start with the overall structure (use the most complete version as your base).
2. Merge class names and props from both branches.
3. Include all new child elements from both branches.
4. Ensure all tags are properly opened and closed.
5. Verify JSX expressions ({}) are correct.

Common Pitfalls

• Unclosed tags: Merging partial HTML can leave tags unclosed.
• Missing props: Forgetting to include className changes from one branch.
• Key props: In list renders, ensure unique keys after merging.
• Event handlers: Check that all onClick, onChange, etc. handlers are preserved.

Validation

After resolving, verify your JSX compiles. TypeScript with JSX strict mode will catch most structural errors immediately.