How to fix useId is not available in this React build in React

# Check installed versions
npm list react react-dom
# or
yarn list react react-dom

# Expected output should show version 18.x.x or higher
[email protected]
[email protected]

# If versions are lower, upgrade:
npm install react@latest react-dom@latest
# or
yarn add react@latest react-dom@latest

// package.json - ensure versions match
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"  // Must match react version
  }
}

// If versions don't match, update:
npm install react-dom@18
# or remove node_modules and package-lock.json, then reinstall
rm -rf node_modules package-lock.json
npm install

# For npm
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# For yarn
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

# For pnpm
pnpm store prune
rm -rf node_modules pnpm-lock.yaml
pnpm install

# Check for duplicate React installations
npm ls react
# Look for lines like:
# ├─┬ [email protected]
# └─┬ [email protected]
#   └── [email protected]  # DUPLICATE - problem!

# Use resolutions in package.json to force single version (yarn/pnpm)
{
  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

# For npm, use overrides
{
  "overrides": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

// Webpack example - ensure you're not aliasing to an older React
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      // WRONG - points to custom build without useId
      react: path.resolve(__dirname, 'custom-react/build.js'),
      // CORRECT - use standard React
      // Remove or update this alias
    }
  }
};

// Vite example
// vite.config.js
export default {
  resolve: {
    alias: {
      // Check for problematic aliases
      'react': 'preact/compat'  // This would cause the error
    }
  }
};

// Minimal test component
import { useId } from 'react';

export function TestComponent() {
  const id = useId();
  return <div id={id}>Test</div>;
}

// Create a simple app to test
import { createRoot } from 'react-dom/client';
import { TestComponent } from './TestComponent';

const root = createRoot(document.getElementById('root'));
root.render(<TestComponent />);

// If this works, the issue is elsewhere in your project
// If it fails, the React installation is the problem

// Alternative 1: Use a counter (client-side only)
let idCounter = 0;
export function useClientId() {
  const [id] = useState(() => `id-${idCounter++}`);
  return id;
}

// Alternative 2: Use nanoid or uuid for random IDs
import { nanoid } from 'nanoid';
export function useRandomId() {
  const [id] = useState(() => nanoid());
  return id;
}

// Alternative 3: Use ref with useEffect (SSR compatible)
export function useStableId() {
  const [id, setId] = useState<string | null>(null);
  
  useEffect(() => {
    if (!id) {
      setId(`id-${Math.random().toString(36).slice(2)}`);
    }
  }, [id]);
  
  return id || 'loading';
}

// Note: These alternatives may not be SSR-safe like useId