[chore] yarn2 migration

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

ikorol3107 commented 3 years ago

@TFK70 пытаюсь добавлять плагины,например yarn plugin import typescript и получаю ошибку: error Command "plugin" not found. Предварительно все шаги по миграции согласно документации сделала. Нагуглить решение проблемы не смогла

TFK70 commented 3 years ago

@ikorol3107 1. Распиши детально что ты делала

Покажи что выдаст yarn -v
Сделай коммит

ikorol3107 commented 3 years ago

@TFK70 порядок моих действий:

npm install -g yarn
yarn set version berry
yarn install

добавила в гитигнор

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

удалила старую версию actl из package.json
yarn add @atls/actl-cli
yarn plugin import version - получила вышеописанную ошибку

yarn -v выдает: 1.22.10

TorinAsakura commented 3 years ago

@ikorol3107 То есть тебя не смутило, что мы переходим на второй ярн, а версия тебе отдаёт второй?)

TFK70 commented 3 years ago

@ikorol3107 @ikorol3107 https://github.com/atls/reactjs/blob/master/.gitignore#L37 в гитигноре должно быть только это, они просто хранят состояние, а коммитить состояние ни к чему тк оно для каждого уникальное (https://yarnpkg.com/getting-started/qa)

TFK70 commented 3 years ago

@ikorol3107 Ну и еще насчет первого пункта где ты через npm ярн ставила: он же у тебя уже установлен в системе. Тебе достаточно в проекте сделать yarn set version berry и для твоего проекта «»индивидуально будет подтягиваться второй ярн

ikorol3107 commented 3 years ago

@ikorol3107 @ikorol3107 https://github.com/atls/reactjs/blob/master/.gitignore#L37 в гитигноре должно быть только это, они просто хранят состояние, а коммитить состояние ни к чему тк оно для каждого уникальное (https://yarnpkg.com/getting-started/qa)

@TFK70 изменила гитигнор, но ошибка осталась. Сделать коммит?

TFK70 commented 3 years ago

@ikorol3107 Тут не в гитигноре дело было, а в том что у тебя была версия ярна 1.22.5. Сейчас у тебя какая?

ikorol3107 commented 3 years ago

@ikorol3107 Тут не в гитигноре дело было, а в том что у тебя была версия ярна 1.22.5. Сейчас у тебя какая?

@TFK70 - 1.22.10

TFK70 commented 3 years ago

@ikorol3107 ну так у тебя по-прежнему первая версия как ты обновляешься?

ikorol3107 commented 3 years ago

@ikorol3107 ну так у тебя по-прежнему первая версия как ты обновляешься?

@TFK70 после команды yarn set version berry делаю yarn install

TFK70 commented 3 years ago

@ikorol3107 1. Где ты делаешь yarn set version?

Какой output у команды?

ikorol3107 commented 3 years ago

@ikorol3107 1. Где ты делаешь yarn set version?

Какой output у команды?

@TFK70

здесь: irina@ikorol3107:~/WORK/ikorol.github.io$ yarn set version berry

output:

Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into /home/irina/WORK/ikorol.github.io/.yarn/releases/yarn-berry.cjs...
Updating /home/irina/WORK/ikorol.github.io/.yarnrc.yml...
Done!

ikorol3107 commented 3 years ago

@TFK70 если сбилдить @atls/plugin-essentials , то получаю файл plugin-essentials.js . И мне этот файл нужно поместить в папку .yarn/plugins/@atls ? А как потом добавить этот плагин @atls/plugin-essentials чтоб он появился в .yarnrc.yml ?

TFK70 commented 3 years ago

@ikorol3107 https://yarnpkg.com/advanced/plugin-tutorial тебе необходимо указать до него путь plugins

ikorol3107 commented 3 years ago

@TFK70 команда yarn lint в терминале работает нормально, а вот yarn lint --fix дает странную ошибку:

irina@ikorol3107:~/WORK/ikorol.github.io$ yarn lint --fix
Unknown Syntax Error: Unsupported option name ("--fix").

$ actl lint [-r,--report #0] ...

при этом yarn lint пишет, что fix можно использовать:

116 problems (116 errors, 0 warnings)
  115 errors and 0 warnings potentially fixable with the `--fix` option.

TFK70 commented 3 years ago

@ikorol3107 это нормально, используй yarn format

ikorol3107 commented 3 years ago

@TFK70 при выполнении команды yarn diary возникает ошибка:

irina@ikorol3107:~/WORK/ikorol.github.io$ yarn diary
ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/irina/WORK/ikorol.github.io/practice/my-diary/dist
Error: spawn ENOTDIR
    at ChildProcess.spawn (node:internal/child_process:415:11)
    at Object.spawn (node:child_process:609:9)
    at module.exports (/home/irina/WORK/ikorol.github.io/.yarn/cache/opn-npm-5.5.0-9a97e03147-0ea3b6550f.zip/node_modules/opn/index.js:77:26)
    at /home/irina/WORK/ikorol.github.io/.yarn/$$virtual/webpack-dev-server-virtual-83db05ab04/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/lib/utils/runOpen.js:28:14
    at Array.map (<anonymous>)
    at runOpen (/home/irina/WORK/ikorol.github.io/.yarn/$$virtual/webpack-dev-server-virtual-83db05ab04/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/lib/utils/runOpen.js:25:11)
    at status (/home/irina/WORK/ikorol.github.io/.yarn/$$virtual/webpack-dev-server-virtual-83db05ab04/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/lib/utils/status.js:57:5)
    at Server.showStatus (/home/irina/WORK/ikorol.github.io/.yarn/$$virtual/webpack-dev-server-virtual-83db05ab04/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/lib/Server.js:766:5)
    at Server.<anonymous> (/home/irina/WORK/ikorol.github.io/.yarn/$$virtual/webpack-dev-server-virtual-83db05ab04/0/cache/webpack-dev-server-npm-3.11.2-02bc129ea9-6bf6803810.zip/node_modules/webpack-dev-server/lib/Server.js:784:12)
    at Object.onceWrapper (node:events:471:28)

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])

ikorol3107 commented 3 years ago

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

Type Error: u.Command.Boolean is not a function (when initializing @yarnpkg/plugin-version, defined in /home/irina/WORK/ikorol.github.io/.yarnrc.yml)

А кстати еще: чтоб не было ошибки при запуске команды yarn , делала yarn после установки каждого плагина -все работало, но после того как прописываю путь до plugin-essentials.js - ошибка опять появляется.

TFK70 commented 3 years ago

@ikorol3107 Да, все верно, это ошибка внутри плагина. В таком случае essentials пока не используй, убери его из yarnrc и используй просто actl (через yarn actl …)

ikorol3107 commented 3 years ago

@ikorol3107 Да, все верно, это ошибка внутри плагина. В таком случае essentials пока не используй, убери его из yarnrc и используй просто actl (через yarn actl …)

@TFK70 убрала. Использую команду yarn actl renderer dev и снова получаю следущее:

irina@ikorol3107:~/WORK/ikorol.github.io/practice/my-diary$ yarn actl renderer dev
Type Error: u.Command.Boolean is not a function (when initializing @yarnpkg/plugin-version, defined in /home/irina/WORK/ikorol.github.io/.yarnrc.yml)

ikorol3107 commented 3 years ago

@TFK70 в проекте должна быть папка src? %-/

irina@ikorol3107:~/WORK/ikorol.github.io/practice/my-diary$ yarn build
> No such directory exists as the project root: /home/irina/WORK/ikorol.github.io/practice/my-diary/src
Internal Error: Command failed with exit code 1: yarn next build src

TorinAsakura commented 3 years ago

@ikorol3107 так а откуда браться исходникам-то? Это очень странный вопрос спустя более чем полгода учёбы

ikorol3107 commented 3 years ago

@TFK70 в файле FormAddPost.tsx Button идет с ошибкой. Не пойму почему, я же передаю пропсы.

../../fragments/form-add-post/src/FormAddPost.tsx:42:10
Type error: Type '{ children: Element; size: string; borderRadius: string; shadow: string; marginTop: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ButtonProps'.

  39 |       </Row>
  40 |       <Box justifyContent='center' width={['150px', '200px', '200px']}>
> 41 |         <Button
     |          ^
  42 |           size='giant'
  43 |           borderRadius='giant'
  44 |           shadow='purple'

TFK70 commented 3 years ago

@ikorol3107 а зачем так надо было делать?

export const Button = (props: ButtonProps) => <StyledButton {...props} />

TFK70 commented 3 years ago

@ikorol3107 Ну и вообще эта строка сама за себя говорит:

Property 'children' does not exist on type 'IntrinsicAttributes & ButtonProps'

ikorol3107 commented 3 years ago

@TFK70 была Type error, что в моем публичном пакете @ikorol/todolist не хватает зависимости styled-system. Добавила зависимость, обновила пакет и указала новую версию пакета в своем проекте. После команды yarn при попытке сбилдить проект получаю ошибку, что у меня нет этого модуля:

irina@ikorol3107:~/WORK/ikorol.github.io$ yarn workspace @my-diary/app build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Failed to compile.

../../fragments/post-list/src/PostList.tsx:2:55
Type error: Cannot find module '@ikorol/todolist' or its corresponding type declarations.

  1 | import React                                     from 'react'
> 2 | import { TodoList }                              from '@ikorol/todolist'
    |                                                       ^
  3 | 
  4 | import { Box }                                   from '@ui/layout'
  5 | import { useFilter }                             from '@store/filter'

хотя в post-list/package.json он есть:

{
  "name": "@fragments/post-list",
  "version": "0.0.0",
  "license": "MIT",
  "main": "src/index.ts",
  "dependencies": {
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@ikorol/todolist": "^0.0.18",
    "@store/filter": "0.0.0",
    "@store/notes": "0.0.0",
    "@store/search-value": "0.0.0",
    "@types/react": "^17.0.13",
    "@ui/layout": "^0.0.0",
    "react": "^17.0.1",
    "react-intl": "^5.15.7",
    "styled-system": "^5.1.5"
  }
}

из-за чего возникает тогда эта ошибка?

TFK70 commented 3 years ago

@ikorol3107 а на сам пакет можно где-то посмотреть?

ikorol3107 commented 3 years ago

@ikorol3107 а на сам пакет можно где-то посмотреть?

@TFK70 https://www.npmjs.com/package/@ikorol/todolist

TFK70 commented 3 years ago

@ikorol3107 я про исходники, они в репе актуальные лежат?

ikorol3107 commented 3 years ago

@ikorol3107 я про исходники, они в репе актуальные лежат?

да, я только добавила в package одну строчку: зависимость styled-system

TFK70 commented 3 years ago

@ikorol3107 у тебя в пакете опять dist нету, через ctrl+лкм в package.json его прокликай и проверь

ikorol3107 commented 3 years ago

@TFK70 сегодня фиксила ошибки при билде, добавила dist в публичный пакет, разбиралась с алиасами. На текуший момент при билде выдает ошибку Build failed because of webpack errors. Завтра продолжу.

ikorol3107 commented 3 years ago

@TFK70 создала папку с файлами withAliases и withFutureWebpack5 , установила требуемые зависимости, которые выпадали как type errors при билде. Сейчас вот такая ошибка, что есть неизвестное свойство fallback , как с ней быть?

irina@ikorol3107:~/WORK/ikorol.github.io$ yarn workspace @my-diary/app build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

> Build error occurred
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].resolve has an unknown property 'fallback'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
   -> Options for the resolver
 - configuration[1].resolve has an unknown property 'fallback'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

TFK70 commented 3 years ago

@ikorol3107 поменяй содержимое withFutureWebpack5 на это:

const withFutureWebpack5 = (nextConfig) => ({
  ...nextConfig,
  future: {
    webpack5: true,
  },
})

module.exports = { withFutureWebpack5 }

И добавь events в алиасы, результат будет тот же events - это модуль nodejs, как fs или path, его нету в контексте веба, поэтому мы вручную должны установить его как зависимость и указать до него путь. Разница лишь в том что при resolve.fallback он будет обращаться к вручную установленному events только после того, как не сможет достучаться до своего events по дефолту (погугли что такое fallback), а алиас редиректит путь всегда

ikorol3107 commented 3 years ago

@ikorol3107 поменяй содержимое withFutureWebpack5 на это:

@TFK70 теперь так должен выглядеть withAliases.js?

/* eslint-disable no-param-reassign */
/* eslint-disable no-return-assign */

const withAliases = (aliases, require) => (nextConfig) => ({
  ...nextConfig,
  webpack(config, options) {
    aliases.forEach(
      // eslint-disable-next-line
      (alias) => (config.resolve.alias[alias] = require.resolve(alias.replace('$', ''))),
      // 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 = { withAliases }

TFK70 commented 3 years ago

@ikorol3107 withAliases не надо трогать, он принимает на вход массив пакетов которым нужно добавить алиас и делает все сам, тебе просто нужно было в этот массив дописать events

и он же у тебя ругается на то что resolve.fallback не существует, зачем ты сейчас опять пытаешься к нему обратиться?

ikorol3107 commented 3 years ago

@TFK70 так?

/* eslint-disable no-param-reassign */
/* eslint-disable no-return-assign */

const withAliases = (aliases, require) => (nextConfig, events) => ({
  ...nextConfig,
  ...events,
  webpack(config, options) {
    aliases.forEach(
      // eslint-disable-next-line
      (alias) => (config.resolve.alias[alias] = require.resolve(alias.replace('$', ''))),
      // eslint-disable-next-line
      config.resolve.events = require.resolve('events/')
    )

    if (typeof nextConfig.webpack === 'function') {
      return nextConfig.webpack(config, options)
    }

    return config
  },
})

module.exports = { withAliases }

atls-academy / ikorol.github.io