Главная » Техника

Create react app build не работает

Содержание
  1. Что делать если при запуске Create React App выдает ошибку?
  2. Отказ от create-react-app и создание собственного шаблона для React-приложений
  3. Что такое CRA?
  4. Сильные стороны CRA
  5. Недостатки CRA
  6. Альтернатива CRA
  7. Библиотеки react и react-dom
  8. Транспилятор (Babel)
  9. Бандлер (Webpack)
  10. Итоги
  11. Create React App not working
  12. 18 Answers 18
  13. Как исправить ошибку npm start в create-react-app?

Что делать если при запуске Create React App выдает ошибку?

Пытаюсь запустить проект с помощью Create React App через команду «npm start» и получаю вот такую ошибку:

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:

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:

C:\Users\Алексей\node_modules\webpack (version: 4.16.3)

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:

5. If you used npm, install yarn (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.

6. Check if C:\Users\Алексей\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.

7. 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!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! password-lock@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the password-lock@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Источник

Отказ от create-react-app и создание собственного шаблона для React-приложений

Автор статьи, перевод которой мы сегодня публикуем, предлагает React-разработчикам отойти от использования create-react-app (CRA) и создать собственный шаблон для React-приложений. Здесь речь пойдёт о преимуществах и недостатках CRA, а так же будет предложено решение, которое способно заменить create-react-app .

Что такое CRA?

Create React App — это набор инструментов, созданный и поддерживаемый разработчиками из Facebook. CRA предназначен для быстрого создания шаблонных проектов React-приложений. При использовании CRA база React-проекта создаётся с помощью одной команды.

Сильные стороны CRA

    CRA позволяет создать базу для React-проекта одной командой:

  • Использование CRA избавляет разработчика от необходимости глубокого изучения вспомогательных инструментов. Разработчик может сосредоточиться на React и не беспокоиться о настройке Webpack, Babel и других служебных механизмов.
  • При применении CRA разработчику требуется лишь одна зависимость, имеющая отношение к сборке проекта. Это — react-scripts . Эта зависимость включает в себя все остальные зависимости сборки, в результате оказывается, что, например, для установки и обновления зависимостей достаточно одной команды:

    Недостатки CRA

    • При использовании CRA усложняется использование собственных конфигураций сборки проектов. Один из способов обхода этого ограничения заключается в использовании команды eject , но это лишает CRA-проекты преимущества в виде единственной зависимости сборки. Ещё один способ использования собственных конфигураций заключается в применении пакетов наподобие customize-cra или react-app-rewired, но подобные конфигурации отличаются ограниченными возможностями.
    • CRA скрывает от разработчика внутренние механизмы вспомогательных подсистем проектов. React-разработчик должен знать о том, что именно происходит в ходе подготовки React-приложения к реальной работе. Но так как в CRA используется уже не раз упомянутая «политика одной зависимости», у начинающего разработчика может возникнуть впечатление того, что react-scripts — это единственная зависимость, которая нужна для запуска React-приложения. Начинающий может попросту не знать о том, что, на самом деле, react-scripts — это, по сути, лишь «упаковка» для транспилятора (Babel) и бандлера (Webpack), которые играют ведущую роль в подготовке React-приложений к реальной работе. Я, признаться, и сам этого не знал до тех пор, пока не прочитал этот замечательный материал.
    • CRA, как мне кажется, перегружен возможностями, которые, в каком-то проекте, вполне могут оказаться невостребованными. Например, заготовки приложений, создаваемые с помощью CRA, поддерживают SASS. То есть, если в проекте используется обычный CSS или Less, поддержка SASS окажется совершенно ненужной. Вот, если интересно, файл package.json CRA-приложения после команды eject . В этом файле «развёрнуты» зависимости, раньше представленные react-scripts .

    Альтернативой CRA может стать разработка собственного шаблона для быстрого создания базовых React-проектов.

    Альтернатива CRA

    Разрабатывая альтернативу CRA, мы собираемся оснастить её возможностью быстрого, с использованием лишь одной команды, создания базовых React-проектов. Это повторяет одну из полезных возможностей create-react-app . А недостатки CRA мы, конечно, в нашу систему переносить не будем, самостоятельно устанавливая зависимости и настраивая проект. В наш проект не попадут две других полезных возможности CRA (избавление разработчика от необходимости изучения вспомогательных механизмов и схема «одной зависимости»), так как они несут с собой и недостатки (сокрытие внутренних механизмов вспомогательных подсистем от разработчика и сложность настройки собственных конфигураций сборки проектов).

    Вот репозиторий, в котором имеется весь код, который мы будем обсуждать в этом материале.

    Начнём работу с инициализации проекта средствами npm и с инициализации его git-репозитория:

    Создадим файл .gitignore следующего содержания:

    Это позволит нам не включать в состав репозитория папки, имена которых присутствуют в файле.

    Теперь поразмыслим о том, какие основные зависимости нам нужны для того чтобы собрать и запустить React-приложение.

    Библиотеки react и react-dom

    Это — единственные зависимости времени выполнения, которые нам нужны:

    Транспилятор (Babel)

    Транспилятор Babel преобразует код, соответствующий стандартам ECMAScript 2015+, в код, который будет работать и в новых, и в устаревших браузерах. Babel, благодаря применению пресетов, используется и для обработки JSX-кода:

    Вот как выглядит простая конфигурация Babel, предназначенная для подготовки к работе React-приложений. Эту конфигурацию можно добавить в файл .babelrc или в package.json :

    Babel поддерживает множество пресетов и плагинов. Их можно добавлять в проект по мере возникновения необходимости в них.

    Бандлер (Webpack)

    Бандлер Webpack отвечает за сборку проекта, формируя на основе кода проекта и кода его зависимостей единственный файл (бандл) приложения. При использовании таких техник оптимизации проектов, как разделение кода, в бандл приложения могут входить и несколько файлов.

    Простая конфигурация Webpack, предназначенная для сборки пакетов React-приложений, выглядит так, как показано ниже:

    Сюда, в соответствии с нуждами конкретного приложения, можно добавить различные загрузчики. Если вам эта тема интересна — взгляните на мой материал, где я рассказываю о конфигурациях Webpack, которыми можно воспользоваться для подготовки React-приложений к использованию в продакшне.

    Это — все необходимые нам зависимости. Теперь давайте добавим в проект шаблонный HTML-файл и заготовку React-компонента.

    Создадим в директории проекта папку src и добавим в неё файл index.html :

    В той же папке создадим React-компонент HelloWorld :

    В ту же папку добавим файл index.js :

    И наконец — добавим в package.json описания скриптов для запуска ( start ) и сборки ( build ) проекта:

    Вот и всё. Теперь в нашем распоряжении имеется работоспособная заготовка React-приложения. Убедиться в этом можно, выполнив команды npm start и npm run build .

    Теперь давайте оснастим нашу систему возможностью подготовки шаблона проекта с помощью единственной команды. То есть — воссоздадим одну из сильных сторон CRA. Мы собираемся использовать исполняемый JS-файл, который будет вызываться при вводе соответствующей команды в командной строке. Например, подобная команда может выглядеть так:

    Для реализации этой идеи мы собираемся воспользоваться разделом bin файла package.json .

    Сначала установим пакет fs-extra:

    Теперь создадим исполняемый JS-файл start.js , который будет расположен в папке bin нашего проекта. Поместим в этот файл следующий код:

    Теперь давайте свяжем этот исполняемый JS-файл с командой из package.json :

    Создадим локальную связь для пакета:

    Теперь, после выполнения этой команды, если в терминале выполнить команду вида your-boilerplate-name my-app , будет вызван наш исполняемый файл start.js . Он создаст новую папку с именем my-app , скопирует в неё файлы package.json , webpack.config.js и .gitignore , а так же папку src , и установит зависимости нового проекта my-app .

    Замечательно. Теперь всё это работает на вашем компьютере и позволяет вам, пользуясь единственной командой, создавать базовые React-проекты, обладающие собственной конфигурацией сборки.

    Вы можете пойти дальше и опубликовать свой шаблон в реестре npm. Для того чтобы это сделать, сначала надо отправить проект в GitHub-репозиторий. А дальше — следуйте этим инструкциям.

    Примите поздравления! Только что мы, буквально за несколько минут, создали альтернативу create-react-app . Наше решение не перегружено ненужными возможностями (в проекты, созданные на его основе, можно добавлять зависимости по мере возникновения необходимости в них). Пользуясь им, можно легко подстраивать конфигурацию сборки проекта под свои нужды.

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

    Я подготовил шаблон reactjs-boilerplate, позволяющий создавать проекты, готовые к работе в продакшне. Тут используется соответствующая конфигурация сборки, линтинг и хуки, ответственные за проверку проекта перед созданием коммитов. Испытайте этот шаблон. Если у вас появятся какие-то идеи по его совершенствованию, или если вы решите сделать вклад в его разработку — присоединяйтесь к работе над ним.

    Итоги

    Вот о чём мы говорили в этом материале:

    • Мы разобрали плюсы и минусы create-react-app .
    • Мы реализовали в своём проекте полезную возможность CRA по созданию заготовок React-приложений одной командой. А от недостатков CRA мы избавились.
    • Мы оснастили свой проект минимальными конфигурациями Webpack и Babel, необходимыми для сборки и запуска React-приложений.
    • Мы создали React-компонент HelloWorld.js , предусмотрели возможность сборки проекта и его запуска с использованием сервера разработки.
    • Мы создали исполняемый JS-файл и связали его с соответствующей командой, воспользовавшись разделом bin файла package.json .
    • Мы воспользовались командой npm link с целью создания локальной связи для нашего проекта и получения возможности создавать новые базовые проекты на его основе с помощью единственной команды.

    Надеюсь, этот материал поможет вам в деле разработки проектов, основанных на React.

    Пользуетесь ли вы create-react-app при создании новых React-проектов?

    Источник

    Create React App not working

    Help! I have no idea what is going on here, create react app is not working I have also tried reinstalling and yet to no avail, please help!

    Npm version: 5.4.2 Node version: 8.70

    Tried the npm install —save —save-exact —loglevel error react react-dom react-scripts

    18 Answers 18

    In my case, «create-react-app» was not installed. to install run this command

    Once installation successful, try running

    If this works for you. Great else comment what worked for you,

    Please try this:

    I had the same problem and had to do the following:

    After this I was able to create the app with:

    Make sure you are not running any antivirus, stop/pause all antivirus or protection software.

    You can also try

    as the error suggests, you should use a newer version of node. You are using 8.9.4, you should probably use 8.12.0 LTS.

    I had the same problem, and I solved it by:
    1. update the npm version (npm install npm@latest -g)
    2. clear the cache (npm cache clean —force)
    3. create the react project (npx create-react-app todo)
    (create-react-app was already installed)

    I had similar issue while tried creating new react app with create-react-app , but related to some random JSON reading issues while installations like.. >= 5.0 || 4.0 ..

    But the fix below solves multiple and similar issues.

    First of all, make sure you have required or latest version of node installed.

    Before using create-react-app make sure you clean npm cache using npm cache clean —force

    Now, is should be fine to create new react app with npx create-react-app tl-app or npx create-react-app . if you want to create current directory as project root.

    Источник

    Как исправить ошибку npm start в create-react-app?

    Установил реакт с помощью команды
    — npm install -g create-react-app
    — create-react-app new-app
    — cd new-app

    Вышло вот такое предупреждение (1 скрин), после npm start вот такая ошибка (2 скрин)


    • Вопрос задан более года назад
    • 116 просмотров

    Простой 7 комментариев

    Dima Polos, вышла то же предупреждение, но вот с такой заметко: «npm notice created a lockfile as package-lock.json. You should commit this file»

    Плюс там вышла такая подсказка: ‘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’

    По этой подсказке проблема устранилась. Но хотелось бы без этого доп файла решить проблему

    Попробуйте через npx создать проект.

    Еще могут быть проблемы из-за русских букв и длинных названий папок.

    Попробуйте удалить кэш npm.

    Попробуйте удалить node_modules и сделать npm i в папке проекта.

    Ну или можно поставить убунту для вин — делается в пару кликов. Обычно решает все базовые проблемы с пакетами под вин-платформой.

    Я почти год работаю с npm на windows и до сих пор встречаю разные проблемы. На маке такого в принципе нет.

    Источник

    Читайте также:  Почему алиса почему не работает телевизор
    • Оцените статью
    © 2024 Настройка и ремонт техники