coryhouse / react-flux-starter-kit

Quickly get started with React and Flux using Browserify and Gulp
682 stars 247 forks source link

Gulp not running (node 8 & 7) #15

Closed bcromijn closed 6 years ago

bcromijn commented 7 years ago

Started off with the course, I really like the way Cory explains... but when it eventually came to setting up the environment I quickly ran into problems. I went to the github page to download the repo and only came to see the course is already 2 years old... that's a little disappointing :-(

Anyways, the first problem I ran into was this one:

react-flux-starter-kit-master  gulp
[09:46:53] Warning: gulp version mismatch:
[09:46:53] Global gulp is 3.9.1
[09:46:53] Local gulp is 3.9.0
module.js:487
    throw err;
    ^

Error: Cannot find module 'internal/fs'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at evalmachine.<anonymous>:40:20
    at Object.<anonymous> (/Users/benromijn/react-flux-starter-kit-master/node_modules/gulp/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:11:1)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)

But this was only a warning, I ran npm install gulp (so without the -g) and that solved the warning but not the problem:

~/react-flux-starter-kit-master gulp
module.js:472
    throw err;
    ^

Error: Cannot find module 'clone'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/benromijn/react-flux-starter-kit-master/node_modules/vinyl/index.js:2:13)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

I am currently on NPM v 5.0.3 and NODE 8.1.1

coryhouse commented 7 years ago

Does the final course exercise posted on the course page run for you?

zbjornson commented 7 years ago

(randomly stumbled on this)

Gulp doesn't work with Node >6 yet. See https://github.com/gulpjs/gulp/issues/1604.

gotoken commented 7 years ago

Worked here with node v8.4.0 and up-to-date dependencies. All I did was:

  1. Upgrade all build dependencies
  2. Update a line in gulpfile.js.

that is:

uninstall all

zsh% for i in "gulp-connect" \
"gulp-eslint" \
"gulp-open" \
"gulp-concat" \
"gulp" \
"flux" \
"react-router" \
"reactify" \
"react" \
"vinyl-source-stream" \
"browserify" ; npm uninstall -P $i

reinstall all

zsh% for i in "gulp" \
"gulp-eslint" \
"gulp-connect" \
"gulp-open" \
"gulp-concat" \
"flux" \
"react" \
"reactify" \
"react-router" \
"vinyl-source-stream" \
"browserify" ; npm install -P $i

fix typo in gulpfile.js

diff --git a/gulpfile.js b/gulpfile.js
index 02bcd4b..f546f5a 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -63,7 +63,7 @@

 gulp.task('lint', function() {
        return gulp.src(config.paths.js)
-               .pipe(lint({config: 'eslint.config.json'}))
+               .pipe(lint({configFile: 'eslint.config.json'}))
                .pipe(lint.format());
 });

and then

zsh% npm start

builded and started the server.

After all, package.json has been changed as follows:

diff --git a/package.json b/package.json
index e32b02f..ecb9211 100755
--- a/package.json
+++ b/package.json
@@ -11,16 +11,16 @@
   "license": "ISC",
   "dependencies": {
     "bootstrap": "^3.3.5",
-    "browserify": "^11.0.1",
-    "flux": "^2.0.3",
-    "gulp": "^3.9.0",
-    "gulp-concat": "^2.6.0",
-    "gulp-connect": "^2.2.0",
-    "gulp-eslint": "^0.15.0",
-    "gulp-open": "^1.0.0",
+    "browserify": "^14.4.0",
+    "flux": "^3.1.3",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-connect": "^5.0.0",
+    "gulp-eslint": "^4.0.0",
+    "gulp-open": "^2.0.0",
     "jquery": "^2.1.4",
-    "react": "^0.13.3",
-    "react-router": "^0.13.3",
+    "react": "^15.6.1",
+    "react-router": "^4.2.0",
     "reactify": "^1.1.1",
     "vinyl-source-stream": "^1.1.0"
   }

hope this helps.

shahenaz24 commented 6 years ago

Hi Corthouse, I'm working on node 8 with above changed version but lint is not working with this setup. Below is error when I ran gulp with java script error:

[10:48:47] Using gulpfile C:\Shahenaz\Personal\Practice code\Test React\gulpfile.js (node:14988) ExperimentalWarning: The http2 module is an experimental API. [10:48:47] Starting 'html'... [10:48:47] Finished 'html' after 22 ms [10:48:47] Starting 'js'... [10:48:47] Finished 'js' after 34 ms [10:48:47] Starting 'css'... [10:48:47] Finished 'css' after 14 ms [10:48:47] Starting 'lint'... [10:48:47] Starting 'connect'... [10:48:48] Finished 'connect' after 59 ms [10:48:48] Starting 'open'... [10:48:48] Finished 'open' after 2.84 ms [10:48:48] Starting 'watch'... [10:48:48] Finished 'watch' after 20 ms (node:14988) DeprecationWarning: [eslint] The 'ecmaFeatures' config file property is deprecated, and has no effect. (found in C:\Shahenaz\Personal\Practice code\Test React\eslint.config.json) [10:48:48] Server started http://localhost:8081 [10:48:48] LiveReload started on port 35729 [10:48:48] Opening http://localhost:8081/ using the default OS app [10:48:48] Finished 'lint' after 870 ms

How to resolve this issue?

Thanks, Shahenaz

coryhouse commented 6 years ago

Hi @shahenaz24 - To follow along with the course, it's important to use the same versions I specified in the course. Once you're done, I show how to update the final demo to use the latest versions here: https://github.com/coryhouse/react-flux-building-applications/pull/1

shahenaz24 commented 6 years ago

Thanks CoryHouse for quick reply. I will work on versions mentioned in course and update the dependencies with the updated branch code. Let me know if you have any pending changes for update branch.