0

I have a typical React structure.

In the folder src I store index.js, in the folder src > components I store App.js, and in the folder src > components > navigation > components I store MainNavigation.js

For the past hour or so I'm trying to figure out the following error message:

Module not found: Error: Can't resolve './navigation/components/MainNavigation' in '/Users/raoul/Projects/pooper-scoopers/src/components'

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import { MainNavigation }  from "./navigation/components/MainNavigation";

export default function App() {
  return <div>This is App.js</div>;
}

Main.js

export default function MainNavigation() {
  return <div>This is the component MainNavigation.</div>;
}

The error is solved when I change Main.js to the following:

export function MainNavigation() {
  return <div>This is the component MainNavigation.</div>;
}

As you can see I removed default from the code to solve the problem. Only I have no idea why this solved the problem. Can you please explain?

Raoul Dundas
  • 406
  • 4
  • 11
  • 1
    you can clear your doubts here => https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Amila Senadheera Jan 27 '22 at 13:47
  • Thank you for looking into this. I will read the documentation to get a better understanding. – Raoul Dundas Jan 27 '22 at 13:50

0 Answers0