Как использовать create-react-app на macOS?

Question

[Delawere]

Всем привет.
При использовании npx create-react-app my-app получаю ошибку Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
При этом если устанавливать через sudo, то все нормально, но не работает npm start (валятся ошибки в консоль)
На предыдущем проекте все отлично работало.

Пробовал:
1. Переустановить node js
2. Чистить кеш
3. Устанавливать create-react-app глобально

Comments

[ledovitiy]

с чем-то подобным встречался. В моем случае проблема была с правами доступа к папке node_modules

[Антон Спирин]

Нужен весь stacktrace ошибки. Возможно, нет прав. Тут поможет системная утилита chown.

[Delawere]

Антон Спирин, да, скорее всего проблемы с правами, впервые работаю с mac OS, до этого всегда на винде сидел.
В данный момент create-react-app работает, после установки ноды через nvm.
Сейчас появилась проблема с styled-component.
1. Изначально не ставились без sudo
2. С использованием sudo поставились, но не работают.
3. Сейчас при попытке установить по новой выходит ошибка

npm ERR! path /Users/zhiganov/Documents/projects/my-app/node_modules/styled-components
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/Users/zhiganov/Documents/projects/my-app/node_modules/styled-components'
npm ERR!  { [Error: EACCES: permission denied, access '/Users/zhiganov/Documents/projects/my-app/node_modules/styled-components']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/Users/zhiganov/Documents/projects/my-app/node_modules/styled-components\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path:
npm ERR!    '/Users/zhiganov/Documents/projects/my-app/node_modules/styled-components' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zhiganov/.npm/_logs/2019-05-01T18_25_29_366Z-debug.log
MacBook-Air-Zhiganov:my-app zhiganov$ sudo chown -R $USER /usr/local/
Password:
chown: /usr/local/: Operation not permitted

4. Нагуглил что нужно выполнить sudo chown -R $USER /usr/local/ - получаю ошибку
chown: /usr/local/: Operation not permitted

[Антон Спирин]

ставить через sudo локальные пакеты проекта неправильно. Только которые ставите глобально.
chown попробуйте выполнить для дериктории проекта.

sudo chown -R $USER /Users/zhiganov/Documents/projects/

Пакеты проекта переустанавливайте без sudo

[Delawere]

Антон Спирин, спасибо, styled-components установилось без sudo.

Но при открытии консоли выходит ошибка:
bash: bash_completion: command not found

При выполнении npm start получаю ошибку:

Attempted import error: 'styled' is not exported from 'styled-components'.

Styled-components установились без ошибок (только варнинги) и в зависимостях появились.

[Антон Спирин]

Delawere, значит, что не найдена команда bash_completion. Что вы запускаете, что получаете эту ошибку?
По поводу styled-components, импортировать styled в коде надо дефолтным импортом:
import styled from 'styled-components';
Не именованным:

import { styled } from 'styled-components'; // неправильно

[Delawere]

Антон Спирин, да, помогло, спасибо еще раз.
При открытии терминала в VS Code вверху появляется эта ошибка.

Answer 1

[Владимир]

Попробуйте ставить ноду вот этим https://github.com/nvm-sh/nvm не от рута а от пользователя.
Даже если не захотите ставить nvm, погуглите как использовать npm install от пользвателя, а не от рута.

Comments

[Delawere]

Я правильно понял, что мне следует дать пользователю права на директории связанные с npm?

[Владимир]

Delawere, Нет, нужно заставить npm сохранять в папку пользователя
Я бы на вашем месте подумал об использовании nvm

https://docs.npmjs.com/resolving-eacces-permission...

[Delawere]

Владимир, поставил ноду через nvm install node, после create-react-app отработал нормально, на следующий раз только с 4 попытки (снова крашился на установке react-dom). Но в любом случае, способ помог, спасибо.

[Delawere]

Владимир, Зато теперь по какой то причине не ставятся любые npm пакеты. Ставятся только через sudo, но все равно не работают. Путь в bash_profile (или как то так) прописал как usr/local/bin. Без этого не ставился nvm.

[Владимир]

Delawere,

The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

Все должно ставать в папку пользователя
https://github.com/nvm-sh/nvm#install--update-script