Я новичок в программировании, и у меня возникли проблемы с тем, почему я больше не могу правильно настроить 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:
- Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
- Delete node_modules in your project folder.
- Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
- 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:
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.
Check if /Users/aliceparker/node_modules/webpack is outside your project directory. For example, you might have accidentally installed something in your home folder.
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. Я пытался просто создать новый проект, но получил ту же проблему...)
Просто обратите внимание, поскольку ни удаление node_modules, ни замалчивание ошибки не являются отличным решением для производства, это предупреждение, вероятно, исходит из конфликта между двумя разными пакетами на разных этапах, требующих разных веб-пакетов. Например, реагирующие скрипты хотят один веб-пакет, а сборник рассказов хочет другой.
Иди и проверь этот пост... Это поможет мне stackoverflow.com/a/60947470/11510800





Проблема заключается в том, что веб-пакет установлен в вашем пользовательском каталоге. Удалите его с помощью npm или вручную, и все должно работать нормально: ссылка: https://github.com/facebook/create-react-app/issues/6120
Спасибо, как мне удалить его из моего пользовательского каталога? Это все немного выше моей головы!
Да, это было установлено с флагом нпм установить... -g, это конфликтует с вашей локальной установкой
Вы можете следовать инструкциям, приведенным в журнале ошибок.
Удалите package-lock.json (не package.json!) и/или yarn.lock в
папка вашего проекта.
Удалите node_modules в папке вашего проекта.
Удалите "webpack" из зависимостей и/или devDependencies в
package.json файл в папке вашего проекта.
Запустите npm install или yarn, в зависимости от используемого менеджера пакетов.
Спасибо. Я уже пробовал эти шаги, но просто будьте ясны, я не был уверен, правильно ли я сделал шаг 3. Как именно мне это сделать?
откройте package.json, в разделе зависимостей или devDependencies удалите ссылку на webpack.
Там нет ссылки на веб-пакет. },
В терминале запустите:
cd ~
Потом:
ls
Вы должны увидеть список файлов. Если node_modules включен в этот список (как кажется, так и должно быть), вы хотите удалить эту папку. Вы можете сделать это в терминале следующим образом:
rm -rf node_modules
Но имейте в виду: это не отправит папку в корзину. Он безвозвратно удалит его. rm -rf — мощная команда. Если это заставляет вас нервничать, вместо этого введите open .. Это откроет ваш «домашний» (~) каталог в Finder, и вы сможете удалить node_modules знакомым способом, щелкнув правой кнопкой мыши и отправив его в корзину.
Надеюсь, это поможет!
Вы получаете те же сообщения об ошибках, что и в исходном сообщении? Или что-то другое? Обновлено: вы cd вернулись в каталог проекта перед запуском npm start?
нпм ОШИБКА! код 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:реакция-приложение Алиса$
Хм, может эта ветка поможет: stackoverflow.com/questions/42308879/npm-err-code-elifecycle
К сожалению, нет :( Я просто вернулся к той же проблеме, когда выполнил шаги, переустановил npm, а затем запустил npm.
Вы все еще видите это сообщение? "Однако выше в дереве была обнаружена другая версия веб-пакета: /Users/aliceparker/node_modules/webpack"
Да, это все еще там. Должен ли я удалить веб-пакет из глобальной пользовательской папки?
Да, вы должны удалить node_modules и package-lock.json из /Users/aliceparker. stackoverflow.com/questions/53497035/…
Да!! Спасибо! Ничего себе, я ходил по кругу все выходные на этом! Что я сделал: удалил модули узла и блокировку пакета из глобального (возможно, я не удалял оба ранее), а затем проверил кеш npm.
Просто чтобы уточнить, я сделал все шаги для решения проблемы, и независимо от того, что это не сработало. Я обнаружил, что у меня есть папка node_modules в папке моего пользователя. Я удалил этот, но не тот, что был в моем проекте, а затем мог использовать «npm start» без каких-либо проблем.
Я столкнулся с той же проблемой, и после некоторых исследований вот некоторые мысли: реагировать js, не требует веб-пакета, и это зависимость, которая вызывает ошибки, поскольку она не соответствует одноранговым зависимостям. Итак, самое простое, что я сделал, это: удалил зависимости webpack и babel, и мое приложение заработало без сбоев. Кстати, я использую версию реакции 17.0.2. Для дальнейшего чтения вы можете проверить ссылку javascript.plainenglish.io/…
Проблема связана с вашей папкой дерева на вашем компьютере, когда вы делаете все проекты, попробуйте приложение в папке, не существующей, и я надеюсь, что это сработает.
Удалите package-lock.json (не package.json!) и/или yarn.lock в папке вашего проекта.
Удалите node_modules в папке вашего проекта.
Удалите webpack из зависимостей и/или devDependencies в файле package.json в папке вашего проекта.
Запустите npm install или yarn, в зависимости от используемого менеджера пакетов.
Я пробовал все вышеперечисленное, и это не сработало, но однажды я добавил файл .env в структуру своего проекта и добавил SKIP_PREFLIGHT_CHECK=true в файл. Я мог бы обойти проблему:
Вот что вы помещаете в файл .env:
В моем случае я решил свою проблему таким образом
.env в корне папки react folderSKIP_PREFLIGHT_CHECK=true внутри .env файлаnpm start .Что на самом деле делает этот файл .env? Любопытный
@NehaChaudhary, который навсегда отключит эту проверку перед полетом
Решение, которое сработало для меня
Добавьте SKIP_PREFLIGHT_CHECK=true в файл .env в вашем проекте. Я не знаю, может ли это привести к ошибкам в будущем.
Делайте то, что написано об ошибке, чтобы все заработало.
Создайте файл .env в каталоге вашего проекта и добавьте SKIP_PREFLIGHT_CHECK=true, это сработает.
Это не решение, в большинстве случаев это просто скроет ошибку, но позже возникнут другие проблемы.
Я сталкивался с той же проблемой раньше, и я решил ее.
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/.envand.envshould containSKIP_PREFLIGHT_CHECK=true
package.json..env и введите SKIP_PREFLIGHT_CHECK=true
Это решит вашу проблему.Удалите node_modules из вашего пользовательского каталога, т.е. C:\Users\User
Я пробовал все вышеперечисленные методы, но совершенно забыл об удалении модулей узлов из папки C:\Users\user. Большое спасибо @Emmanuel
.env или отредактируйте существующий.SKIP_PREFLIGHT_CHECK = true запишите это в .env файл.Я решил проблему таким образом.
Добавьте строку "webpack": "4.44.2" в зависимости вашего package.json файла.
Создайте файл .env и введите внутри SKIP_PREFLIGHT_CHECK=true, что решит вашу проблему.
Это не решает проблему, это обходной путь, отключающий предварительную проверку и может иметь другие последствия.
Чтобы исправить дерево зависимостей, попробуйте выполнить следующие шаги в точном порядке:
В большинстве случаев этого должно быть достаточно, чтобы решить проблему. Если это не помогло, есть еще несколько вещей, которые вы можете попробовать:
Если вы использовали npm, установите пряжу (http://yarnpkg.com/) и повторите описанные выше шаги с ней. Это может помочь, потому что у npm есть известные проблемы с подъемом пакетов, которые могут быть решены в будущих версиях.
Проверьте, не находится ли /home/omage/node_modules/webpack за пределами каталога вашего проекта. Например, вы могли случайно установить что-то в свою домашнюю папку.
Попробуйте запустить 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»
Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Я создал файл .env и добавил в него SKIP_PREFLIGHT_CHECK=true.
Примечание: не давайте никакого имени файлу .env, созданное имя файла должно быть .env.
Я следил за это, и это сработало для меня.