Homework 9 #9
Homework 9 #9
Conversation
| const path = usePath(); | ||
| const path0 = usePath(); | ||
| const [path, setPath] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| setPath(path0); | ||
| }, [path0]); |
There was a problem hiding this comment.
вот про этот хак я говорю в 5-ом пункте
There was a problem hiding this comment.
ну, на ворнинг гидратации можно и подзабить было, он не всегда истина) но хак тоже норм
| /* хак, который позволяет запустить сборку без | ||
| автоматически сгенерированных файлов *.d.ts */ | ||
| declare module '*.module.scss' { | ||
| const classes: { readonly [key: string]: string }; | ||
| export default classes; | ||
| } |
There was a problem hiding this comment.
вот кастомное объявление модуля для файлов *.d.ts, про которое я говорю в 4-ом пункте
| @@ -12,7 +12,7 @@ | |||
| "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */, | |||
| // "declaration": true, /* Generates corresponding '.d.ts' file. */ | |||
| // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ | |||
| "sourceMap": true /* Generates corresponding '.map' file. */, | |||
| "sourceMap": false /* Generates corresponding '.map' file. */, | |||
There was a problem hiding this comment.
отключил соурмапы из-за того, что описано в 3-ем пункте
| @@ -66,5 +66,13 @@ | |||
| "skipLibCheck": true /* Skip type checking of declaration files. */, | |||
| "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ | |||
| }, | |||
| "exclude": ["node_modules", "dist", "webpack.config.js", "jest.config.js"] | |||
| "exclude": [ | |||
| "node_modules", | |||
There was a problem hiding this comment.
вот тут добавлена же вся папка целиком node_modules, но всё-равно автоматически генерировались соурсмапы для файлов библиотеки hookrouter (про это описано в 3-ем пункте).. Или чтобы добавить папку, надо как-то по-другому тут писать?
There was a problem hiding this comment.
тут скорее проблема с самим hookrouter, не знаю как решать, но эта запись корректно игнорирует нод модули)
| test: /\.[tj]sx?$/, | ||
| use: ['ts-loader'], |
There was a problem hiding this comment.
подскажи, пожалуйста, почему тут ты в уроке убрал exclude: /node_modules/, для серверного конфига?
There was a problem hiding this comment.
билд под ноду билдит не так, как на клиенте, нода не компилирует себе модули, поэтому это просто бессмысленно)
| mode: 'local', | ||
| localIdentName: '[name]__[local]__[hash:base64:5]', | ||
| auto: /\.module\.\w+$/i, | ||
| exportOnlyLocals: true, |
There was a problem hiding this comment.
вот сюда добавил exportOnlyLocals: true, почему – описал в 4-ом пункте
|
вообще билд для сервер сайд рендера приложения, которое было написано и заточено под клиент – всегда больно) это нормально и оно нужно только тогда, когда оно нужно) |
Привет! Вроде бы сделал, чтобы SSR отрабатывал нормально и страница загружалась с норм стилями, но какое-то двоякое чувство в итоге осталось.. Потому что пришлось применять хаки, и постоянно что-то ломалось, что до этого работало отлично =(
Ниже опишу с чем столкнулся и как это решал по мере выполнения этого дз:
Сначала у меня была проблема в том, что использовался
nodeверсии10.*.*(для этой версии почему-то не хотел ставитьсяhapi) поэтому наконец-то пришлось установитьnvmна свой домашний ноут! :DПосле обновления ноды почему-то сломалась установленная библиотека
node-sass. Выдавалась ошибка:Error: Node Sass does not yet support your current environment:, сначала нашел в гугле такое "решение" проблемы. Но оно только лишь наоборот ещё хуже всё сломало, обновив версиюnode-sassдо последней. В итоге решением этой проблемы стало полностью удалить lock-файл и папкуnode_modules, вернуть вpackage.jsonверсиюnode-sass(на ту, которая была раньше), и на обновленной версииnodeзаново установить все зависимости 🎉После разделения конфига для клиента и сервера, почему-то у меня стали добавляться автоматически пустые файлы
*.d.ts,*.d.ts.mapи*.js.mapв библиотекуhookrouter, которая лежит в папкеnode_modules(PS недавно в репозиторииhookrouterпоявился очень похожий issue). И из-за этого у меня не запускалась сборка, выдавая ошибку на эти файлы.. Я посмотрел, что в этих файлах и там был стандартный коммент для sourceMap(//# sourceMappingURL=index.d.ts.map), поэтому решил отключить соурсмапы вtsconfig.jsonхотя это суперстранно, потому что у меня в том жеtsconfig.jsonвexcludeдобавлена папкаnode_modulesцеликом (или там неверно она туда добавлена?). Когда перестали добавляться новые файлы в библиотеку всё завелось как надо.Далее у меня при отрисовке в браузере выдавалась ошибка, что не получается корректно выполнить
hydrate, потому что есть несоответствие классов на клиенте и сервере.. В чате подглядел подсказку, что это можно решить с помощьюexportOnlyLocals: true, но проблема полностью не решилась: теперь страница подгружала стили, но в консоли браузера всё-равно оставался этот warning про hydrate, также плюс к этому появилась странная вещь с*.d.ts-файлами, которую подробнее опишу в следующих предложениях. Стали периодически просто каким то случайным образом приyarn run build:devгенерироваться неверные файлы*.d.ts, то есть там буквально случайно бывает либо всё норм, либо просто пустой интерфейс, либо как будто половина интерфейса вставлена не в начало файла, и в итоге получается просто какой-то сломанный код там х_Х После этого добавил кастомный интерфейс для файлов*.module.scssи тогда удаляя сломанные*.d.ts-файлы перед запуском билда удаётся 1 раз сделать билд норм, и потом уже как повезет какие*.d.ts-файлы сгенерятся, но чаще всего какие-то из них генерятся неверными и если надо будет запустить билд снова, надо их опять находить и удалять руками =/В итоге для окончательного решения проблемы с варнингом про
hydrateпришлось добавить хак в тот компонент, в котором используется хукusePathизhookrouter(у меня этоHeader). Там теперь локально в компоненте добавляю еще одну переменнуюpathчерезuseState, и обновляю её с помощьюuseEffectна основе тогоpath, который возвращаетusePath... Ниже в комментах к коду это тоже покажу