search

MoonHighway / learning-react

The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media
3.58k stars 1.24k forks source link

npm install error #9

Closed cyuno closed 6 years ago

cyuno commented 7 years ago

I get an npm install error running on windows 10 node 8.0.0. npm 5.0.3:

Microsoft Windows [Version 10.0.14393] (c) 2016 Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>cd c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer

c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer>npm -v 5.0.3

c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer>npm install npm WARN prefer global node-gyp@3.6.2 should be installed with -g

node-sass@4.5.1 install c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-sass node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.1/win32-x64-57_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.1/win32-x64-57_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

fsevents@1.1.2 install c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\fsevents node install

node-sass@4.5.1 postinstall c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-sass node scripts/build.js

Building: C:\Program Files\nodejs\node.exe c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp info it worked if it ends with ok gyp verb cli [ 'C:\Program Files\nodejs\node.exe', gyp verb cli 'c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\bin\node-gyp.js', gyp verb cli 'rebuild', gyp verb cli '--verbose', gyp verb cli '--libsass_ext=', gyp verb cli '--libsass_cflags=', gyp verb cli '--libsass_ldflags=', gyp verb cli '--libsass_library=' ] gyp info using node-gyp@3.6.2 gyp info using node@8.0.0 | win32 | x64 gyp verb command rebuild [] gyp verb command clean [] gyp verb clean removing "build" directory gyp verb command configure [] gyp verb check python checking for Python executable "python2" in the PATH gyp verb which failed Error: not found: python2 gyp verb which failed at getNotFoundError (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:13:12) gyp verb which failed at F (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:68:19) gyp verb which failed at E (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:80:29) gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:89:16 gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\index.js:42:5 gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\windows.js:36:5 gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21) gyp verb which failed python2 { Error: not found: python2 gyp verb which failed at getNotFoundError (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:13:12) gyp verb which failed at F (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:68:19) gyp verb which failed at E (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:80:29) gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\which\which.js:89:16 gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\index.js:42:5 gyp verb which failed at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\isexe\windows.js:36:5 gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21) code: 'ENOENT' } gyp verb check python checking for Python executable "python" in the PATH gyp verb which succeeded python C:\Python36\python.EXE gyp verb check python version C:\Python36\python.EXE -c "import platform; print(platform.python_version());" returned: "3.6.0\r\n" gyp verb could not find "C:\Python36\python.EXE". checking python launcher gyp verb could not find "C:\Python36\python.EXE". guessing location gyp verb ensuring that file exists: C:\Python27\python.exe gyp ERR! configure error gyp ERR! stack Error: Can't find Python executable "C:\Python36\python.EXE", you can set the PYTHON env variable. gyp ERR! stack at PythonFinder.failNoPython (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\lib\configure.js:483:19) gyp ERR! stack at PythonFinder. (c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\lib\configure.js:508:16) gyp ERR! stack at c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\graceful-fs\polyfills.js:284:29 gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21) gyp ERR! System Windows_NT 10.0.14393 gyp ERR! command "C:\Program Files\nodejs\node.exe" "c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer\node_modules\node-sass gyp ERR! node -v v8.0.0 gyp ERR! node-gyp -v v3.6.2 gyp ERR! not ok Build failed with error code: 1 npm WARN color-organizer@4.0.0 No repository field.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.5.1 postinstall: node scripts/build.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.5.1 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\xxxxx\AppData\Roaming\npm-cache_logs\2017-06-18T05_53_06_349Z-debug.log

c:\Users\xxxxx\JavaScript\React\LearningReact1sEd_2017\learning-react\chapter-09\color-organizer>

MoonTahoe commented 7 years ago

Are you still receiving this error with node-sass?

MoonTahoe commented 6 years ago

Some windows users have experienced problems with node-sass. I have included some links below that may help with troubleshooting your node-sass installation. I have also recently updated all of the npms in this repo to the latest versions. You may want to update your repo and try again.

Finally, you don't need the sass to run the react. Here is a copy of the CSS that is used for the color-organizer. Simply remove all references to scss, scss files, and scss loaders in your project and use this stylesheet instead:

html, body, div#react-container {
  min-height: 100%;
}
h1 {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
}
body div.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}
input {
  outline: none;
}
form.add-color {
  width: 100%;
  display: flex;
}
form.add-color > :first-child {
  flex-grow: 1;
}
form.add-color input, form.add-color button {
  margin: 0.5em;
  padding: 0.25em;
  font-size: 1.2em;
  border-radius: 5px;
}
form.add-color input[type="color"] {
  padding: 0;
  height: 2em;
}
form.add-color button {
  background-color: green;
  color: white;
  border: none;
}
section.color {
  box-shadow: 3px 3px 8px 1px rgba(178, 178, 178, 1);
  height: 235px;
  border: 2px solid rgba(229, 229, 229, 1);
  border-bottom-color: rgba(127, 127, 127, 1);
  border-right-color: rgba(127, 127, 127, 1);
  margin: 1em;
  padding: 0;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
@media screen and (min-width: 700px) {
  section.color {
    flex-basis: calc(50% - 2em - 4px);
  }
}
@media screen and (min-width: 1100px) {
  section.color {
    flex-basis: calc(33.33333% - 2em - 4px);
  }
}
@media screen and (min-width: 1600px) {
  section.color {
    flex-basis: calc(25% - 2em - 4px);
  }
}
@media screen and (min-width: 2000px) {
  section.color {
    flex-basis: calc(16.66666% - 2em - 4px);
  }
}
section.color h1 {
  font-family: Verdana, sans-serif;
  text-align: center;
  padding: 0.5em;
  flex-basis: calc(100% - 1em);
}
section.color button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  flex-basis: calc(12% - 1em);
  text-align: right;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  padding: 0.75em;
  border-radius: 0.5px;
}
section.color > div:last-child {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.5em;
}
section.color div.color {
  height: 100px;
  flex-basis: 100%;
}
section.color div.time-ago {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  font-family: monospace;
  color: rgba(127, 127, 127, 1);
}
div.color-list {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  overflow: scroll;
}
nav {
  display: flex;
  justify-content: space-around;
  background-color: black;
  color: white;
}
nav h1 {
  display: none;
}
nav a {
  color: white;
  font-family: Arial, sans-serif;
  font-size: 2em;
  text-decoration: none;
  padding: 0.5em;
}
nav a.selected {
  color: #900;
}
div.star {
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: rgba(127, 127, 127, 1);
  clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
}
div.star.selected {
  background-color: red;
}

If you want to try to debug node-sass on windows here are some resources: