'Module not found' babel error after integrating axios

Question

Hi I have the same issue as this one ('Module not found' babel error after installing axios), I tried all the suggested solutions but the error still persists:

Failed to compile ./src/apis/youtube.js Module not found: Can't resolve '/Users/Prodigy/code/PierceF/udemy/videos/node_modules/react-scripts/node_modules/babel-loader/lib/index.js' in '/Users/Prodigy/code/PierceF/udemy/videos'

code in my youtube.js:

import axios from 'axios';

const KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXX'

export default axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3',
  params: {
    part: 'snippet',
    maxResults: 5,
    key: KEY
  }
});

the app runs when I delete this entire code in youtube.js though...

Answer 1

I'm going to list the entire flow and every little bit of gory detail for the benefit of people who have just started on their React journey:

1. Remove package-lock.json (rm package-lock.json)
2. yarn add axios
3. Read messages to make sure axios and its dependencies were added
4. Change into your node_modules directory (cd node_modules) then list to make sure axios and dependencies were installed (ls)
5. Check your App.js to make sure your import has the correct path (whether you really should have a '../axios' or just 'axios')
6. Stop the old development server (Ctrl + c)
7. Restart the development server (yarn start)
8. Go to the browser tab that is running localhost:3000
9. (If necessary) refresh the page (For Chrome, it's the upper left clockwise arrow to the left of where you enter the URL)