I am following this quite lengthy but very informative post about setting up a web application using the following technology stack:

• es 6
• node + express
• handlebars
• react + react router
• webpack + babel

The sample code can be found here.

I have been following along and it went quite well, I did understand the most important concepts. However, I am getting an error when I am trying to run it (after I downloaded it using git clone) like so:

$ npm install
$ npm start

The generated output including the error is:

> [email protected] start /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> npm-run-all --parallel gulp server


> [email protected] server /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> node-dev app/babel-server.js


> [email protected] gulp /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> gulp

[19:10:39] Using gulpfile ~/Developer/node/templates/react-universal-web-apps-simple/gulpfile.js
[19:10:39] Starting 'build:scss'...
[19:10:39] Starting 'build:watch:app'...
TypeError: Cannot read property 'filename' of undefined
    at Object.obj.(anonymous function) [as runInThisContext] (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:25:55)
    at Object.<anonymous> (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/graceful-fs/fs.js:10:13)
    at Module._pile (module.js:425:26)
    at Module._extensions..js (module.js:432:10)
    at nodeDevHook (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:58:7)
    at require.extensions.(anonymous function) (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Object.nodeDevHook [as .js] (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:58:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
[19:10:39] Finished 'build:watch:app' after 12 ms
[19:10:39] Starting 'lint:app'...
[ERROR] 19:10:39 TypeError
[19:10:39] Starting 'server'...

Does anyone see what I am missing? I have no clue where even to start, the filenames in the error don't really tell me anything...

Update

I checked for the file where the error occurs (/node_modules/node-dev/lib/hook.js), here's the code that causes it:

/**
 * Patch the specified method to watch the file at the given argument
 * index.
 */
 function patch(obj, method, optionsArgIndex) {
  var orig = obj[method];
  if (!orig) return;
  obj[method] = function () {
    var opts = arguments[optionsArgIndex];
    var file = typeof opts == 'string' ? opts : opts.filename;
    if (file) callback(file);
    return orig.apply(this, arguments);
  };
}

I am following this quite lengthy but very informative post about setting up a web application using the following technology stack:

• es 6
• node + express
• handlebars
• react + react router
• webpack + babel

The sample code can be found here.

I have been following along and it went quite well, I did understand the most important concepts. However, I am getting an error when I am trying to run it (after I downloaded it using git clone) like so:

$ npm install
$ npm start

The generated output including the error is:

> [email protected] start /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> npm-run-all --parallel gulp server


> [email protected] server /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> node-dev app/babel-server.js


> [email protected] gulp /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> gulp

[19:10:39] Using gulpfile ~/Developer/node/templates/react-universal-web-apps-simple/gulpfile.js
[19:10:39] Starting 'build:scss'...
[19:10:39] Starting 'build:watch:app'...
TypeError: Cannot read property 'filename' of undefined
    at Object.obj.(anonymous function) [as runInThisContext] (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:25:55)
    at Object.<anonymous> (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/graceful-fs/fs.js:10:13)
    at Module._pile (module.js:425:26)
    at Module._extensions..js (module.js:432:10)
    at nodeDevHook (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:58:7)
    at require.extensions.(anonymous function) (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Object.nodeDevHook [as .js] (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:58:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
[19:10:39] Finished 'build:watch:app' after 12 ms
[19:10:39] Starting 'lint:app'...
[ERROR] 19:10:39 TypeError
[19:10:39] Starting 'server'...

Does anyone see what I am missing? I have no clue where even to start, the filenames in the error don't really tell me anything...

Update

I checked for the file where the error occurs (/node_modules/node-dev/lib/hook.js), here's the code that causes it:

/**
 * Patch the specified method to watch the file at the given argument
 * index.
 */
 function patch(obj, method, optionsArgIndex) {
  var orig = obj[method];
  if (!orig) return;
  obj[method] = function () {
    var opts = arguments[optionsArgIndex];
    var file = typeof opts == 'string' ? opts : opts.filename;
    if (file) callback(file);
    return orig.apply(this, arguments);
  };
}

• javascript
• node.js
• express
• reactjs
• webpack

2 Answers 2

You are getting that error because you are trying to access a property of a variable whose value is undefined. In your case, opts is getting the value undefined from var opts = arguments[optionsArgIndex]; this line and you cannot access a property of an undefined variable.

Wrap this up in try-catch or add checks before accessing nested properties of objects. It is generally considered a bad approach in JavaScript to access nested variables directly.

For example, instead of var a = b.c.d; you should use var a = (a && a.b && a.b.c) || <some default value>;

In the first case, if b or c is undefined, your app will crash, however, if b or c is undefined in the second case, a will be assigned the default value which you provided

You can solve this problem simply by explicitly force previous version of node-dev by doing this:

npm i [email protected] --save-dev

Fix#130 https://github./fgnass/node-dev/issues/130 brings some other mentioned by @rramakrishnaa bugs.