DEV Community: Sanon Joas

How I Fixed a PHP Version Mismatch on Hostinger Shared Hosting (And What Actually Made It Work)

Sanon Joas — Mon, 01 Jun 2026 03:48:17 +0000

I spent way too long staring at this error. If you're here, you probably are too.

Your requirements could not be resolved to an installable set of packages.
  Problem 1
    - Root composer.json requires php ^8.3 but your php version (8.2.30)
      does not satisfy that requirement.

My Laravel 13 app needed PHP 8.3. My Hostinger server was running 8.2. composer install refused to budge. Here's exactly what happened and the one-liner that fixed it.

The Setup

I was deploying a Laravel 13 + Inertia + React app to Hostinger shared hosting. Laravel 13 requires PHP 8.3 minimum — and so do its locked Symfony 8.x and PHPUnit 12.x dependencies. My composer.lock had been generated on a local machine with PHP 8.3, but Hostinger's CLI was defaulting to 8.2.

The hPanel showed PHP 8.3 selected under PHP Configuration. The website itself was running fine on 8.3. But SSH? Still on 8.2.

$ php -v
PHP 8.2.30 (cli)

That disconnect — hPanel vs. CLI — is the trap.

What I Tried First

`composer update`

My first instinct was to just let Composer resolve newer compatible versions:

composer update

No luck. The root composer.json itself declared "php": "^8.3", so Composer refused before even touching the lock file. The PHP constraint wasn't just in dependencies — it was in my own project requirements.

`composer install --ignore-platform-reqs`

This flag skips platform checks and forces the install anyway. It works, but it's a lie — you end up with packages that may behave incorrectly or fail at runtime because they genuinely require PHP 8.3 features. Not a real fix.

Changing PHP in hPanel

Hostinger's control panel has a PHP version switcher under Hosting → Manage → PHP Configuration. I had already set this to 8.3. This controls the web server / FPM version — what runs your .php files in the browser. It does not change what php points to in your SSH terminal.

That's the key distinction most tutorials miss.

What Actually Fixed It

Hostinger installs multiple PHP versions in parallel. They live in /opt/alt/phpXX/usr/bin/. I confirmed this:

ls /opt/alt/
# php74  php80  php81  php82  php83  php85

The php command in my shell was just an alias pointing at 8.2. To override it, I prepended the 8.5 binary path to my $PATH:

export PATH="/opt/alt/php85/usr/bin:$PATH"

Then immediately:

$ php -v
PHP 8.5.0 (cli)

$ composer install
Installing dependencies from lock file...

Everything resolved. Clean install.

Making It Permanent

The export command only lasts for your current SSH session. To make it stick, add it to your shell profile:

echo 'export PATH="/opt/alt/php85/usr/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

If you're using zsh (less common on shared hosts but possible):

echo 'export PATH="/opt/alt/php85/usr/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Now every new SSH session will default to your chosen PHP version.

Why This Works

On shared hosting, the server runs many customers with potentially different PHP version requirements. Hostinger solves this by installing every version in its own isolated directory under /opt/alt/. Your hPanel selection sets an environment variable or symlink that the web server reads when handling HTTP requests — but your SSH shell starts with its own default $PATH that may point somewhere else entirely.

By putting the right /opt/alt/phpXX/usr/bin at the front of $PATH, you tell the shell to find php there before checking anywhere else. which php will confirm the change:

$ which php
/opt/alt/php85/usr/bin/php

Composer reads php from your $PATH too, so once the CLI version is right, composer install and composer update both work correctly without any flags or workarounds.

TL;DR

Action	Effect
Change PHP in hPanel	Fixes web/browser PHP version only
`composer install --ignore-platform-reqs`	Dangerous workaround, not a real fix
`export PATH="/opt/alt/php85/usr/bin:$PATH"`	Fixes CLI PHP version — this is the fix
Add the export to `~/.bashrc`	Makes it permanent across SSH sessions

If you're on Hostinger (or any cPanel-based shared host with alt-php), the version mismatch between hPanel and SSH CLI is almost always the culprit. The $PATH override is the clean, correct solution.

Deploying a Laravel app to shared hosting? The combination of PHP version mismatches, composer.lock conflicts, and the hPanel/CLI disconnect can burn hours. Hope this saves you some.

Implementing a Custom Dark Mode Hook in Next.js

Sanon Joas — Fri, 25 Oct 2024 01:51:36 +0000

Dark mode has become an essential feature in modern web applications. In this tutorial, we'll create a custom dark mode hook for Next.js using TypeScript, which supports system preferences and allows manual override.

Prerequisites

Basic knowledge of React and Next.js
Node.js installed on your machine
A Next.js project set up with TypeScript

Step 1: Create the Dark Mode Hook

First, let's create our custom dark mode hook. Create a new file useDarkMode.ts in your project's hooks folder:

// hooks/useDarkMode.ts
import { useState, useEffect, useCallback } from 'react'

type Mode = 'light' | 'dark' | 'system'

export const useDarkMode = () => {
  const [mode, setMode] = useState<Mode>('system')

  const applyTheme = useCallback((isDark: boolean) => {
    document.documentElement.classList.toggle('dark', isDark)
  }, [])

  const changeMode = useCallback((newMode: Mode) => {
    setMode(newMode)
    localStorage.setItem('theme', newMode)
  }, [])

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') as Mode | null
    if (savedTheme) {
      setMode(savedTheme)
    }

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

    const handleSystemThemeChange = (event: MediaQueryListEvent) => {
      if (mode === 'system') {
        applyTheme(event.matches)
      }
    }

    const applyCurrentTheme = () => {
      if (mode === 'system') {
        applyTheme(mediaQuery.matches)
      } else {
        applyTheme(mode === 'dark')
      }
    }

    applyCurrentTheme()

    mediaQuery.addEventListener('change', handleSystemThemeChange)

    return () => {
      mediaQuery.removeEventListener('change', handleSystemThemeChange)
    }
  }, [mode, applyTheme])

  return { mode, changeMode }
}

This hook manages the dark mode state, applies the theme to the document, and listens for system preference changes.

Step 2: Create a Dark Mode Provider

Now, let's create a provider component to wrap our app. Create a new file DarkModeProvider.tsx in your project's components folder:

// components/DarkModeProvider.tsx
import React, { createContext, useContext } from 'react'
import { useDarkMode } from '../hooks/useDarkMode'

type DarkModeContextType = ReturnType<typeof useDarkMode>

const DarkModeContext = createContext<DarkModeContextType | undefined>(undefined)

export const DarkModeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const darkMode = useDarkMode()

  return (
    <DarkModeContext.Provider value={darkMode}>
      {children}
    </DarkModeContext.Provider>
  )
}

export const useDarkModeContext = () => {
  const context = useContext(DarkModeContext)
  if (context === undefined) {
    throw new Error('useDarkModeContext must be used within a DarkModeProvider')
  }
  return context
}

This provider component will make our dark mode functionality available throughout the app.

Step 3: Wrap Your App with the Dark Mode Provider

Update your pages/_app.tsx file to use the DarkModeProvider:

// pages/_app.tsx
import type { AppProps } from 'next/app'
import { DarkModeProvider } from '../components/DarkModeProvider'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <DarkModeProvider>
      <Component {...pageProps} />
    </DarkModeProvider>
  )
}

export default MyApp

Step 4: Create a Theme Toggle Component

Create a new component for the theme toggle button. Create a file ThemeToggle.tsx in your components folder:

// components/ThemeToggle.tsx
import React from 'react'
import { useDarkModeContext } from './DarkModeProvider'

const ThemeToggle: React.FC = () => {
  const { mode, changeMode } = useDarkModeContext()

  return (
    <select
      value={mode}
      onChange={(e) => changeMode(e.target.value as 'light' | 'dark' | 'system')}
      className="p-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-white"
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="system">System</option>
    </select>
  )
}

export default ThemeToggle

Step 5: Add CSS for Light and Dark Themes

Update your styles/globals.css file to include styles for both light and dark themes:

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

.dark {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 0, 0, 0;
  --background-end-rgb: 0, 0, 0;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

Step 6: Use the Theme in Your Components

Now you can use the theme in your components. Update your pages/index.tsx:

// pages/index.tsx
import Head from 'next/head'
import ThemeToggle from '../components/ThemeToggle'

export default function Home() {
  return (
    <div className="min-h-screen p-4">
      <Head>
        <title>Dark Mode Demo</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-4">Welcome to Dark Mode Demo</h1>
        <ThemeToggle />
        <p className="mt-4">This is some sample text to show the theme change.</p>
      </main>
    </div>
  )
}

Step 7: Configure Tailwind for Dark Mode

Update your tailwind.config.js to enable the 'class' strategy for dark mode:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ... rest of your config
}

Step 8: Test Your Dark Mode

Run your Next.js application:

npm run dev

Visit http://localhost:3000 in your browser. You should now see your application with a working dark mode toggle that respects system preferences and allows manual override!

Conclusion

Congratulations! You've successfully implemented a custom dark mode hook in your Next.js application. This implementation uses React hooks for state management, respects system preferences, allows manual override, and uses Tailwind CSS for styling.

Remember to consider accessibility when implementing dark mode, ensuring that there's sufficient contrast between text and background colors in both themes.

Happy coding!