Has anyone encountered such an error?

RichPerson, код дай

жди, 

HEADER.TSX

import logoImg from './../../img/logo/header_logo.svg'
import './header.css'

const Header = () => {
return (
<header>
<div className="container">
<div className="header_row">
<div className="header_logo">
<a href="#!">
<img src={logoImg} alt="logo" />
</a>
</div>
<nav className="header_nav">
<ul>
<li><a href="#!">F.A.Q</a></li>
<li><a href="#!">Кейсы</a></li>
<li><a href="#!">Поддержка</a></li>
</ul>
</nav>
<div className="header_button">
<button className="sign_in" onClick={() => console.log('Заглушка (Войти)')}>Войти</button>
<button className="sign_up" onClick={() => console.log('Заглушка (Регистрация)')}>Регистрация</button>
</div>
</div>
</div>
</header>
)
}

export default Header;

JS

HEADER.TSX



import logoImg from './../../img/logo/header_logo.svg'

import './header.css'



const Header = () => {

    return (

        <header>

            <div className="container">

                <div className="header_row">

                    <div className="header_logo">

                        <a href="#!">

                            <img src={logoImg} alt="logo" />

                        </a>

                    </div>

                    <nav className="header_nav">

                        <ul>

                            <li><a href="#!">F.A.Q</a></li>

                            <li><a href="#!">Кейсы</a></li>

                            <li><a href="#!">Поддержка</a></li>

                        </ul>

                    </nav>

                    <div className="header_button">

                        <button className="sign_in" onClick={() => console.log('Заглушка (Войти)')}>Войти</button>

                        <button className="sign_up" onClick={() => console.log('Заглушка (Регистрация)')}>Регистрация</button>

                    </div>

                </div>

            </div>

        </header>

    )

}



export default Header;

APP.TSX

import { BrowserRouter } from 'react-router-dom';
import AppRouter from './components/AppRouter';
import './styles/reset.css'
import './styles/common.css'
import Header from './components/header/Header';

const App = () => {
return (
<BrowserRouter>
<Header />
<AppRouter />
</BrowserRouter>
);
}

export default App;

JS

APP.TSX



import { BrowserRouter } from 'react-router-dom';

import AppRouter from './components/AppRouter';

import './styles/reset.css'

import './styles/common.css'

import Header from './components/header/Header';



const App = () => {

  return (

    <BrowserRouter>

      <Header />

      <AppRouter />

    </BrowserRouter>

  );

}



export default App;

index.tsx

import React, { createContext } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import UserStore from './store/UserStore';
import { IContext } from './interface';

export const Context = createContext<IContext | null>(null)

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
)

root.render(
<Context.Provider value={{
user: new UserStore()
}}>
<App />
</Context.Provider>
);

JS

index.tsx



import React, { createContext } from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import UserStore from './store/UserStore';

import { IContext } from './interface';



export const Context = createContext<IContext | null>(null)



const root = ReactDOM.createRoot(

  document.getElementById('root') as HTMLElement

)



root.render(

  <Context.Provider value={{

    user: new UserStore()

  }}>

    <App />

  </Context.Provider>

);