yarn2 migration - Githubissues

TFK70 commented 3 years ago

Какого рода задача?

Перевести проект на ярн2

Что и где будем менять?

Выполнить шаги отсюда https://yarnpkg.com/getting-started/migration Глобально ничего переустанавливать не надо, версия будет автоматом подтягиваться для этого проекта после yarn set version berry (см гайд выше)

Перевестись на новый actl (@atls/actl-cli) Добавить следующие плагины (yarn plugin import): @yarnpkg/plugin-version, @yarnpkg/plugin-typescript, @yarnpkg/plugin-workspace-tools, @yarnpkg/plugin-interactive-tools, @atls/plugin-essentials @atls/plugin-essentials предварительно необходимо сбилдить

Возможные проблемы

Некоторым зависимостям может не хватать их же зависимостей, для этого необходимо с помощью packageExtensions добавить недостающую зависимость к проблемному пакету TypeError внутри пакетов. Это решается добавлением необходимых @types пакетов через те же packageExtensions

gochicus commented 3 years ago

@TFK70 что значит сбилдить? Что подразумевается?

TFK70 commented 3 years ago

@gochicus ты уже пробовал устанавливать другие плагины?

gochicus commented 3 years ago

@TFK70 Да, все, кроме @atls/plugin-essentials. Вот так выгдялит в .yarnrc.yml:

plugins:

path: .yarn/plugins/@yarnpkg/plugin-version.cjs spec: "@yarnpkg/plugin-version"

path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs spec: "@yarnpkg/plugin-typescript"

path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs spec: "@yarnpkg/plugin-workspace-tools"

path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs spec: "@yarnpkg/plugin-interactive-tools"

А последнее я про билды несколько не понял.

TFK70 commented 3 years ago

@gochicus Отлично, теперь если ты обратишь внимание на path - то он ссылается на cjs файл (который как бы и является плагином). Через yarn plugin import у тебя сделать ничего не получится, он будет приписывать намспейс @yarnpkg, а прямой ссылки на js/cjs файл у тебя нет. Соответственно чтобы у тебя заработал atls плагин тебе необходимо получить его js (который добывается путем билда https://github.com/atls/tools/tree/master/yarn/plugin-essentials), а потом указать до него путь в .yarnrc

TFK70 commented 3 years ago

Плагин разумеется должен лежать там же, где и остальные: .yarn/plugins/@atls

gochicus commented 3 years ago

@TFK70 перекинул всю папку в отдельный проект, пытаюсь подтянуть модули атлантиса для билда через ярн и получаю стандартную ошибку, что модуль не найден.

error An unexpected error occurred: "https://registry.yarnpkg.com/@atls%2fyarn-plugin-checks: Not found".

TFK70 commented 3 years ago

@gochicus я говорил что тебе нужно склонировать репозиторий essentials собирает в себе несколько других плагинов, откуда он их возьмет тогда если у тебя только директория с essentials?

gochicus commented 3 years ago

@TFK70 а как понять какие @types нужны вообще? Вот у меня есть ошибка:

Type Error: Cannot read property 'map' of undefined Occurred while linting /home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/webpack.config.ts:1 Occurred while linting /home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/webpack.config.ts:1 at Object.exports.traverse (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/@atlantis-lab/prettier-plugin-import-sort/dist/utils.js:7:46) at Object.print (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/@atlantis-lab/prettier-plugin-import-sort/dist/plugin.js:29:32) at callPluginPrintFunction (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:14958:21) at mainPrintInternal (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:14896:17) at mainPrint (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:14878:14) at /home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:47471:21 at AstPath.each (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:14653:7) at printStatementSequence (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:47463:8) at printBody$1 (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:47597:10) at printBlockBody$1 (/home/aleksandr/Desktop/project/frontend-study-gochicus/node_modules/prettier/index.js:47763:16)

Я пробовал добавлять разные типы, сейчас выглядит так:

packageExtensions: "webpack@*": dependencies: "@types/webpack": "5.28.0" "@types/webpack-dev-server": "^3.11.2" "@types/html-webpack-plugin": "3.2.6" "@types/html-webpack-template": "6.0.6" "@types/webpack-env": "1.16.2" "@types/webpack-sources": "2.1.1"

И всё равно не работает.

TFK70 commented 3 years ago

@gochicus понять очень просто: нужно просто внимательно читать текст ошибки (причем это нужно делать всегда) @types помогают когда вылезает TypeError внутри сторонней либы, там нужно посмотреть на какой метод (или что угодно) он ругается, посмотреть из какой либы этот метод, и установить типы этой либы в либу где происходит TypeError. Например если react внутри себя использует nanoid и при тайпчеках внутри реакта появляется TypeError в отношении метода nanoid - то тебе нужны тайп дефинишены для наноида, их ты устанавливаешь в реакт, тк ошибка там и произошла

У тебя ошибка происходит внутри твоего же пакета. Причем map, насколько ты знаешь, это не метод сторонней либы, он встроенный, жсный. Говорит что у undefined метода map нет. Соответственно массив, у которого ты вызываешь метод map внутри твоего пакета приходит в виде undefined, там и ищи ошибку. Ставь консоль логи и дебажь

gochicus commented 3 years ago

@TFK70

./practice/web-diary/fragments/post-сontrols/src/PostControls.tsx:20:6 Type error: JSX element type 'Row' does not have any construct or call signatures. 18 | const [postData, setPostData] = usePostData() 19 | return ( 20 | | ^ 21 | 22 | 23 | <Input

Добавление @types/react в пакеты фрагментов не разрешают приведенную ошибку, в то время как для ui пакетов такое решение работает. В чём может быть проблема?

TFK70 commented 3 years ago

@gochicus ошибка все еще на уровне типов, но одного лога об ошибке мало, здесь основную роль играет окружение ты гуглил ошибку?

gochicus commented 3 years ago

@TFK70 Да, гуглил, понятного объяснения что это может быть не нашел.

TFK70 commented 3 years ago

@gochicus установи @types/node@14 и @types/react в корневой package

gochicus commented 3 years ago

@TFK70 всё ещё не запускается, через yarn diary, текст ошибки приведен. Тайпчеки проверил, ошибка не связана с ними. В web-diary всё поправил, некоторые папки, не связанные с web-diary, временно удалил для ускорения тестирования. Ошибок типов нет, но вот эта ошибка всё так же осталась. Есть ещё идеи с чем может быть связано?

[webpack-cli] Failed to load '/home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/webpack.config.ts' config [webpack-cli] Error: The specified module doesn't seem to exist on the filesystem at getModuleLocator (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/pnp-webpack-plugin-npm-1.6.4-c497046afc-39a484182f.zip/node_modules/pnp-webpack-plugin/index.js:16:11) at Object.moduleLoader (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/pnp-webpack-plugin-npm-1.6.4-c497046afc-39a484182f.zip/node_modules/pnp-webpack-plugin/index.js:140:23) at Object. (/home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/webpack.config.ts:51:30) at Module._compile (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/v8-compile-cache-npm-2.3.0-961375f150-b56f83d9ff.zip/node_modules/v8-compile-cache/v8-compile-cache.js:192:30) at Module._compile (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/pirates-npm-4.0.1-377058e8fc-21604008c3.zip/node_modules/pirates/lib/index.js:99:24) at Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Object.newLoader [as .ts] (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/pirates-npm-4.0.1-377058e8fc-21604008c3.zip/node_modules/pirates/lib/index.js:104:7) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.externalmodule.Module._load (/home/aleksandr/Desktop/project/frontend-study-gochicus/.pnp.js:28786:14) at Module.require (internal/modules/cjs/loader.js:952:19)

TFK70 commented 3 years ago

@gochicus Пока сделай коммит, продолжай резолвить тайпчеки если еще остались и почини хаски если еще не починил. За запуск приложения будет отвечать actl renderer https://github.com/atls/tools/tree/master/actl/actl-renderer

gochicus commented 3 years ago

@TFFOE насчет хаски не совсем понял, что с ним сделать то нужно? он просто когда ярном тянется, там что-то происходит, ошибка и всё.

TFK70 commented 3 years ago

@gochicus ну так это и надо починить хаски же не должен падать с ошибкой?

gochicus commented 3 years ago

@TFK70 Зависимости выглядят вот так.

"devDependencies": { "@types/react": "^17.0.3", "@types/react-intl": "^3.0.0", "babel-plugin-react-intl": "^8.2.25", "html-webpack-plugin": "^5.3.1", "html-webpack-template": "^6.2.0", "pnp-webpack-plugin": "^1.6.4", "styled-system": "^5.1.5", "typescript": "^4.3.5", "webpack": "^5.26.3", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" }, "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.2", "react-intl": "^5.13.5" } }

При выполнении команды yarn diary приложение начинает собираться, но на определенном этапе происходит ошибка:

Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App      from './App'
| 
> ReactDOM.render(<App />, document.getElementById('root'))
|

Что касается actl format то, при вводе команды yarn format (actl format в scripts) не происходит ничего, никакого текста, никаких ошибок, ничего. При этом yarn lint работает нормально, выводит список ошибок.

TFK70 commented 3 years ago

@gochicus чтобы не было этой ошибки когда запускаешь yarn:

```javascript Ambiguous Syntax Error: Cannot find who to pick amongst the following alternatives: 0. yarn install [--json] [--immutable] [--immutable-cache] [--check-cache] [--inline-builds] [--skip-builds] 1. yarn 2. yarn 3. yarn 4. yarn 5. yarn 6. yarn 7. yarn 8. yarn 9. yarn 10. yarn 11. yarn 12. yarn 13. yarn 14. yarn 15. yarn 16. yarn 17. yarn 18. yarn 19. yarn 20. yarn 21. yarn 22. yarn 23. yarn ```

Удали в .yarnrc секцию plugins, сделай yarn, и потом добавляй их заново через yarn plugin import

TFK70 commented 3 years ago

Миграция на next

Для того чтобы приложение работало с next так же необходимо сохранять определенную структуру проекта, тк там уже есть встроенный вебпак. Вполне можно пройти небольшой гайд чтобы понять основные концепции, займет не более 1.5-2 часов, но вообще они все вполне подробно описаны тут (в левом сайдбаре Basic Features)

Настройка

Читать после ознакомление с общими концепциями next

Тут нам понадобится файл next.config.js

Проблема - вебпак некста из коробки не сможет резолвить пути до воркспейсов Решение - через next.config.js внести правки в конфиг вебпака, самим добавив для плагина next-babel-loader пути до воркспейсов Инструмент - https://github.com/atls/nextjs/tree/master/packages/next-config-with-pnp-workspaces Использование:

const { withWorkspaces } = require('@atls/next-config-with-pnp-workspaces')
const withPlugins = require('next-compose-plugins')

module.exports = withPlugins([withWorkspaces])

TFK70 commented 3 years ago

@gochicus Чтобы не было проблем с plugin-essentials необходимо перейти на yarn версии 3.0.0-rc.5:

yarn set version 3.0.0-rc.5
Переустановить все плагины используя соответствующую версию: yarn plugin import workspace-tools@3.0.0-rc.5 (для совместимости с новой версией) Если на каком-либо плагине будет 404 (Not found) - просто yarn plugin import <pluginName>
Удостовериться что в корневом пекедже нету скриптов по типу "lint": "actl lint" и проверить работоспособность через yarn lint или любую другую команду. Если команда отработала - все в порядке, можно продолжать работу. Если нет - отпиши сюда с логом

gochicus commented 3 years ago

@TFK70 проблемы с плагином, то что ты описал выше с обновлением верссии сделал, проблем нет, команда линт работает. Однако при попытке сборки проекта получаю вот такое сообщение:

Usage Error: This plugin cannot access the package referenced via typanion which is neither a builtin, nor an exposed entry (when initializing @yarnpkg/plugin-workspace-tools, defined in /home/aleksandr/Desktop/project/frontend-study-gochicus/.yarnrc.yml)

$ actl renderer dev [-p,--pretty-logs] [-s,--source #0] [-t,--tunnel #0]

TFK70 commented 3 years ago

@gochicus 1. Ты точно обновил все плагины? Проверь что все не месте

Какую версию выводит yarn -v?
Что указано в .yarnrc в поле yarnPath?
Как выглядит скрипт который билдит проект?

gochicus commented 3 years ago

@TFK70

3.0.0-rc.5
yarnPath: .yarn/releases/yarn-3.0.0-rc.5.cjs
Из корневого package в проект: "diary": "yarn workspace @practice/web-diary run start" => "start": "actl renderer dev",

TFK70 commented 3 years ago

@gochicus

yarn workspace @practice/web-diary

Скрипты уже надо бы перенести в app

"start": "actl renderer dev"

Почему он запускается через actl? Тебе нужен yarn app для того чтобы твой проект на нексте билдился и запускался

И у тебя тут они прямо напутаны. У тебя должно быть 3 скрипта: build,start и dev. build - билдит проект, start запускает проект из dist (уже сбилженный проект), dev - поднимает дев сервер. Сейчас у тебя скрипт start запускает dev.

Сами скрипты должны выглядеть как-то так:

    "build": "yarn app renderer build --export",
    "dev": "yarn app renderer dev",
    "start": "node dist/index.js"

gochicus commented 3 years ago

@TFK70 переделал скрипты как ты и указал:


"build": "yarn app renderer build --export",
"dev": "yarn app renderer dev",
"start": "node dist/index.js"
},```

При выполнении команды dev продолжается всё та же петрушка с плагином:


$ actl renderer dev [-p,--pretty-logs] [-s,--source #0] [-t,--tunnel #0]

При поптке сбилдить проект появляется папка next с необходимыми файлами, при этом проект не билдится из за ошибки вебпака:

info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build  
Failed to compile.

../../fragments/diary/src/Diary.tsx
Module parse failed: Unexpected token (12:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export const Diary = () => {
|   return (
>     <Background gradient='blueAndGreenGradient'>
|       <Column alignItems='center'>
|         <Layout flexBasis={['0px', '0px', '300px']} />

> Build error occurred
Error: > Build failed because of webpack errors
    at /home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/next-virtual-d57897dc16/0/cache/next-npm-11.0.1-c40bc7f380-c6b4747f1a.zip/node_modules/next/dist/build/index.js:15:924
    at async Span.traceAsyncFn (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/next-virtual-d57897dc16/0/cache/next-npm-11.0.1-c40bc7f380-c6b4747f1a.zip/node_modules/next/dist/telemetry/trace/trace.js:6:584)
Internal Error: Command failed with exit code 1: yarn next build src
    at makeError (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/execa-npm-5.1.1-191347acf5-fba9022c8c.zip/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/execa-npm-5.1.1-191347acf5-fba9022c8c.zip/node_modules/execa/index.js:118:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async RendererBuildCommand.execute (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/@atls-actl-renderer-npm-0.0.3-6231794240-6720af1cf6.zip/node_modules/@atls/actl-renderer/dist/renderer-build.command.js:27:9)
    at async RendererBuildCommand.validateAndExecute (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/clipanion-npm-2.6.2-65049fe240-7a1dfc8c9a.zip/node_modules/clipanion/lib/index.js:1118:26)
    at async Cli.run (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/clipanion-npm-2.6.2-65049fe240-7a1dfc8c9a.zip/node_modules/clipanion/lib/index.js:1371:24)
    at async Cli.runExit (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/cache/clipanion-npm-2.6.2-65049fe240-7a1dfc8c9a.zip/node_modules/clipanion/lib/index.js:1388:28)

Делал typecheck, все проблемы которые он обнаружил находятся в кэше ярна и к текущему коду отношения не имеют, добавил в пакет @types/node, @types/react там уже был. В затруднении, не могу предположить чем вызвана ошибка.

TFK70 commented 3 years ago

@gochicus Тут на самом деле ни к чему в каждый пакет добавлять @types/node и @types/react, можешь просто их установить в корневом пекедже и убрать из packageExtensions, только убедись что @types/node у тебя 14 версии тк мы на 14 ноде работаем

Ошибка с лоадером происходит потому что необходимо в next-babel-loader (который находится в вебпаке некста) напрямую просунуть пути до твоих воркспейсов, ибо сам он этого не делает. Вебпак конечно встроенный, но он патчится через next.config.js (ссылку на доку выше оставлял). За инжект путей будет отвечать пакет @atls/next-config-with-pnp-workspaces, пример его использования так же указывал выше

И на всякий случай сделай еще раз yarn add -D @atls/actl-cli чтобы убедиться что у тебя последняя версия actl

gochicus commented 3 years ago

@TFK70 next.config.js такого вида должен был решить проблему билда?


const withPlugins = require('next-compose-plugins')

module.exports = withPlugins([withWorkspaces])```

gochicus commented 3 years ago

@TFK70

Required package: styled-tools
Required by: @gochicus/list@virtual:6df81bcd35fb1da23793864c85a62c57ba104981caf59f634743de0d9a1e84dc0508860a15b3fe3d6731ed35477c25710de8f98ccce4ed2ddaccc621760dd6c0#npm:0.0.20 (via /home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/@gochicus-list-virtual-1eba0f42e5/0/cache/@gochicus-list-npm-0.0.20-d04d20b661-772bacbc83.zip/node_modules/@gochicus/list/dist/button/button.styles.js)
Ancestor breaking the chain: @fragments/post-list@workspace:practice/web-diary/fragments/post-list

Он указывает на фрагмент, но фишка в том, что в том пакете есть styled system, я добавил

TFK70 commented 3 years ago

@gochicus так это styled-tools

gochicus commented 3 years ago

@TFK70 Сегодня работал со структурой, впроцессник закоммитил. Обновлял и тестировал пакет gochicus/list. На текущий момент проект вроде как сбилдился, но появилась ошибка пререндера, с ней буду разбираться завтра.

gochicus commented 3 years ago

@TFK70 застрял на ошибках рендера. Сейчас вот проблема в intl судя по тексту. Я, вероятно, чего-то не понимаю, но собственно установленный react-intl там есть, объект intl тоже есть там, где он используется с хукком.

aleksandr@gochicus:~/Desktop/project/frontend-study-gochicus$ yarn workspace @web-diary/app run build
info  - Using webpack 4. Reason: future.webpack5 option disabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[  ==] info  - Generating static pages (0/3)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at Object.invariant (/home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/app/src/.next/server/pages/index.js:2670:15)
    at Object.invariantIntlContext (/home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/app/src/.next/server/pages/index.js:6175:24)
    at useIntl (/home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/app/src/.next/server/pages/index.js:2572:13)
    at Header (/home/aleksandr/Desktop/project/frontend-study-gochicus/practice/web-diary/app/src/.next/server/pages/index.js:1104:45)
    at d (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/react-dom-virtual-fe01f4b047/0/cache/react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/react-dom-virtual-fe01f4b047/0/cache/react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/react-dom-virtual-fe01f4b047/0/cache/react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/react-dom-virtual-fe01f4b047/0/cache/react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/react-dom-virtual-fe01f4b047/0/cache/react-dom-npm-17.0.2-f551215af1-1c1eaa3bca.zip/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/home/aleksandr/Desktop/project/frontend-study-gochicus/.yarn/__virtual__/next-virtual-3faeefb9bb/0/cache/next-npm-10.2.3-e1de0387ed-715c83439f.zip/node_modules/next/dist/next-server/server/render.js:54:854)
info  - Generating static pages (3/3)

TFK70 commented 3 years ago

@gochicus react-intl установлен в каждом пакете, где используется useIntl. Это значит, что у каждого пакета свой инстанс react-intl, но мы уже знаем что провайдер и хук (или консьмер) должны браться из одного инстанса пакета. Чтобы этого добиться нужно воспользоваться алиасами. Помимо алиасов нужно будет использовать 5 версию вебпака, это тоже настраивается через конфиг. Это все уже сделано, нужно просто прописать функции в next.config.js по аналогии. Пока их нету в репах атлантиса, так что нужно будет вынести их себе локально в отдельный воркспейс/директорию

Примечание - это должны быть cjs файлы, даже не ts.

Активация webpack5

Функция для webpack5 (with-future-webpack-5): ```javascript const withFutureWebpack5 = (nextConfig) => ({ ...nextConfig, future: { webpack5: true, }, webpack(config, options) { if (!config.resolve.fallback) { // eslint-disable-next-line config.resolve.fallback = {} } // eslint-disable-next-line config.resolve.fallback.events = require.resolve('events/') if (typeof nextConfig.webpack === 'function') { return nextConfig.webpack(config, options) } return config }, }) module.exports = { withFutureWebpack5 } ```

Алиасы:

```javascript /* eslint-disable no-param-reassign */ /* eslint-disable no-return-assign */ const withAliases = (aliases, require) => (nextConfig) => ({ ...nextConfig, webpack(config, options) { aliases.forEach( (alias) => (config.resolve.alias[alias] = require.resolve(alias.replace('$', ''))) ) if (typeof nextConfig.webpack === 'function') { return nextConfig.webpack(config, options) } return config }, }) module.exports = { withAliases } ```

Пример использования:

const { withWorkspaces } = require('@atls/next-config-with-pnp-workspaces')
const { withAliases } = require('./helpers')
const { withFutureWebpack5 } = require('./helpers')
const withPlugins = require('next-compose-plugins')

module.exports = withPlugins([
  withWorkspaces,
  withFutureWebpack5,
  withAliases([
    'react-intl',
    '@emotion/react',
    '@emotion/styled'
  ], require)
])

В withAliases необходимо передать массив зависимостей, которые требуют обращения в единый инстанс (пока таких 3) и функцию require. После этого все обращения react-intl будут перенаправляться в инстанс react-intl который установлен в app.

gochicus commented 3 years ago

@TFK70

. Пока их нету в репах атлантиса, так что нужно будет вынести их себе локально в отдельный воркспейс/директорию

Не понял что именно нужно вынести в формате csj в отдельную директорию. Алиасы и активация вебпака будут прописаны в next.config, а туда что?

TFK70 commented 3 years ago

@gochicus Функции, ты их откуда брать-то будешь? Я для этого код и приложил

gochicus commented 3 years ago

@TFK70 Теперь понятно, подумал они прямо в конфиге прописываются.

gochicus commented 3 years ago

@TFK70 Так, ну у меня сбилдился html, по команде dev сбилдился index.js что дальше с этим делать?

TFK70 commented 3 years ago

@gochicus index.js при исполнении должен поднимать дев-сервер (dev скрипт исполняет этот файл за тебя) твое приложение работает когда ты стучишься на localhost:3000?

gochicus commented 3 years ago

@TFK70 нет, во время исполнения команд никаких ошибок тоже нет. Но я мог с настройкой вебпака напортачить, убрал одну строку. Можешь объяснить вот эту строку:

  config.resolve.fallback.events = require.resolve('events/')

Я её убрал, когда при сборке он начал обращаться к папке событий, у меня такой нет.

TFK70 commented 3 years ago

@gochicus тебе events нужно установить как зависимость, не надо функции трогать в resolve.fallback.events находится путь до events в случае, если такого найдено не будет (погугли что такое fallback) events это нодовский модуль которого нету в контексте веба (как fs или path), поэтому тебе его нужно установить вручную как зависимость и указать к нему путь

gochicus commented 3 years ago

@TFK70 сегодня работал со структруой, ошибками пререндерера, добавил стиль для элемента с id __next, проверял работу приложение. Билдится, запускается. Осталось почистить зависимости и устранить ошибки линта, которые не берет команда format.

gochicus commented 3 years ago

@TFK70

Unknown Syntax Error: Command not found; did you mean one of:

  0. actl lint [-r,--report #0] [--fix] ...
  1. actl format ...
  2. actl typecheck [-r,--report #0] ...
  3. actl test:integration [-u,--update-shapshot] [-b,--bail] [--find-related-tests] [--json] [-r,--report #0] ...
  4. actl test:unit [-u,--update-shapshot] [-b,--bail] [--find-related-tests] [--json] [-r,--report #0] ...
  5. actl commit ...
  6. actl service build [-s,--source #0]
  7. actl service dev [-p,--pretty-logs] [-s,--source #0]
  8. actl renderer build [-s,--source #0] [-e,--export]
  9. actl renderer dev [-p,--pretty-logs] [-s,--source #0] [-t,--tunnel #0]
 10. actl library build [-t,--target #0] [-s,--source #0]

While running precommit
husky - pre-commit hook exited with code 1 (error)

какая должна быть команда у прекоммита? actl precommit не работает.

TFK70 commented 3 years ago

@gochicus ну такой нет, напиши сам что он при прекоммите должен прогнать линт и тайпчек (это тоже через cli делается)

gochicus commented 3 years ago

@TFK70 yarn husky add .husky/pre-commit "actl lint" даже в таком варианте выдает ту же ошибку, в чем может быть проблема?

TFK70 commented 3 years ago

@gochicus попробуй yarn commit staged

gochicus commented 3 years ago

@TFK70

✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...

И больше ничего не произошло

TFK70 commented 3 years ago

@gochicus а у тебя в staged какие-нибудь файлы были?

gochicus commented 3 years ago

@TFK70 Ну да, я ж не пустой коммит собрался делать

TFK70 commented 3 years ago

@gochicus пушни тогда

gochicus commented 3 years ago

@TFK70

On branch chore/yarn2-migration
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   .husky/pre-commit
        modified:   package.json

aleksandr@gochicus:~/Desktop/project/frontend-study-gochicus$ git push origin chore/yarn2-migration
Everything up-to-date

atls-academy / gochicus.github.io

yarn2 migration #88

Какого рода задача?

Что и где будем менять?

Миграция на next

Настройка