DEV Community

Stephen Charles Weiss
Stephen Charles Weiss

Posted on • Originally published at stephencharlesweiss.com on

Debugging Create-React-App

In an effort to learn React, I pulled up React’s introductory tutorial.

Almost immediately I hit turbulence.

I was in the setup of the tutorial when I got my first error message in response to executing the npm start command.

Creating a React App

Creating a brand new React app is supposed to be easy. The React team has step-by-step instructions and a tool chain that’s supposed to make this painless.

Apparently, I’m a glutton for pain, because I didn’t get a success message. Instead, I received this lovely novel-length error message:

My favorite part?

P.S. We know this message is long but please read the steps above 🙂 We hope you find them helpful!

It’s simple, but this sort of human touch absolutely makes a difference. On to the debugging!

For brevity’s sake, I will skip over steps 1-5 as they were not my actual problem.

Issue 1: Babel-Loader was globally installed

The first place where I actually seemed to have an issue was with step 6. Babel-loader was installed globally.

Uninstalling node packages is not something I do every day, so I found this StackOverflow discussion on the topic helpful.

Returning to my bash terminal, I entered $ npm -g uninstall babel-loader —save and received back up to date in .04s.

Success! Almost… babel-loader was still there in my global node_modules!

(I used $ npm -g ls to see all globally installed modules.)

Issue 2: Uninstall didn’t error, but also didn’t remove the module

It appears that only node packages that are at a depth of 0 can be uninstalled using the $ npm -g uninstall <module_name> —save command.

Lucky me – babel-loader wasn’t at that depth.

Again, returning to Stack Overflow for guidance, I found this discussion helpful.

The list of things that you can npm uninstall -g is available at npm ls -g –depth=0

To see which modules are available for uninstall, I used the command: $ nvm use system && npm ls -g --depth=0. The first half of the command was to see if babel-loader was pre-installed with my version of node (it wasn’t).

Solution: Manually remove the directories

Since npm uninstall didn’t have access to babel-loader (or user error prevented it from removing it), I decided to attack the problem head-on.

I removed the babel-loader directory from my User/Stephen/node_module directory ($ rm -rf babel-loader).

When I ran npm start again I was greeted by success!

What success looks like!

Time to celebrate!

Surprise GIF from Confetti GIFs

Top comments (0)