Перенести страницы и настроить роутинг
Выполняется
| Планируемый запуск: | 10.02.2021 | Дата начала: | 10.02.2021 | Планируемое завершение: | 12.02.2021 | Дата завершения: |
Описание задачи
Перенести страницы и настроить роутинг в nextJs
| Проект | Задача | Статус | Дата постановки | Начало | Конец | Кто создал |
|---|---|---|---|---|---|---|
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 17.09.2023 18:43:04 | 17.09.2023 18:57:35 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 27.03.2022 08:49:15 | 05.04.2022 16:53:38 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 27.03.2022 08:49:11 | 27.03.2022 08:49:12 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 17.02.2021 18:00:27 | 17.02.2021 18:04:34 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 17.02.2021 18:00:25 | 17.02.2021 18:00:26 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 13.02.2021 06:19:04 | 13.02.2021 10:17:02 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 12.02.2021 23:52:06 | 13.02.2021 15:16:23 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 12.02.2021 13:42:17 | 12.02.2021 23:39:35 | |
| Учебный проект на next-js. Покемоны. | Перенести страницы и настроить роутинг | Выполняется | 10.02.2021 13:10:32 | 10.02.2021 17:41:56 | 10.02.2021 21:48:51 |
Колян немного не вкуриваю форк сделал, но почему-то он голый совсем. Так и должно быть?
Почему же он голый, если там написано?:
export { default } from 'src/pages/MainPage'
То есть это буквально следующее:
import MainPage from 'src/pages/MainPage'
export default MainPage
А в src/pages/MainPage смотрел? Что там?
Еще вопрос как запустить проект на все команды выкидывает ошибки:
yarn build
yarn run v1.22.10
$ next build && tsc --project tsconfig.server.json
/bin/sh: 1: next: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
yarn start
yarn run v1.22.10
$ cross-env NODE_ENV=production node dist/server/index.js
/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
yarn dev
yarn run v1.22.10
$ nodemon
/bin/sh: 1: nodemon: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Понял. Только он ругаться начал нет компонента next-seo.
Все устоновил next-seo пересобрал и запустился.
>> Все устоновил next-seo пересобрал и запустился.
Что значит установил его? Ты должен был изначально все установить yarn [install]. next-seo же тоже в package.json прописан.
>> Еще вопрос как запустить проект на все команды выкидывает ошибки:
Так потому и выкидывает, что ты не выполнил установку зависимостей
Я думал, yarn [install] для установки самого, поэтому не запускал его.
Развожу руками...
И что теперь делать перезапускать все с нуля?
Просто установи зависимости и все. yarn
Далее запускайся в деве yarn dev
Кстати, проверь git status. Наверняка у тебя сейчас появились изменения в package.json (записалась новая версия пакета next-seo). Если так (и нет никаких других еще твоих изменений), отмени их сразу, чтобы не мешались. git reset --hard
Папку __tests__, которая лежит в MainPage нужно добавлять в каждую страницу?
Нет. Пока можешь вообще удалить ее. Unit-тесты - это отдельная тема и мы ее не проходили. Они помогают в адльнейшем в том, чтобы проверять, что очередное улучшение ничего не сломало, но на ранних этапах только время отнимет, и непосредственно на функционал никак не влияют.
Что со стилями делать переносить, как есть или создовать папку View и в ней styles с index.ts?
В кадом компоненте, где нужны свои стили, или ./styles.ts, или ./styles/index.ts
Структуру перенес, но комит отправить не получается у тебя же там проверки, а у меня все красное.
Делай git commit --no-verify
git push --no-verify
А там я посмотрю в чем ты накосячил.
Да я не накосячил я перенес, как есть и все, я пока не понимаю, что там нужно менять)
Ну выливай, посмотрю.
Задача перенос структуры https://github.com/p1aton/prisma-nextjs/commit/c3ab531267c87d7d4920c79456e7cf05bf3d4fbe
yarn types
988 ошибок typescript...
yarn lint
102 стилистические ошибки.
А ты хотел все доделать, а потом переносить...
И установи в своей IDE в настройках размер таба - 2 пробела. У тебя 4 стоит. В JS принято 2.
Ох, 4 часа получилось...
На всякий случай и здесь отмечусь))
Дима, по возможно, тоже посмотри это видео, пусть не сразу, но час-два в день и вот уже посмотрел все.
Там несколько растянуто, одно и то же в нескольких местах, но зато все же подробно все основные моменты рассматриваются. Практически со всем этим вы будете сталкиваться не раз, так что надо хотя бы примерно знать как такие вещи решаются, чтобы потом хотя бы спросить могли "напомни, как в таких случаях такое-то решается?".
Супер! Конечно: у себя раверну и вперет - смотреть. Спасибо!
Не за что!
Смотрю видос пытаюсь въехать, если честно думал, что тайпскрипт сам определяет к какому типу тот или иной объект относится, а получается, что мы сами должны сначала все определить и только тогда он будет понимать, что можно добавлять, а что нельзя.
Нет, где он может, он определяет.
К примеру, если ты сделаешь
const user = {
id: 1,
username: "Neo",
fullname: "Олег",
}
Он тут поймет что это за тип, только ты не сможешь тут указать необязательные поля и не сможешь указать больше.
И можно даже из него тип создать.
type User = typeof user;
И получишь тип:
type User = {
id: number;
username: string;
fullname: string;
}
И можешь тогда пользователей так создавать:
const user2: User = {
id: 2,
username: "Fi1osof",
fullname: "Николай",
}
Но можно и расширить тип:
type User = typeof user & {
email?: string
};
И тогда уже новому пользователю можно задать емейл. Только обрати внимание, что создание типа User из объекта user совсем не делает объект user typeof User. Тот сам по себе. Мы просто говорим "А создай-ка нам из структуры такого-то объекта Тип, чтобы мы могли создавать подобные объекты с таким же типом и они были совместмы". И если мы делаем расширенный тип с новыми обязательными полями, то этот тип уже не будет совместим с исходным объектом.
Вот можешь поиграться здесь: https://www.typescriptlang.org/play?#code/LAKAxg9...
А файл inde.d.ts и global.d.ts ты через какой-то модуль устанавливал или просто с проекта на проект перекидываешь? И где они лежат, они у меня в сборке есть, я нашел какой-то но он практически пустой со стайлед компонентом.
Блин, твои вопросы из серии "Я в лесу цветок видел, не знаешь как он называется"? Учись прикладывать ссылки на файлы.
Ты в своем видео постояно обращаешься к конфигурационому файлу тайпскрипта index.d.ts, который у тебя лежит в папке react видимо в модулях у меня там нет такого файла в модулях вот и спрашиваю от куда этот конфиг взялся где все правила для типов определены?
Просто он не в node_modules/react лежит, а в node_modules/@types/react.
Смысл в том, что декларационные файлы (.d.ts) могет лежать практически где угодно, и совсем не обязаны иметь прямого отношения к реальным js-файлам. Они просто объявляют типы. А так как много компонтентов написаны не на ts, а на js (в том числе react), то когда мы ставим эти зависимости, ts ничего не знает о их типах. Вот для решения этих проблем есть проект DefinitelyTyped. В нем дописывают типы для многих популярных компонентов, написанных не на ts, в том числе и для react. Потом эти компоненты выливаются в npm и имеют префикс @types. К примеру вот @types/react.
В проект эти зависимости добавляются как devDependencies и нужны только для процесса разработки. В нашем package.json ты тоже найдешь их.
"devDependencies": {
"@graphql-codegen/add": "^2.0.1",
"@graphql-codegen/cli": "^1.17.10",
"@graphql-codegen/introspection": "^1.18.0",
"@graphql-codegen/near-operation-file-preset": "^1.17.11",
"@graphql-codegen/typescript": "^1.17.10",
"@graphql-codegen/typescript-apollo-client-helpers": "^1.1.0",
"@graphql-codegen/typescript-operations": "^1.17.8",
"@graphql-codegen/typescript-react-apollo": "^2.0.7",
"@next/bundle-analyzer": "^9.5.5",
"@storybook/addon-actions": "^6.0.28",
"@storybook/addon-docs": "^6.0.28",
"@storybook/addon-links": "^6.0.28",
"@testing-library/react": "^10.0.1",
"@testing-library/react-hooks": "^3.4.2",
"@types/apollo-upload-client": "^14.1.0",
"@types/css": "^0.0.31",
"@types/cypress": "^1.1.3",
"@types/express": "^4.17.8",
"@types/glob": "^7.1.3",
"@types/jest": "^25.1.4",
"@types/lodash": "^4.14.161",
"@types/node": "^13.9.5",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/styled-components": "^5.1.4",
"@types/urijs": "^1.19.12",
"@typescript-eslint/eslint-plugin": "^2.25.0",
"@typescript-eslint/parser": "^2.25.0",
Я смотрел в других проектах там тайп скрипт используют в самой странице компонента, обязательно создавать отдельные файлы, есть в этом какой-то замысел?
Олег, ты не представляешь как много всяческих подходов. В какой проект не зайдешь - у них там по-своему. Вот и получается, что в каждом проекте объявляются и действуют внутренние соглашения. То есть если ты свой проект будешь делать и для себя - делаешь там как хочешь. Я же делаю так, и если ты используешь этот проект и зовешь меня на ревью, то должен следовать моим соглашениям.
У меня же логика создания отдельных интерфейс-файлов такая же, как и для любых других сущностей: по возможности одна сущность - один файл. Так гораздо проще ориентироваться. Знаешь: зашел в файл, там сразу начинается с головы та сущность, которую ты ожидаешь.
Ты не думай, что все типы будут маленьгие по объему. К примеру, может быть и вот такой. И поверь, это еще не самый большой.
В самом начале видео ты говоришь, что я указал плохо ссылку в кооммите, нужно было с переносом, я нажимал CTRL + Enter для перехода на другую строку, когда добовлял ссылку, в чем ошибка не совсем понимаю?
Вообщем, что-то пошло не так:)
1. Не работает подсветка в css в styled компоненте.
2. После запуска yarn format и проверки все тоже самое, как у тебя git diff git diff src/components/Header/index.tsx показывает изменения только, что убрал закрывающие точки с запятой отступы spasec не изменились. В редакторе я поменял spasec на 2.
Есть подозрения, что что-то с установкой намудрил при повторном запуске yarn показывает успех 1/4 пакетов. Все правильно или должно быть все-таки 4?
<< В самом начале видео ты говоришь, что я указал плохо ссылку в кооммите, нужно было с переносом, я нажимал CTRL + Enter для перехода на другую строку, когда добовлял ссылку, в чем ошибка не совсем понимаю?
Ctrl+Enter - это не всегда перенос строки. Зависит от редактора. Надо было просто смотреть на конечный результат. Скорее всего просто Enter надо было, как в обычном текстовом редакторе. А так у тебя получилось все просто в одну строку.
Date: Wed Feb 10 19:29:14 2021 +0300
Transferring the project structure https://freecode.academy/tasks/ckkzgb01fwmn00730jcb8ngyf
<< 1. Не работает подсветка в css в styled компоненте.
Просто у тебя в IDE не установлен плагин. У меня вот этот стоит: https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components
Вот на всякий случай список всех установленных у меня расширений.
$ code --list-extensions | xargs -L 1 echo code --install-extension
code --install-extension 13xforever.language-x86-64-assembly
code --install-extension alefragnani.pascal
code --install-extension alefragnani.pascal-formatter
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension CADENAS.vscode-glsllint
code --install-extension cssho.vscode-svgviewer
code --install-extension dbaeumer.vscode-eslint
code --install-extension donjayamanne.githistory
code --install-extension ecmel.vscode-html-css
code --install-extension EditorConfig.EditorConfig
code --install-extension EngineDesigns.retroassembler
code --install-extension fi1osof.prisma-cms
code --install-extension GraphQL.vscode-graphql
code --install-extension Gruntfuggly.todo-tree
code --install-extension henriiik.vscode-perl
code --install-extension imperez.smarty
code --install-extension infeng.vscode-react-typescript
code --install-extension jakob101.RelativePath
code --install-extension jpoissonnier.vscode-styled-components
code --install-extension kumar-harsh.graphql-for-vscode
code --install-extension lonefy.vscode-JS-CSS-HTML-formatter
code --install-extension mgmcdermott.vscode-language-babel
code --install-extension mhutchie.git-graph
code --install-extension mikestead.dotenv
code --install-extension mquandalle.graphql
code --install-extension ms-vscode.cpptools
code --install-extension prb28.amiga-assembly
code --install-extension redhat.java
code --install-extension richterger.perl
code --install-extension Roncho.assembly-8086
code --install-extension scala-lang.scala
code --install-extension searKing.preview-vscode
code --install-extension slevesque.shader
code --install-extension syler.sass-indented
code --install-extension sysoev.language-stylus
code --install-extension technosophos.vscode-make
code --install-extension tht13.python
code --install-extension VisualStudioExptTeam.vscodeintellicode
code --install-extension vscjava.vscode-java-debug
code --install-extension vscjava.vscode-java-dependency
code --install-extension vscjava.vscode-java-pack
code --install-extension vscjava.vscode-java-test
code --install-extension vscjava.vscode-maven
code --install-extension wingrunr21.vscode-ruby
code --install-extension Wscats.eno
code --install-extension xabikos.ReactSnippets
code --install-extension yzhang.markdown-all-in-one
code --install-extension zenor.makefile-creator
>> 2. После запуска yarn format и проверки все тоже самое, как у тебя git diff git diff src/components/Header/index.tsx показывает изменения только, что убрал закрывающие точки с запятой отступы spasec не изменились. В редакторе я поменял spasec на 2.
А ты уже исправил там сам синтаксис? У тебя там styled, или как и было, просто стили? Если просто стили, он этого не поменяет, пока не поправишь синтаксис.
И после того, как изменил в настроках отступы, надо закрыть все файлы. В текущих он сразу не меняет.
Расширение поставил теперь стили нормально отображаются.
По поводу yarn format я повторял все действия за тобой и проверял файл обычный tsx, который ты проверял у тебя там появились отступы у меня только точки с запятой убрал.
Это я в видосе показывал как я час что-то делал, делал, а потом такой вжух, и запустил, и работает. Это мелочи... Вот я тут на рабочем проекте делал агрегатор API (бэк имеет несколько эндпоинтов, и я замучился проксировать запросы с разделением логики для авторизованных/неавторизованных, да еще и для разных запросов). В итоге решил сделать в самом проекте проксирующий GraphQL-сервер, чтобы в нем уже настроить работу с несколькими АПИ-серверами, а с фронта все запросы шли только на него, как на один эндпоинт.Так вот, три дня упорной работы (больше, чем по 12 часов в день), и в браузер практически не смотрел вообще. 2 дня внедрял агрегатор, потом день обновлял фронт, потому что запросы поменялись и надо было во фронте все обновить. Так вот, сегодня выкатили обновление во фронт, и все работает как и работало. А коммит при этом вот такой получился:
>> По поводу yarn format я повторял все действия за тобой и проверял файл обычный tsx, который ты проверял у тебя там появились отступы у меня только точки с запятой убрал.
Кинь ссылку на проблемный файл.
yarn format не зависит от редактора, это просто терминальная утилита. Когда запускаешь, результат работы выводится в терминал? Вот так:
Это все нормально и даже есть исправляения, но ты очень серьезно к переносу строк подошел, а у меня они почему-то не меняются.
В общем, он GlobalStyle.ts не хочет нормально форматировать. То есть проблема не у тебя, а в самом компоненте formatter. Но это мелочи. Сам чуть подправь и все.
Но в целом можно забить.
Я проверяю git diff src/components/Header/index.tsx как ты на видео, он JSX компоненты не хочет формотировать по отступам.
>> Я проверяю git diff src/components/Header/index.tsx как ты на видео, он JSX компоненты не хочет формотировать по отступам.
Вот я только что выполнил формат, и все ОК
У тебя он вообще ничего не форматирует?
Во, попробуй так: yarn format --tab-width 2
Все, нашел. Оказывается, есть есть у него отдельная настройка. Видимо у тебя в системе все-таки 4 стоит по умолчанию, и он оттуда значение выдергивает. Но можно жестко задать.
Документация: https://prettier.io/docs/en/options.html
В https://github.com/p1aton/prisma-nextjs/blob/master/.prettierrc допиши настройку "tabWidth": 2 и попробуй еще раз. ОК должно быть.
Я в основной проект тоже добавил https://github.com/prisma-cms/nextjs/commit/2be91e33afc8d3f3485f807f4334624f2b68631f
Кстати, тут сомтрел как можно проверить что зацепит преттиер, но так, чтобы без записи (yarn format - там сразу --write прописано).
Попробуй вот так:
yarn prettier --tab-width 5 . -c
Вот в варны выводит файлы-претенденты под форматирование
[warn] src/index.tsx
[warn] src/lib/apolloClient/createApolloClient/index.ts
[warn] src/lib/apolloClient/createApolloClient/interfaces.ts
[warn] src/lib/apolloClient/index.ts
[warn] src/lib/apolloClient/interfaces.ts
[warn] src/modules/gql/cli/generateTypes/__tests__/index.test.ts
[warn] src/modules/gql/cli/generateTypes/constants.ts
[warn] src/modules/gql/cli/generateTypes/files.ts
[warn] src/modules/gql/cli/generateTypes/generateTypes.ts
[warn] src/modules/gql/cli/generateTypes/run.ts
[warn] src/modules/gql/cli/generateTypes/schema.ts
[warn] src/modules/gql/cli/generateTypes/types.ts
А если все ОК, то будет такое:
All matched files use Prettier code style!
Что за плагин ты используешь, когда показываешь копируешь пропсы строку, потом берешь везде ставишь курсор нажимешь cntrl+enter и они у тебя в столбец выстраиваются, а потом вообще магия сразу во все строках двояточия ставишь и пишешь одновременно string?
Это встроенная фича ВСкола. Горячие клавиши Ctrl+Shift+i (но соответственно надо смотреть настройки редактора, могут отличаться).
Но для разных файлов могут понадобиться разные плагины. Это специальная категория плагинов - форматтеры. Если нажмешь форматирование и ВСкод не поймет как форматировать, он предложит найти и установить соответствующий. Вот у меня установленные:
Но как видно, у меня нет сейчас активного форматтера для ts, так что это стандартное форматирование редактора сейчас используется.
Три коммита поправил:
Формат
Layout
Game
PokemonCard
Оставил на гитхабе комменты. Блин, юзабилити в гитхабе часто просто взрывает мозг. Нет возможности просто взять и перейти во вкладку "Комментарии". Есть типа "Вкладки" и информация сколько комментов, но это не кликабельно никак.
Долго искал. Оказалось, они сразу выводятся в самом низу страницы https://github.com/p1aton/prisma-nextjs/compare/Task2
Но туда же еще доскроллить надо. Почем не сделать хотя бы ссылку якорь?! Ух, подгорает!
Застрял на моменте где ты запускаешь сайт 1:45 мин. сайт запустился, но рубашки покемонов отображаются неправильно. Ошибок вроде нет, даже уже попробовал твой код с ПР вставлять менял полностью код карточки и стилей все равно выглядят, как нас крине. Уже не знаю куда копать.
Делай коммит, выливай, посмотрю. Я так-то не телепат.
Щас гляну
Кстати, что тебе мешает скачать мою версию, запустить и в браузере сравнить стили и разметку?
Напоминаю, можно порт указывать, к примеру PORT=3001 yarn dev, тогда запустится параллельно на другом порту (соответственно в другой папке проект должен быть, чтобы не перетирало при переключении бранчей.)
Так я же тебе написал выше, что я пробовал твои стили ставить и карточку менять, но не работает.
Разобрался. Ты глобальные стили не так прописал. Сравни: https://github.com/Fi1osof/p1aton--prisma-nextjs/blob/Task1--fix/src/theme/GlobalStyle.ts
К слову, в следующий раз присылай скрин что именно тебя не устраивает. Я в дизайн вообще не умею. Я пока не запустил свою версию, так и не понял что не так с карточкой. И сейчас не уверен, что понял, просто они выглядят по-разному.
Ты все правильно понял. Посмотрел изменения в GlobalStyle.ts вносил в самом первом коммите возможно не заметил, как ты их удалил или возможно будет дальше удаление, хотя странно, что у тебя на видео все работает значит видимо удалил. Поделись, как ты определил, что проблемы в глобальных стилях?
Дальше я действительно эти стили удалял и переносил (а может и не перенес, а только удалил), и мог не понять вообще что-то поменялось в стилях или нет, я же только ошибки фиксил.
>> Поделись, как ты определил, что проблемы в глобальных стилях?
Так а там и мест-то совсем не много, которые на стили влияют. В том-то и логика, и так и проектировалось, чтобы потом не особо долго искать что-либо.
В данном случае цепоча _App -> _Document -> Page -> Components и GlobalStyles. По сути все. Вот прошел цепочку, потом в глобальные заглянул. Не вникал особо, просто вставил код со своей версии и увидел изменения.
Два коммита:
Первый с ошибкой, который высылал там пофиксил Game
Второй коммит пофиксил меню
На вид все ОК.
Видишь, всего несколько дней, зато ощутимый прогресс в обучении.
Застрял не могу пробиться уже два часа в App ковыряюсь bgactive и IsHomePage лезут ошибки.
bgActive:
(JSX attribute) bgActive: boolean
Type 'void' is not assignable to type 'boolean'.ts(2322)
interfaces.ts(2, 3): The expected type comes from property 'bgActive' which is declared here on type 'IntrinsicAttributes & MenuHeaderProps & { children?: ReactNode; }'
isHomePage:
(JSX attribute) isHomePage: boolean
Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "about" | "slot" | ... 253 more ... | "css"> & { ...; } & AppStyledProps, "about" | ... 256 more ... | "isHomePage"> & Partial<...>, "about" | ... 256 more ... | "isHomePage"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type 'void' is not assignable to type 'boolean'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, AppStyledProps, never, "div">): ReactElement<StyledComponentPropsWithAs<"div", DefaultTheme, AppStyledProps, never, "div">, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
Type 'void' is not assignable to type 'boolean'.ts(2769)
styles.ts(4, 3): The expected type comes from property 'isHomePage' which is declared here on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "about" | ... 254 more ... | "css"> & { ...; } & AppStyledProps, "about" | ... 256 more ... | "isHomePage"> & Partial<...>, "about" | ... 256 more ... | "isHomePage"> & { ...; } & { ...; }'
styles.ts(4, 3): The expected type comes from property 'isHomePage' which is declared here on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "about" | ... 254 more ... | "css"> & { ...; } & AppStyledProps, "about" | ... 256 more ... | "isHomePage"> & Partial<...>, "about" | ... 256 more ... | "isHomePage"> & { ...; } & { ...; }'
[statusCode, isHomePage, pageProps])
React Hook useMemo has a missing dependency: 'menu'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps
У тебя на видео вроде все так же, но работает. Пытался подключать в стайлед компоненте в котором isHomePage прописал, но не помогает.
Коммит:
Он же тебе четко говорит Type 'void' is not assignable to type 'boolean'.ts(2322)
То есть ожидается булевый, а ты возвращаешь ничего.
Читай выше я пробовал добовлять boolean.
return (
<>
<NextSeo {...meta} />
return <MenuHeader bgActive={isHomePage} />
У тебя isHomePage тип - void. Чего ты хочешь?
И return у тебя тут лишний, будет выведен просто как текст. Это же разметка, а не функция как таковая.
Ну и что. А значение присвоил?
const isHomePage = useMemo(() => {
router.pathname === '/'
}, [router.pathname])
У тебя здесь сравнение есть. А возвращаешь ты что? Где return? Вот у тебя функция и возвращает ничего (то есть void).
Внимательней будь. Если ты тип не указывал, а тебе TS говорит, что переменная имеет такой-то тип, то верь не себе, а ему, и иди проверяй почему ТС видит эдак, а не так, как тебе надо.
Вот вставляю из ПР тполность кусок твоего кода и все равно ошибки показывает.
Вот добовил boolean ошибка не уходит.
Олег, ну ты ппц... Зачем ты лезешь в следствие, когда тебе надо разобраться с причиной? Я тебе выше про что писал? Про isHomePage. А ты мне что показываешь? И во что сам лезешь? Лезешь туда, куда передается эта переменная. Ты с этой переменной разобрался? Я что выше написал?
Ты что, из моей репы только часть кода страницы выдернул, а остальное свое оставил? В чем логика? Еще раз: ТС ругается на ошибку типа не там, где ты сделал ошибку при объявлении типа и переменной, а там, где ты пытаешься передать что-то, что не соответствует ожидаемому. То есть у тебя написано:
const isHomePage = useMemo(() => {
router.pathname === '/'
}, [router.pathname])
Какой тут тип у isHomePage? Такой, какой ей и был присвоен результатом выполнения функции. В данном случае никакой, потому что ты не выполнил никакого возврата. А откуда ТС знает, что ты хотел какой-то другой тип? Ты же ему никак не сказал об этом. Вот если бы ты написал
const isHomePage: boolean = useMemo(() => {
router.pathname === '/'
}, [router.pathname])
Вот тогда бы он тебе уже здесь сказал "Ожидается boolean, а получаем ничего (void)". Но ты же здесь этого не написал? Поэтому ТС и молчит тут. А вот дальше, когда ты пытаешься эту переменную передать куда-то, где четко сказано "жду переменную с типом boolean", то тут и возникает ошибка, потому что передаешь void вместо boolean.
Я понимаю почему ты ошибся с функцией. У меня-то написано
const isHomePage = useMemo(() => router.pathname === '/', [router.pathname])
Тут тоже нет слова return. Но это совсем не то же самое, что у тебя. У тебя-то тело функции обернуто в фигурные скобки, то есть буквально
const isHomePage = useMemo(() => { router.pathname === '/' }, [router.pathname])
Здесь большая разница. Когда, как у меня, в скобки не взято, тогда написанное воспринимается сутью возврата, то есть у меня по сути выполняется
const isHomePage = useMemo(() => { return router.pathname === '/';}, [router.pathname])
Просто в сокращенном виде. А у тебя фигурные скобки, но нет return.
>> Вот добовил boolean ошибка не уходит.
Хоть я уже и расписал все, но еще раз уточню: ты прописал то, что ожидаешь на вход в этот компонент, и тут все ОК. Но передаешь ты в итоге что?
Поправил эти ошибки пропали.
Теперь ошибка в AppStyled:
(alias) const AppStyled: StyledComponent<"div", DefaultTheme, AppStyledProps, never>
import AppStyled
No overload matches this call.
Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 253 more ... | "css"> & { ...; } & AppStyledProps, "ref" | ... 257 more ... | "bgActive"> & Partial<...>, "ref" | ... 257 more ... | "bgActive"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Property 'bgActive' is missing in type '{ children: Element; isHomePage: boolean; }' but required in type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 253 more ... | "css"> & { ...; } & AppStyledProps, "ref" | ... 257 more ... | "bgActive"> & Partial<...>, "ref" | ... 257 more ... | "bgActive">'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, AppStyledProps, never, "div">): ReactElement<StyledComponentPropsWithAs<"div", DefaultTheme, AppStyledProps, never, "div">, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
Property 'bgActive' is missing in type '{ children: Element; isHomePage: boolean; }' but required in type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 253 more ... | "css"> & { ...; } & AppStyledProps, "ref" | ... 257 more ... | "bgActive"> & Partial<...>, "ref" | ... 257 more ... | "bgActive">'.ts(2769)
styles.ts(5, 3): 'bgActive' is declared here.
styles.ts(5, 3): 'bgActive' is declared here.
Олег, ты сообщения об ошибках вообще читаешь? Тут даже гугл-переводчик поможет, это же не художественный текст.
Он тебе пишет: styles.ts(5, 3): 'bgActive' is declared here.
То есть bgActive объявлена здесь (то есть требуется). Где ты ее тут передал?
Все, победил эти ошибки?
Блин, но у тебя как было
const isHomePage = useMemo(() => {
router.pathname === '/'
}, [router.pathname])
Ясно. В другой коммит это исправление залетело... Ну хоть так.
Все перенес все страницы - ноль ошибок:)
Коммиты:
Олег, ну что, отличная работа! Практически все намеченное сделано. Только ты забыл в паре мест тип страницам прописать и массив с данными лучше в отдельный файл констант выносить (помнишь?: по возможности один файл - одна сущность, хотя бы по отношению к классам и типам).
Отправил тебе ПР: https://github.com/p1aton/prisma-nextjs/pull/2
Эту задачу можешь закрывать и ставить новую.
Думаешь лучше новый таск создовать по сути задача таже самая просто нужно теперь другие страницы добалять. Здесь уже просто много ответов, которые могут пригодиться, мне кажется лучше здесь продолжать, чтобы все ответы по одному проекту в одной сущности были. Когда появится интерфейс для подзадач уже будет проще в одной сущности по сути работать.
Олег, конечно же лучше отдельную таску. Я тебе сразу говорил: разбивать на отдельные понятные таски, с понятными названиями и понятными описаниями. Чем потом одну таску листать, в которой 100500 комментариев, конечно же удобней просто зайти в проект, посмотреть какие таски есть, и зайдя в интересующую, увидеть обсуждения конкретно по ней. А если что и пересекается, так что мешает дать ссылку на связанный коммент?
Ну смотри если бы был функционал одна задача много под задач, согласен было бы удобней делать в каждой ветке маленькие под задачи. Сейчас же получается, если я буду ставить задачи, как ты говоришь например, перенести такую страницу, а их к примеру больше двадцати получится больше двадцати страниц по которым нужно будет прыгать в случае чего и искать информацию, плюс в самих задачах их будет проблематично искать, так как много задач по самообучению. Это все приводит к путанице и потере времени, которое можно было бы потратить на реальные задачи.
Олег, я не говорю плодить типовые задачи. То есть если у тебя встала задача "Перенести страницу О проекте" и ты ее успешно решил, а потом встает задача "Перенести страницу Контакты" и там точно такие же задачи, то конечно же не надо такие задачи плодить. Но вот в самой задаче по переносу у тебя были "Подключение firebase", "Перенести стили из css в styled-components", "Пофикстить Typescript ошибки" и т.п. Вот такие задачи надо было вычлинять. Сейчас чтобы хоть примерно понять что ты тут делал, надо читать все комменты в этой ветке. Вот зачем оно? Надо плясать от постановки задачи, а потом будет ясно интересно ли вообще искать решение или нет? Кому-то и готовое решение не нужно (ну не хочет он с firebase связываться (как я, к примеру)), а кто-то готов и сам поучаствовать в решении.
Еще раз: не суть как твоя страница называется, а суть какую задачу ты решаешь, с какими технологиями и какими сложностями это связано.
Теперь понятно?
Теперь понятно. Только у нас же для типовой задачи - это все в комплексе делается. Вот если к примеру, если я сталкиваюсь с проблемами "Подключение firebase", "Перенести стили из css в styled-components", "Пофикстить Typescript ошибки" и пишу и мне нужна помощь в решение, здесь согласен можно создовать новые ветки, чтобы проблематика собиралась в одном месте. Если я правильно тебя понял.
> Только у нас же для типовой задачи - это все в комплексе делается.
Это у тебя все в комплексе делается. А я такое разбиваю и воспринимаю как отдельные задачи. И тебе советую научиться.