1

Compiled with problems:X

ERROR in ./src/App.js

export 'NavBar' (imported as 'NavBar') was not found in './NavBar' (possible exports: default) That's My NavBar Js I Have Exported Navbar Still I Am Getting This Error :)

import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => (
    <nav>
        <ul>
            <li>
                <Link to="/">Home</Link>
            </li>
            <li>
                <Link to="/about">About</Link>
            </li>
            <li>
                <Link to="/articles-list">Articles</Link>
            </li>
        </ul>
    </nav>
);

export default NavBar;

And This Is App.js In Which I Have Exported App But It Is Still Showing Error

import  React , { Component } from 'react';
import { BrowserRouter as Routes, Route, Switch,} from 'react-router-dom';
import { HomePage } from './pages/HomePage';
import { AboutPage } from './pages/AboutPage';
import { ArticlesListPage } from './pages/ArticlesListPage';
import { ArticlePage } from './pages/ArticlePage';
import { NotFoundPage } from './pages/NotFoundPage';
import { NavBar } from './NavBar';
import './App.css';

class App extends Component {
  render() {
    return (
      <Routes>
        <div className="App">
          <NavBar />
            <Switch>
              <Route path="/" component={< HomePage />} exact />
              <Route path="/about" component={< AboutPage /> } />
              <Route path="/articles-list" component={< ArticlesListPage />} />
              <Route path="/article/:name" component={< ArticlePage />} />
              <Route component={< NotFoundPage />} />
            </Switch>
          </div>
      </Routes>
    );
  }
}

export default App;
yash lohade
  • 65
  • 3
  • 8

1 Answers1

6

This may sound silly, but for me when exporting components with export default NavBar for importing i have to put it as

import NavBar from "./NavBar"

instead of

import { NavBar } from "./NavBar

maybe you could try this

StarnightFox
  • 204
  • 1
  • 6
  • This is an often-repeated duplicate question covered by [this previous question](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import). – T.J. Crowder Feb 23 '22 at 15:07