Debugging Create-React-App
Tags: debugging, node, npm, errors
Published: 2018-12-30 16:36:27

---
title: Debugging Create-React-App
published: true
tags: debugging, node, npm, error-handling,
canonical_url: https://www.stephencharlesweiss.com/2018/10/23/debugging-create-react-app/
---

In an effort to learn React, I pulled up [React’s introductory tutorial](https://reactjs.org/tutorial/tutorial.html).

Almost immediately I hit turbulence.  
 ![](https://i2.wp.com/media.giphy.com/media/12LSDuudJOUDGU/giphy.gif?resize=350%2C196&ssl=1)

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](https://reactjs.org/docs/create-a-new-react-app.html) 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:

{% gist https://gist.github.com/stephencweiss/62c8433e9e4d86df9df3c85fca629785 %}

My favorite part?

> P.S. We know this message is long but please read the steps above ![🙂](https://s.w.org/images/core/emoji/11/72x72/1f642.png) 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.

{% gist https://gist.github.com/stephencweiss/fc02b6f919e8d68bfdf2ea90b59bedff %}

Uninstalling node packages is not something I do every day, so I found this [StackOverflow discussion](https://stackoverflow.com/questions/13066532/how-to-uninstall-npm-modules-in-node-js/13066677) 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](https://stackoverflow.com/questions/47763783/cant-uninstall-global-npm-packages-after-installing-nvm) 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).

{% gist https://gist.github.com/stephencweiss/e00ed7e509d1517b39eb8ae7f5ad4a36 %}

# 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!

{% gist https://gist.github.com/stephencweiss/f32e14d7e5df86bae312d8a7e04a9b55 %}

![](https://i0.wp.com/www.stephencharlesweiss.com/wp-content/uploads/2018/10/react-success.png?resize=277%2C300&ssl=1)<figcaption>What success looks like!</figcaption>

Time to celebrate!

[Surprise GIF](https://tenor.com/view/confetti-happybirthday-surprise-celebrate-sparkle-gif-4717898) from [Confetti GIFs](https://tenor.com/search/confetti-gifs)

<script type="text/javascript" async src="https://tenor.com/embed.js"></script>