Запуск NPM возвращает ошибку «Возможна проблема с деревом зависимостей проекта»

Я новичок в программировании, и у меня возникли проблемы с тем, почему я больше не могу правильно настроить React. Я боролся на прошлой неделе, а затем, наконец, справился. Но теперь у меня снова возникла та же проблема, и ничего не работает.

У меня есть проект, с которого я начал npx create-react-app, а затем, когда я перешел в проект, я догадываюсь об этой проблеме:

There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"webpack": "4.29.6"

Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree:

/Users/aliceparker/node_modules/webpack (version: 4.33.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/aliceparker/node_modules/webpack is outside your project directory. For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls webpack in your project folder. This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

Я выполнил шаги, описанные выше. Все еще получить вопрос. Я также удалил веб-пакет глобально и переустановил его.

Вот как выглядит мой файл package.json:

`{
  "name": "ravenous-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}`

Может ли кто-нибудь помочь мне решить эту проблему? (Ps. Я пытался просто создать новый проект, но получил ту же проблему...)

Я следил за это, и это сработало для меня.

Murdock Helscream 08.06.2021 08:14

Просто обратите внимание, поскольку ни удаление node_modules, ни замалчивание ошибки не являются отличным решением для производства, это предупреждение, вероятно, исходит из конфликта между двумя разными пакетами на разных этапах, требующих разных веб-пакетов. Например, реагирующие скрипты хотят один веб-пакет, а сборник рассказов хочет другой.

Kzqai 16.06.2021 02:37

Иди и проверь этот пост... Это поможет мне stackoverflow.com/a/60947470/11510800

kouameYao 21.02.2022 23:58
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
33
3
51 614
20
Перейти к ответу Данный вопрос помечен как решенный

Ответы 20

Проблема заключается в том, что веб-пакет установлен в вашем пользовательском каталоге. Удалите его с помощью npm или вручную, и все должно работать нормально: ссылка: https://github.com/facebook/create-react-app/issues/6120

Спасибо, как мне удалить его из моего пользовательского каталога? Это все немного выше моей головы!

Alice 10.06.2019 16:38

Да, это было установлено с флагом нпм установить... -g, это конфликтует с вашей локальной установкой

Mosè Raguzzini 10.06.2019 17:05

Вы можете следовать инструкциям, приведенным в журнале ошибок.

  1. Удалите package-lock.json (не package.json!) и/или yarn.lock в папка вашего проекта.

  2. Удалите node_modules в папке вашего проекта.

  3. Удалите "webpack" из зависимостей и/или devDependencies в package.json файл в папке вашего проекта.

  4. Запустите npm install или yarn, в зависимости от используемого менеджера пакетов.

Спасибо. Я уже пробовал эти шаги, но просто будьте ясны, я не был уверен, правильно ли я сделал шаг 3. Как именно мне это сделать?

Alice 10.06.2019 16:39

откройте package.json, в разделе зависимостей или devDependencies удалите ссылку на webpack.

coldbreathe 10.06.2019 17:56

Там нет ссылки на веб-пакет. },

Alice 10.06.2019 19:41
Ответ принят как подходящий

В терминале запустите:

cd ~

Потом:

ls

Вы должны увидеть список файлов. Если node_modules включен в этот список (как кажется, так и должно быть), вы хотите удалить эту папку. Вы можете сделать это в терминале следующим образом:

rm -rf node_modules

Но имейте в виду: это не отправит папку в корзину. Он безвозвратно удалит его. rm -rf — мощная команда. Если это заставляет вас нервничать, вместо этого введите open .. Это откроет ваш «домашний» (~) каталог в Finder, и вы сможете удалить node_modules знакомым способом, щелкнув правой кнопкой мыши и отправив его в корзину.

Надеюсь, это поможет!

Вы получаете те же сообщения об ошибках, что и в исходном сообщении? Или что-то другое? Обновлено: вы cd вернулись в каталог проекта перед запуском npm start?

davidfloyd91 10.06.2019 17:31

нпм ОШИБКА! код ELIFECYCLE npm ERR! errno 1 н/мин ОШИБКА! [email protected] start: react-scripts start npm ОШИБКА! Состояние выхода 1 н/мин ERR! нпм ОШИБКА! Ошибка при запуске скрипта [email protected]. нпм ОШИБКА! Вероятно, это не проблема с npm. Вероятно, выше приведен дополнительный вывод журнала. нпм ОШИБКА! Полный журнал этого запуска можно найти в: npm ERR! /Users/alice/.npm/_logs/2019-06-10T14_56_11_380Z-debug.log Алиса-MBP-7:реакция-приложение Алиса$

Alice 10.06.2019 18:40

Хм, может эта ветка поможет: stackoverflow.com/questions/42308879/npm-err-code-elifecycle

davidfloyd91 10.06.2019 18:50

К сожалению, нет :( Я просто вернулся к той же проблеме, когда выполнил шаги, переустановил npm, а затем запустил npm.

Alice 10.06.2019 19:02

Вы все еще видите это сообщение? "Однако выше в дереве была обнаружена другая версия веб-пакета: /Users/aliceparker/node_modules/webpack"

davidfloyd91 10.06.2019 19:05

Да, это все еще там. Должен ли я удалить веб-пакет из глобальной пользовательской папки?

Alice 10.06.2019 19:12

Да, вы должны удалить node_modules и package-lock.json из /Users/aliceparker. stackoverflow.com/questions/53497035/…

davidfloyd91 10.06.2019 19:50

Да!! Спасибо! Ничего себе, я ходил по кругу все выходные на этом! Что я сделал: удалил модули узла и блокировку пакета из глобального (возможно, я не удалял оба ранее), а затем проверил кеш npm.

Alice 10.06.2019 20:02

Просто чтобы уточнить, я сделал все шаги для решения проблемы, и независимо от того, что это не сработало. Я обнаружил, что у меня есть папка node_modules в папке моего пользователя. Я удалил этот, но не тот, что был в моем проекте, а затем мог использовать «npm start» без каких-либо проблем.

Seb 18.05.2020 12:06

Я столкнулся с той же проблемой, и после некоторых исследований вот некоторые мысли: реагировать js, не требует веб-пакета, и это зависимость, которая вызывает ошибки, поскольку она не соответствует одноранговым зависимостям. Итак, самое простое, что я сделал, это: удалил зависимости webpack и babel, и мое приложение заработало без сбоев. Кстати, я использую версию реакции 17.0.2. Для дальнейшего чтения вы можете проверить ссылку javascript.plainenglish.io/…

Carlos Pimentel 06.07.2021 19:24

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

Удалите package-lock.json (не package.json!) и/или yarn.lock в папке вашего проекта.

Удалите node_modules в папке вашего проекта.

Удалите webpack из зависимостей и/или devDependencies в файле package.json в папке вашего проекта.

Запустите npm install или yarn, в зависимости от используемого менеджера пакетов.

Я пробовал все вышеперечисленное, и это не сработало, но однажды я добавил файл .env в структуру своего проекта и добавил SKIP_PREFLIGHT_CHECK=true в файл. Я мог бы обойти проблему:

problem solved

Вот что вы помещаете в файл .env:

This what you put inside the .env file

В моем случае я решил свою проблему таким образом

  1. создайте .env в корне папки react folder
  2. введите SKIP_PREFLIGHT_CHECK=true внутри .env файла
  3. теперь запустите в cmd npm start .

Что на самом деле делает этот файл .env? Любопытный

Neha Chaudhary 16.02.2022 08:00

@NehaChaudhary, который навсегда отключит эту проверку перед полетом

Krishna Jangid 16.02.2022 08:22

Решение, которое сработало для меня

Добавьте SKIP_PREFLIGHT_CHECK=true в файл .env в вашем проекте. Я не знаю, может ли это привести к ошибкам в будущем.

Делайте то, что написано об ошибке, чтобы все заработало.
Создайте файл .env в каталоге вашего проекта и добавьте SKIP_PREFLIGHT_CHECK=true, это сработает.

Это не решение, в большинстве случаев это просто скроет ошибку, но позже возникнут другие проблемы.

egdavid 26.06.2020 21:41

Я сталкивался с той же проблемой раньше, и я решил ее. create-react-app уже предоставил webpack(v4.29.6), что противоречит webpack(v4.33.0) в /Users/aliceparker/node_modules.

Поэтому, если вы удалите второй webpack(v4.33.0), он запустится.

Я создал проект, используя npx, и изначально у меня была такая же ошибка с babel-eslint. Я следовал подходу @davidflyod91, у меня это сработало. Я не доволен удалением всей папки node_module из каталога ~ (в моем MAC) (я имею в виду место, где установлены модули -g). Итак, я вернул node_modules и удалил папки, связанные с нижеприведенными из node_modules в каталоге ~/node_modules, и попытался запустить приложение (npm run start).

  • Вебпак
  • вавилон
  • эслинт
  • создать-реагировать-приложение

И тут приложение заработало.

тебе нужно попробовать сначала создайте файл с именем .env и сохраните SKIP_PREFLIGHT_CHECK=true

root/.env and .env should contain SKIP_PREFLIGHT_CHECK=true

  • добавьте «webpack»: «4.44.2» в зависимости package.json.
  • создайте .env и введите SKIP_PREFLIGHT_CHECK=true Это решит вашу проблему.

Удалите node_modules из вашего пользовательского каталога, т.е. C:\Users\User

Я пробовал все вышеперечисленные методы, но совершенно забыл об удалении модулей узлов из папки C:\Users\user. Большое спасибо @Emmanuel

xander cage 03.06.2021 09:02
  1. создайте файл .env или отредактируйте существующий.
  2. SKIP_PREFLIGHT_CHECK = true запишите это в .env файл.
  3. перезапустить сервер разработки.

Я решил проблему таким образом.

Добавьте строку "webpack": "4.44.2" в зависимости вашего package.json файла. Создайте файл .env и введите внутри SKIP_PREFLIGHT_CHECK=true, что решит вашу проблему.

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

Gonzalo Matheu 13.05.2021 16:25

Чтобы исправить дерево зависимостей, попробуйте выполнить следующие шаги в точном порядке:

  1. Удалите package-lock.json (не package.json!) и/или yarn.lock в папке вашего проекта.
  2. Удалите node_modules в папке вашего проекта.
  3. Удалите «webpack» из зависимостей и/или devDependencies в файле package.json в папке вашего проекта.
  4. Запустите npm install или yarn, в зависимости от используемого менеджера пакетов.

В большинстве случаев этого должно быть достаточно, чтобы решить проблему. Если это не помогло, есть еще несколько вещей, которые вы можете попробовать:

  1. Если вы использовали npm, установите пряжу (http://yarnpkg.com/) и повторите описанные выше шаги с ней. Это может помочь, потому что у npm есть известные проблемы с подъемом пакетов, которые могут быть решены в будущих версиях.

  2. Проверьте, не находится ли /home/omage/node_modules/webpack за пределами каталога вашего проекта. Например, вы могли случайно установить что-то в свою домашнюю папку.

  3. Попробуйте запустить npm ls webpack в папке вашего проекта. Это скажет вам, какой другой пакет (кроме ожидаемых сценариев реагирования) установил webpack.

Если ничего не помогает, добавьте SKIP_PREFLIGHT_CHECK=true в файл .env в вашем проекте. Это навсегда отключит эту предварительную проверку, если вы все равно захотите продолжить.

Ответ Чтобы исправить дерево зависимостей

чтобы решить проблему с деревом зависимостей, вам нужно удалить файл node-modules с вашего локального компьютера и запустить npm start , чтобы запустить локальный хост

В моем случае я удалил node_modules из каталога моего пользователя. Это сработало.

Я застрял на этом больше часа. Я выполнил все перечисленные шаги. Я удалил node_modules из своего проекта и ВСЕ папки модулей узлов, найденные на моем Mac. Затем я удалил packagelock, а затем запустил npm install, что дало мне новый nm и packagelock.

Бег npm start продолжает выдавать ту же ошибку. Я знаю, что это не мой код, потому что я могу проверить другую ветку и получить ту же ошибку.

Все началось, когда я установил библиотеку тестирования реакции и обновил сценарии реакции с 2.1.1 до 4... Я обновился из-за ошибки после запуска теста, в котором говорилось что-то о реагирующих скриптах (я не могу вспомнить, что именно там было сказано).

С тех пор я сбросил свой package.json на старую рабочую версию со старой версией реагирующих сценариев и без библиотек тестирования, снова выполнил все вышеперечисленные шаги и все еще имею ошибку.

У меня нет веб-пакета в зависимостях или зависимостях разработчиков.

Вот мой ранее работающий package.json

{
    "name": "bidrlfront",
    "version": "1.0.0",
    "private": true,
    "homepage": "./",
    "dependencies": {
      "@date-io/moment": "^1.3.13",
      "@material-ui/core": "^4.12.3",
      "@material-ui/icons": "^4.11.2",
      "@material-ui/pickers": "^3.3.10",
      "camelize": "^1.0.0",
      "chart.js": "^2.7.3",
      "classnames": "^2.2.6",
      "cross-env": "^5.2.0",
      "css-loader": "^1.0.0",
      "dateformat": "^3.0.3",
      "flux": "^3.1.3",
      "lodash.find": "^4.6.0",
      "moment": "^2.29.1",
      "node-sass": "^4.14.1",
      "react": "^16.14.0",
      "react-bootstrap": "^1.6.1",
      "react-dom": "^16.6.3",
      "react-ga": "^2.5.6",
      "react-loading": "^2.0.3",
      "react-quill": "^1.3.3",
      "react-router": "^4.3.1",
      "react-router-dom": "^5.2.0",
      "react-scripts": "2.1.1",
      "shards-react": "^1.0.0",
      "shortid": "^2.2.14"
    },
    "scripts": {
      "start": "react-scripts start",
      "build:prod": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react REACT_APP_GAID=UA-115105611-1 npm run build",
      "build": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build",
      "test": "react-scripts test",
      "scss": "node-sass --watch -include-path src/css -o css",
      "eject": "react-scripts eject",
      "gitty": "node g.js"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "devDependencies": {
      "sass-loader": "^7.1.0"
    },
    "repository": {
      "type": "git",
      "url": "git+ssh://[email protected]/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <[email protected]>",
    "license": "ISC"
  }

А вот мой package.json, когда начали возникать ошибки

{
    "name": "bidrlfront",
    "version": "1.0.0",
    "private": true,
    "homepage": "./",
    "dependencies": {
        "@date-io/moment": "^1.3.13",
        "@material-ui/core": "^4.12.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/pickers": "^3.3.10",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^13.2.1",
        "camelize": "^1.0.0",
        "chart.js": "^2.7.3",
        "classnames": "^2.2.6",
        "cross-env": "^5.2.0",
        "css-loader": "^1.0.0",
        "dateformat": "^3.0.3",
        "flux": "^3.1.3",
        "lodash.find": "^4.6.0",
        "moment": "^2.29.1",
        "node-sass": "^4.14.1",
        "react": "^16.14.0",
        "react-bootstrap": "^1.6.1",
        "react-dom": "^16.6.3",
        "react-ga": "^2.5.6",
        "react-loading": "^2.0.3",
        "react-quill": "^1.3.3",
        "react-router": "^4.3.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^2.1.1",
        "shards-react": "^1.0.0",
        "shortid": "^2.2.14"
    },
    "scripts": {
        "start": "react-scripts start",
        "build:prod": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react REACT_APP_GAID=UA-115105611-1 npm run build",
        "build": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build",
        "test": "react-scripts test",
        "scss": "node-sass --watch -include-path src/css -o css",
        "eject": "react-scripts eject",
        "gitty": "node g.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "sass-loader": "^7.1.0"
    },
    "repository": {
        "type": "git",
        "url": "git+ssh://[email protected]/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <[email protected]>",
    "license": "ISC"
}

Я также глобально установил библиотеку тестирования и fsevents до возникновения ошибки, но удалил их и удалил папки на своем Mac.

Я установил fsevents после получения этой ошибки при попытке запустить приложение после установки тестовых библиотек: Ошибка: fsevents недоступен (этот наблюдатель можно использовать только на Дарвине)

Я получал пустой экран. Это решило эту проблему. Затем я получил ошибку регистрации в моей системе аутентификации. Я использовал rxjs. Я должен был установить это. Получил ошибку сценария реакции и обновил ее до последней версии. Вот тогда все сломалось. Когда я бегу npm ls webpack я получаю это:

├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
└─┬ [email protected]
  └── [email protected] deduped

создайте файл .env и поместите эту строку «SKIP_PREFLIGHT_CHECK = true»

пример

Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 13.11.2021 01:06

Я создал файл .env и добавил в него SKIP_PREFLIGHT_CHECK=true.

Примечание: не давайте никакого имени файлу .env, созданное имя файла должно быть .env.

картинка для большего понимания

Другие вопросы по теме