React v19 with Vite v6 and ChakraUI show error "Failed to resolve import "@chakra-ui/react""

I created my empty react app with Vite v.6 and install Chakra UI. But after starting the application, I see an error:

"Internal server error: Failed to resolve import "@chakra-ui/react".

I have installed @chakra-ui/react. I use macOS. The problem is, no matter what I import from chakra-ui, the error is shown.

• main.tsx

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
import React from "react"
import ReactDOM from "react-dom/client"
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import './styles/index.css'
import MainLayout from "./shared/layouts/MainLayout";
import Dashboard from "./modules/hex-grid/pages/dashboars/Dashboard";

const routes = createBrowserRouter([
  {
    element: <MainLayout />,
    children: [
      { index: true, element: <Dashboard /> },
    ],
  },
])

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChakraProvider value={defaultSystem}>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        <RouterProvider router={routes} />
      </ThemeProvider>
    </ChakraProvider>
  </React.StrictMode>,
)

• package.json

{
  "name": "vite-ts",
  "private": true,
  "version": "1.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^3.16.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@tailwindcss/vite": "^4.1.4",
    "framer-motion": "^12.7.4",
    "next-themes": "^0.4.6",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.5.1",
    "tailwindcss": "^4.1.4"
  },
  "devDependencies": {
    "@chakra-ui/cli": "^3.16.0",
    "@types/react": "^19.1.1",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.3.4",
    "typescript": "^5.8.3",
    "vite": "^6.2.6"
  }
}

I have uploaded the application to github so that you can reproduce my problem. (I even rebooted the computer and it didn't help.)

This is overriding Chakra UI's import path. You don't need to add extra path in your vite.config.ts file.

Before

import react from "@vitejs/plugin-react"
import { resolve } from "path"
import { defineConfig } from "vite"
import tailwindcss from '@tailwindcss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@chakra-ui/react": resolve("..", "..", "packages/react/src"),
    },
  },
})

After

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});