Understanding React Error Output

Question

First, can I stress that this is a question about the process of debugging and not a specific error. As a React/Redux newbie from time-to-time I get a React project that will not 'compile' with a typical error being something like this:

{ Error: Cannot find module 'redux' from 'C:\Users\abcde\Documents\ReactTest\node_modules\react-redux\lib\utils'
    at C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
    at process (C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
    at ondir (C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
    at load (C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
    at onex (C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
    at C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [Object],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }

This does not seem to give any pointers as to where the error is, merely what it is. What would be the correct method to determine where the error lies?

Ian Emnace · Accepted Answer · 2016-12-20 13:06:12Z

1

I noticed you want to emphasize the process of debugging, but the other answers do not touch on that too much.

I bolded the TL;DR portions.

What you have to know is that you're running on Node.js first and foremost. When you say "React/Redux project", you're actually talking about a Node.js project that happens to use the React and Redux libraries.

As such, if errors pop up when you "compile" your project (you're likely running npm start and running it through webpack, since you're on React), your first instinct should be, "there's something wrong with Node..."

So when an error says "...cannot find module...", it's likely looking for a Node module (which you install using npm install, hence the other answers that people showed you).

If any other error comes up, think of it as a Node error first and foremost, unless it explicitly says React or Redux or whatnot. If you Google the error and say that it's from Node, you'll likely get more relevant results.

Additionally, your error actually tells you where the error is! This part:

from 'C:\Users\abcde\Documents\ReactTest\node_modules\react-redux\lib\utils' at C:\Users\abcde\Documents\ReactTest\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17 at FSReqWrap.oncomplete (fs.js:123:15)

is called a stack trace. It shows you where your program was when the error happened. Note that it displays a chain of file names (starting with C:\...), as well as a row number and column number (fs.js:123:15). That actually already specifies where your error happened, down to the exact cursor position!

The reason why the stack trace is a chain of files instead of a single file is to give context: not only do you know which file and which cursor position your error happened in, you also know how the class/function/module/etc was called (maybe you missed a crucial argument in some other file).

Finally, recognizing these errors just takes experience. You might be having a hard time understanding what the error message is trying to say, but once you run into hundreds of them, you'll soon figure out that "cannot find module" usually means you have to npm install something.

answered Dec 20, 2016 at 13:06

Ian Emnace

1,09811 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amay Over a year ago

Thank you. It was indeed the howto that I was interested in. Interesting that both you and squiroid point to fs.js as being the file with the error. However this is not (as far as I am aware) one of my files. It does appear though that I am going to have to learn more about Node.js as well as React/Redux.

amay Over a year ago

As others pointed out it was indeed missing redux which is odd because the package.json came from a working project (with redux) and I had alreaded executed npm install.

Ian Emnace Over a year ago

If you check your stack trace, you'll see the error comes from inside your node_modules folder. fs.js may not be one of your files, but it might be part of a module you npm install'd. As for the missing redux, it was likely a peer dependency, which is not automatically installed but is required by one of your dependencies.

squiroid · Accepted Answer · 2016-12-20 12:13:45Z

1

The error simply signifies that you are trying to load redux in fs.js file but it not found. Fs.js file requires the redux but it is not present in your modules.

Can you try

npm install redux --save-dev

And then try. It should work then.

answered Dec 20, 2016 at 12:13

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Comments

Facundo La Rocca · Accepted Answer · 2016-12-20 12:31:29Z

0

Try to run this command:

npm install redux

Optionally, you can add "--save" parameter save dependency into package.json, like this:

npm install redux --save

Usually, when you download a project, the first step you need is to run "npm install", this command will install all dependencies specified in the package.json.

answered Dec 20, 2016 at 12:31

Facundo La Rocca

3,8862 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

Understanding React Error Output

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related