React Can't resolve_ in _

Question

I'm trying to learn React, and I've come across an infuriating error. I have a Header component and Balance component, both in the same 'components' folder. Even when the content of the files is theoretically the same, Balance.js is giving me an error but Header.js compiles with no issues... If I remove all references to Balance.js then it runs perfectly.

Failed to compile.

./src/components/Balance.js
Module not found: Can't resolve 'C:\xampp\htdocs\xampp\Projects\expenseTracker\expense-tracker\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\xampp\htdocs\xampp\Projects\expenseTracker\expense-tracker'

Header.js

import React from 'react';

export const Header = (props) => {
  return (
    <h2>
      {props.title}
    </h2>
  );
}

Balance.js

import React from 'react';

export const Balance = (props) => {
  return (
    <h1>
      ${props.bal}
    </h1>
  );
}

App.js

import React from 'react';
import './App.css';
import { Header } from './components/Header';
import { Balance } from './components/Balance';

function App() {
  return (
    <div>
      <Header title={'Expense Tracker'}/>
      <div className="container">
        <Balance bal={'0.00'}/>
      </div>
    </div>
  )
}

export default App;

Answer 1

This should work fine and is syntactically correct.

Could it be possible you edited the Balance file and never saved it before running the project which would result in an error?

If not, are you using any libraries within the Balance file which may not have been installed as dependencies? I know you said theoretically the same but just querying if there are any possible libraries or components you may have removed from one and not the other.

Answer 2

You have nothing wrong with your code actually.

It seems you have a problem with babel .

Try installing/reinstalling npm install babel-loader .

Answer 3

Remove node_modules and package-lock.json files and run

 npm install