Getting "TypeError: Cannot read property 'filename' of undefined" when calling `npm start`

Question

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._compile (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);
  };
}

Solution 1

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.com/fgnass/node-dev/issues/130 brings some other mentioned by @rramakrishnaa bugs.

Solution 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

Comments

[nburk]

thanks! do you have an idea why opts might not have this property? do you know who is calling patch?

[rramakrishnaa]

In this particular case, it seems that the particular node module hasn't handled the exception. You will have to check what the module expected and what you provided in the arguments. Read the docs of the module carefully. The error is in the build process, so its highly probable that the erring code is in the gulpfile.js