Module not found – importing React navbar class…but the file exists

It cannot find my navbar.js file for some reason, but its there!? Any help is appreciated
Just keeps showing –

Compiled with problems:X

ERROR in ./src/App.js 5:0-41

Module not found: Error: Can't resolve './components/navbar' in 'C:\Users\ekrus\OneDrive\Desktop\honeycomb\honeycomb\client\src'

The navbar.js file:

import React from 'React';
import ReactDOM from 'react-dom'

export default class Navbar extends React.Component {
     render() {
    return (
        <div>
            <ul className="nav">
                <li className="nav-item slam-left"><a href="#">Brand</a></li>
                <li className="nav-item"><a href="#">Home</a></li>
                <li className="nav-item"><a href="#">About</a></li>
                <li className="nav-item"><a className="contact" href="#">Contact</a></li>
            </ul>
        </div>
        
    );
}

}

My App.js file:

import './App.css';
import Navbar from './components/navbar';

function App() {
  return (
      <Navbar />
  );
}
export default App;

>Solution :

In your navbar.js you are exporting your component as a named export, and in your App.js you are trying to do a default import, which doesn’t exist.

change your navbar component to start with export default class Navbar…

You can read more about named and default exports here
and here

Edit: After looking at the directory structure again, seems like you have the path of the navbar file off. The Navbar is in components/navbar/navbar.

so you should change your import statement to

import Navbar from "./componenets/navbar/navbar";

Edit 2:
I also noticed that in App.js you imported react from React, and it needs to be react, with a lowercase R.
change it to:

import React from 'react';