Автоподсказка в VS Code для Next.js не работает, а проект Next.js, созданный с помощью create-next-app, работает некорректно.

Содержание

Вопрос или проблема
Ответ или решение
Проблема 1: Автодополнение в VS Code для Next.js
Проблема 2: Некорректные импорты
Проблема 3: Ошибка с use client
Общие рекомендации

Вопрос или проблема

Автоподсказки в vscode для nextjs, например: className для любого элемента, или placeholder для input, или src для компонента Image из next не отображаются в новом приложении next.js, созданном с помощью create-next-app на JavaScript.

С этим я могу жить, но даже импорты не работают правильно, обычно в клиентском компоненте, когда я импортирую usestate, он приходит из “react”, но теперь я получаю “react/cjs/react.production.min” или “react/cjs/react.development”.

И наконец, когда я добавляю клиентский компонент в page.js (компонент Home), я получаю ошибку в layout.js, что
Вы пытаетесь экспортировать “metadata” из компонента, помеченного “use client”, что не разрешено. Либо удалите экспорт, либо директиву “use client”

даже несмотря на то, что в странице layout нет “use client” нигде, и когда я удаляю клиентский компонент, все работает нормально. Я даже не добавляю клиентский компонент напрямую на странице layout

Для автоподсказок я пытался включать и отключать checkjs в настройках, я перезапускал некоторые расширения, такие как eslint, ES7 react snippets, я спросил chat gpt, он сказал мне изменить jsconfig, ничего из этого не сработало. Я пытался создать новый проект nextjs, все те же проблемы (подсказки, импорты, клиентский компонент), я даже пробовал это в проекте react, но никаких подсказок.
React и React-dom версии 18, а next версии 14.2.15, я также пробовал 14.2.2, изменений все равно нет.

Ответ или решение

К сожалению, возникают проблемы с автодополнением в Visual Studio Code (VS Code) для проектов, созданных с помощью create-next-app, а также с некорректными импортами и ошибками в компоненте с директивой "use client".

Проблема 1: Автодополнение в VS Code для Next.js

Отсутствие автодополнения для таких атрибутов, как className, placeholder или src для компонента Image может быть связано с несколькими факторами:

Необновлённые расширения: Убедитесь, что у вас установлены и обновлены следующие расширения:
- ESLint
- Prettier
- ES7 React/Redux snippets
- TypeScript (если вы планируете его использовать)
- Vetur (если проект включает Vue)
Параметры настройки:
- Проверьте файл jsconfig.json. Он должен быть правильно настроен следующим образом:
```
{
"compilerOptions": {
 "target": "ESNext",
 "module": "ESNext",
 "baseUrl": ".",
 "paths": {
   "*": ["node_modules/*", "src/types/*"]
 }
},
"include": ["./src/**/*"]
}
```
- Попробуйте отключить и снова включить параметр checkJs в настройках VS Code.
Кэш и перезагрузка: Иногда кэш может вызывать проблемы. Попробуйте перезапустить VS Code или очистить кэш. Также может помочь устранение и повторная установка проблемных расширений.

Проблема 2: Некорректные импорты

Импорт из "react/cjs/react.production.min" или "react/cjs/react.development" вместо "react" может указывать на проблему с конфигурацией или установкой пакетов React и React-DOM. Убедитесь, что:

У вас установлены последние версии React и React-DOM:
```
npm install react@latest react-dom@latest
```
Проверьте файл package.json на наличие дубликатов или неправильных версий.

Проблема 3: Ошибка с `use client`

Ошибка, связанная с экспортом metadata из компонента с директивой "use client", возникает, когда вы пытаетесь экспортировать значения из клиента, что недопустимо. Убедитесь, что:

В layout.js и других компонентах действительно отсутствует директива "use client".
Все данные, которые вы собираетесь экспортировать, должным образом обрабатываются и не нарушают правила, установленные для use client.

Общие рекомендации

Создание нового проекта: Иногда, если проект имеет слишком много изменений и настройка не работает должным образом, полезно начать с чистого проекта. Убедитесь, что у вас установлена последняя версия create-next-app:
```
npx create-next-app@latest my-next-app
```
Обновления и зависимости: Поддерживайте все зависимости актуальными:
```
npm update
```
Логи: Проверьте консоль разработчика в браузере и терминале для выявления дополнительных подсказок об ошибках.

Соблюдение вышеуказанных рекомендаций должно помочь решить проблемы с автодополнением, некорректными импортами и ошибками, связанными с директивой "use client". Если проблемы продолжаются, возможно, стоит обратиться на официальные форумы или GitHub репозиторий Next.js для получения дополнительной помощи.