Vite/Frontend Conflicts

Scenario D: Package.json Conflicts

Situation: Different developers add different dependencies.

Example:

{
  "dependencies": {
    "react": "^18.2.0",
<<<<<<< HEAD
    "axios": "^1.4.0",
    "react-router-dom": "^6.11.0"
=======
    "react-query": "^3.39.0",
    "styled-components": "^5.3.0"
>>>>>>> feature-branch
  }
}

Resolution Strategy:

Keep all dependencies unless they conflict
Run npm install or yarn install after resolving
Check for version compatibility

Scenario E: Component Import Conflicts

Situation: Different component imports or structures.

Example:

<<<<<<< HEAD
import Header from './components/Header'
import Footer from './components/Footer'
import Dashboard from './pages/Dashboard'
=======
import Navigation from './components/Navigation'
import Sidebar from './components/Sidebar'
import Home from './pages/Home'
>>>>>>> feature-branch

Resolution Strategy:

Keep all imports if components are different
Check component usage in the file
Ensure no naming conflicts

Scenario F: CSS/Style Conflicts

Situation: Style modifications to the same element.

Example:

.container {
<<<<<<< HEAD
  max-width: 1200px;
  padding: 20px;
  background-color: #f0f0f0;
=======
  max-width: 1400px;
  margin: 0 auto;
  background-color: #ffffff;
>>>>>>> feature-branch
}

Resolution Strategy:

Discuss design decisions with the team
Consider if different styles are for different breakpoints
Use CSS variables for consistent theming

Scenario G: Package-lock.json Conflicts

Situation: The most common and intimidating conflict for new developers — when package-lock.json has conflicts after different developers install packages.

Example:

{
  "name": "frontend",
  "version": "0.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
<<<<<<< HEAD
    "node_modules/axios": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
=======
    "node_modules/react-query": {
      "version": "3.39.0",
      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.0.tgz",
>>>>>>> feature-branch

Resolution Strategy:

NEVER manually edit package-lock.json to resolve conflicts
Delete the package-lock.json file
Re-run the install command:
```
rm package-lock.json
npm install
```
This regenerates a fresh lock file with all dependencies
Commit the new package-lock.json