Как я настроил окружение для React/Vue с нуля в 2026 (и что пошло не так)

Признаюсь честно: я думал, что настроить React или Vue — дело пяти минут. Установил Node.js, запустил create-react-app и… всё сломалось. Сначала не стартовал dev-сервер, потом ругался на версии пакетов, а в конце я потратил три вечера на то, чтобы просто увидеть надпись «Hello World» на экране.

В этой статье я по шагам расскажу, как я с нуля поднимал окружение для React и Vue в 2026 году. И главное — покажу, какие ошибки возникали и как я их чинил. Если вы тоже мучаетесь с зависимостями — вам сюда.

1. С чего я начал (и что было не так с самого начала)

У меня уже стоял Node.js (версия 18.17.0). Я думал — этого хватит. Запускаю:

npx create-react-app my-app
cd my-app
npm start

И вижу в консоли:

Error: error:0308010C:digital envelope routines::unsupported

Как я решил: пришлось понизить версию Node до 16.20.2. Я использовал nvm (Node Version Manager):

nvm install 16.20.2
nvm use 16.20.2

После этого create-react-app запустился без ошибок. Мораль: всегда проверяйте совместимость версий, особенно если ставите окружение впервые.

2. Современный способ: Vite вместо устаревших сборщиков

На сайте React теперь рекомендуют фреймворки (Next.js, Remix), но мне для обучения нужен был просто React + роутинг. И тут я узнал про Vite — он в разы быстрее и проще.

Как создать React-проект через Vite (уже без ошибок):

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Всё запустилось с первого раза! Vite сам подтянул нужные зависимости и не ругался на версию Node.

2.1 Что пошло не так с Vite (и тут была вторая ошибка)

Когда я попробовал добавить React Router, появилась ошибка:

export 'useHref' (imported as 'useHref') was not found in 'react-router-dom'

Причина: я установил react-router-dom версии 7.x, которая несовместима с React 18. Решение:

npm install react-router-dom@6.14.2

3. Настройка Vue 3 — казалось, будет проще, но...

Vue всегда славился низким порогом входа. Я установил:

npm create vue@latest my-vue-app

Утилита задала несколько вопросов (нужен ли Pinia, Vitest, TypeScript). Я согласился на всё. И получил ошибку при установке зависимостей:

ERESOLVE unable to resolve dependency tree
peer dependency conflict: eslint-plugin-vue@9.14.0 requires eslint@^6.2.0 || ^7.0.0 || ^8.0.0

Это классический конфликт peer dependencies. У меня был установлен ESLint 9.x, а плагин для Vue требовал 8.x.

Как я победил: два варианта:

# 1) Понизить версию ESLint
npm install eslint@8.57.0 --save-dev

# 2) Использовать флаг --force (но это опасно, я не рекомендую)
npm install --force

Я выбрал первый путь — понизил версию, и всё заработало. Вообще, совет на будущее: если создаёте новый проект, не ставьте глобальные инструменты (ESLint, Prettier) последних версий — проверяйте совместимость со стеком.

4. Пошаговая инструкция, которая работает (без танцев с бубном)

Чтобы вы не повторяли моих ошибок, вот чистый алгоритм, который я проверил на чистом Mac и Windows (через WSL).

4.1 Установите правильную версию Node

# Установите nvm (если ещё нет)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Перезапустите терминал, затем:
nvm install 18.18.0
nvm use 18.18.0

4.2 Выберите шаблон и создайте проект

Для React:

npm create vite@latest react-app -- --template react
cd react-app
npm install
npm run dev

Для Vue:

npm create vue@latest vue-app
cd vue-app
npm install
npm run dev

4.3 Типичные ошибки и их решения (шпаргалка)

5. Мой финальный чек-лист (чтобы вы не тратили 3 дня)

• ✅ Установи nvm и держи под рукой Node 18 LTS
• ✅ Для новых проектов используй Vite (не create-react-app)
• ✅ Если ошибка — сначала проверь версии пакетов (npm list)
• ✅ Не ставь глобальные линтеры последних мажорных версий
• ✅ Добавь .nvmrc с версией Node в корень проекта

6. Задание для закрепления

Попробуйте сами создать проект на Vite + React, добавить туда React Router и сделать две страницы («Главная» и «О нас»). Если что-то пойдёт не так — вернитесь к таблице ошибок выше.

// App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() { return <h2>Главная</h2>; }
function About() { return <h2>О нас</h2>; }

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Главная</Link> | <Link to="/about">О нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

Если эта статья помогла вам сэкономить пару вечеров — буду рад. В следующей части расскажу, как я подключал базу данных к проекту и снова всё ломал (спойлер: виноват был неправильный драйвер).

А вы сталкивались с ошибками при настройке окружения? Делитесь в комментариях (или напишите мне в Telegram — найдёте контакты на главной).

Читайте также: JS-шпаргалка: методы массивов map, filter, reduce