Как перенести проект Vue.js из PhpStorm на другое рабочее место?

Question

[Максим]

Изначально создавался проект в PhpStorm 2020.1.2 x64 Vue.js vuetifyjs, подключал модули. Выгружал всё на github
Сейчас решил продолжить проект.
Установил PhpStorm 2019.3.4 x64 и не пойму как правильно перенести.
Копируя полностью каталог, горы ошибок.
Устанавливая чистый проект vue и загружая туда все модули, после копируя только каталоги самого кода, также получаю горы ошибок при старте.
На 1м рабочем месте всё работает.
Как правильно перенести?

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

composer.json

{
    "require": {
        "cboden/ratchet": "^0.3.6"
    }
}

package.json

{
  "name": "vue-screencasts",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fortawesome/vue-fontawesome": "^0.1.7",
    "axios": "^0.21.1",
    "core-js": "^3.1.2",
    "ratchet": "^1.1.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.6",
    "vue-video-player": "^5.0.2",
    "vuetify": "^2.0.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.4.95",
    "@vue/cli-plugin-babel": "^4.0.0-rc.2",
    "@vue/cli-plugin-eslint": "^4.0.0-rc.2",
    "@vue/cli-plugin-router": "^4.0.0-rc.2",
    "@vue/cli-plugin-vuex": "^4.0.0-rc.2",
    "@vue/cli-service": "^4.0.0-rc.2",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "miragejs": "^0.1.41",
    "sass": "^1.19.0",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

Comments

[VolgaVolga]

А просто склонировать с GitHub?

[Максим]

VolgaVolga, делал. Но npm install в таком случае не работает. Не могу запустит проект.

[Максим]

VolgaVolga, клонирую с github

npm install
и на этом всё

49 vulnerabilities (11 moderate, 25 high, 13 critical)
Process finished with exit code 0

[Максим]

TheAndrey7, он есть также в корне. Просто большого размера.

[VolgaVolga]

Максим,

npm install в таком случае не работает

"Не работает" - крайне хреновое описание проблемы. Отвыкайте.

Process finished with exit code 0

Это успешное завершение, если что.

и на этом всё

В чем проблема до сих пор неясно.

[VolgaVolga]

В порядке бреда, т.к. всякое видал.

1. Вы же понимаете, что "npm i" не запускает проект?
2. Вы же не пушили node-modules в репозиторий?

И вообще, при чем тут PhpStorm? Руками склонировать, подтянуть зависимости и запустить получается?

[Максим]

VolgaVolga, тут больше бл акцент на строке 49 vulnerabilities (11 moderate, 25 high, 13 critical)

1. Вы же понимаете, что "npm i" не запускает проект?

Конечно.
На сколько я понимаю, проблема как раз на стадии установки модулей. Часть из них просто недоступны уже.
Там куча лога вида
npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'pkcs7@0.2.3',
npm WARN EBADENGINE required: { node: '^0.10', npm: '^1.4.6' },
npm WARN EBADENGINE current: { node: 'v18.12.0', npm: '8.19.2' }
npm WARN EBADENGINE }

И вообще, при чем тут PhpStorm? Руками склонировать, подтянуть зависимости и запустить получается?

Я делаю всё это через PhpStorm в консоли на винде.
Каталог node_modules заполнился модулями. Но я так понимаю не всеми.

[Максим]

VolgaVolga, При запуске я дошел до такой ошибки

Ответ

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run serve --scripts-prepend-node-path=auto

> vue-screencasts@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  ValidationError: Progress Plugin Invalid Options

        options should NOT have additional properties
        options should NOT have additional properties
        options should NOT have additional properties
        options should pass "instanceof" keyword validation
        options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

    at validateOptions (C:\Sites\telega_gui_2.0\node_modules\webpack\node_modules\schema-utils\src\validateOptions.js:32:11)
    at new ProgressPlugin (C:\Sites\telega_gui_2.0\node_modules\webpack\lib\ProgressPlugin.js:62:3)
    at new Progress (C:\Sites\telega_gui_2.0\node_modules\progress-webpack-plugin\index.js:25:21)
    at new progressPlugin (C:\Sites\telega_gui_2.0\node_modules\progress-webpack-plugin\index.js:127:10)
    at C:\Sites\telega_gui_2.0\node_modules\webpack-chain\src\Plugin.js:14:18
    at module.exports.toConfig (C:\Sites\telega_gui_2.0\node_modules\webpack-chain\src\Plugin.js:78:22)
    at C:\Sites\telega_gui_2.0\node_modules\webpack-chain\src\Config.js:129:63
    at Array.map (<anonymous>)
    at module.exports.toConfig (C:\Sites\telega_gui_2.0\node_modules\webpack-chain\src\Config.js:129:40)
    at Service.resolveWebpackConfig (C:\Sites\telega_gui_2.0\node_modules\@vue\cli-service\lib\Service.js:277:34)

Process finished with exit code 1

Что делать дальше, непонятно.

[Максим]

VolgaVolga, и вот

npm install

C:\Sites\telega_gui_2.0>npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/cli-plugin-eslint@5.0.8
npm ERR! Found: eslint@5.16.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^5.16.0" from the root project
npm ERR!   peer eslint@">= 4.12.1" from babel-eslint@10.1.0
npm ERR!   node_modules/babel-eslint
npm ERR!     dev babel-eslint@"^10.0.1" from the root project
npm ERR!   2 more (eslint-plugin-vue, vue-eslint-parser)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">=7.5.0" from @vue/cli-plugin-eslint@5.0.8
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"^5.0.8" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint@8.26.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@">=7.5.0" from @vue/cli-plugin-eslint@5.0.8
npm ERR!   node_modules/@vue/cli-plugin-eslint
npm ERR!     dev @vue/cli-plugin-eslint@"^5.0.8" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\maxya\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\maxya\AppData\Local\npm-cache\_logs\2022-11-04T13_04_11_725Z-debug-0.log

[VolgaVolga]

Максим, так у вас конфликт версий пакетов, о чем прямо написано.

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps

И даже подсказывает путь решения.

[Максим]

VolgaVolga, так я пробовал. И просто npm install --legacy-peer-deps и npm install eslint --legacy-peer-deps, не решает проблему.

При запуске не компилит.

лог ошибок

ERROR Failed to compile with 1 error 19:00:49

error in ./src/main.js

Syntax Error: Error: error:0308010C:digital envelope routines::unsupported
at Generator.next ()
at new Promise ()
at Generator.next ()

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at filename (C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:94:23)
at C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:120:39
at Generator.next ()
at asyncGeneratorStep (C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:3:103)
at _next (C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:5:194)
at C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:5:364
at new Promise ()
at C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:5:97
at handleCache (C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:159:18)
at C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:204:18
at Generator.next ()
at asyncGeneratorStep (C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:3:103)
at _next (C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:5:194)
at C:\Sites\telega_gui_2.0\node_modules\babel-loader\lib\cache.js:5:364

ERROR in [eslint] ESLint is not a constructor

ERROR in Error: Child compilation failed:
[eslint] ESLint is not a constructor

- child-compiler.js:169
[telega_gui_2.0]/[cli-service]/[html-webpack-plugin]/lib/child-compiler.js:169:18

- Compiler.js:551 finalCallback
[telega_gui_2.0]/[webpack]/lib/Compiler.js:551:5

- Compiler.js:577
[telega_gui_2.0]/[webpack]/lib/Compiler.js:577:11

- Compiler.js:1196
[telega_gui_2.0]/[webpack]/lib/Compiler.js:1196:17


- task_queues:95 processTicksAndRejections
node:internal/process/task_queues:95:5

- task_queues:64 runNextTicks
node:internal/process/task_queues:64:3

- timers:442 process.processImmediate
node:internal/timers:442:9


webpack compiled with 3 errors

[VolgaVolga]

Максим, ну так все попытки нужно было в вопросе описать.

Error: error:0308010C:digital envelope routines::unsupported

1. Эта ошибка обильно гуглится. Поищите ваш вариант.
2. Сверьте версию Node.js на обеих машинах.

[Максим]

VolgaVolga,
1. Всё удалил. Делаю клонирование с github

Старое рабочее место
C:\OSPanel\domains\telega>node -v && vue -V && npm -v
v14.16.0
@vue/cli 4.5.12
6.14.11

Новое рабочее место
C:\Sites\telega_gui_2.0>node -v && vue -V && npm -v
v14.16.0
@vue/cli 5.0.8
8.19.3
Поставил node такую же версию

2. npm install

Лог

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" install --scripts-prepend-node-path=auto

> yorkie@2.0.0 install C:\Sites\telega_gui_2.0\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done

> @fortawesome/fontawesome-common-types@0.2.35 postinstall C:\Sites\telega_gui_2.0\node_modules\@fo
rtawesome\fontawesome-common-types
> node attribution.js

Font Awesome Free 0.2.35 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT Lic
ense)

> core-js@2.6.12 postinstall C:\Sites\telega_gui_2.0\node_modules\babel-runtime\node_modules\core-j
s
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript stan
dard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@3.10.0 postinstall C:\Sites\telega_gui_2.0\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

> ejs@2.7.4 postinstall C:\Sites\telega_gui_2.0\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> @fortawesome/fontawesome-svg-core@1.2.35 postinstall C:\Sites\telega_gui_2.0\node_modules\@fortaw
esome\fontawesome-svg-core
> node attribution.js

Font Awesome Free 1.2.35 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT Lic
ense)

> @fortawesome/free-solid-svg-icons@5.15.3 postinstall C:\Sites\telega_gui_2.0\node_modules\@fortaw
esome\free-solid-svg-icons
> node attribution.js

Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT Lic
ense)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\no
de_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os
":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\n
ode_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os
":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os"
:"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1398 packages from 728 contributors and audited 1401 packages in 41.168s

76 packages are looking for funding
run `npm fund` for details

found 106 vulnerabilities (2 low, 38 moderate, 51 high, 15 critical)
run `npm audit fix` to fix them, or `npm audit` for details

Process finished with exit code 0

Есть ошибки в google console, но уже запустилось! Спасибо