Resolving Import Statement Conflicts

Import Statement Conflicts

Import conflicts are among the most frequent merge conflicts in modern JavaScript and TypeScript projects. They happen when two branches add new import statements to the same file, especially near the top where imports are grouped together.

Why Imports Conflict So Often

Most style guides and auto-formatters sort imports alphabetically or by category. When two branches add new imports in the same alphabetical position, Git sees overlapping changes to the same lines:

<<<<<<< HEAD
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
=======
import { useState, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";
>>>>>>> feature/add-tooltips

Resolution Approach

Import conflicts almost always need Manual Edit because both branches add legitimate dependencies. The correct resolution combines the unique imports from both sides:

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
import { Tooltip } from "@/components/ui/tooltip";

Pitfalls to Avoid

• Duplicate imports: Merging carelessly can result in importing the same module twice, which causes build errors.
• Unused imports: If the conflict arose because one branch removed an import while the other kept it, check whether the import is still needed.
• Circular dependencies: After merging imports from both branches, ensure no circular import chains were introduced.

Automation Tip

Run your linter or formatter after resolving import conflicts. Tools like ESLint with the import/order rule or Prettier will clean up sorting and remove unused imports automatically.