Uncaught ReferenceError: Cannot access 'SearchContext' before initialization?

Question

[northstaroffnet]

import React from 'react';
import styles from './Search.module.scss';
import { SearchContext } from '../../App';

class Search extends React.Component {
  static contextType = SearchContext;

  render() {
    const { searchValue, setSearchValue } = this.context;

    return (
      <div className={styles.root}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className={'icon icon-tabler icon-tabler-search ' + styles.icon}
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
          <path d="M21 21l-6 -6"></path>
        </svg>

        <input
          value={searchValue}
          onChange={(event) => setSearchValue(event.target.value)}
          className={styles.input}
          type="text"
          placeholder="Поиск пиццы..."
        />

        {searchValue && (
          <svg
            onClick={() => setSearchValue('')}
            className={styles.clearIcon}
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
          </svg>
        )}
      </div>
    );
  }
}

export default Search;

import React from 'react';
import { Routes, Route } from 'react-router-dom';

import './scss/app.scss';
import Header from './components/Header';

import Home from './pages/Home';
import Cart from './pages/Cart';
import NotFound from './pages/NotFound';

export const SearchContext = React.createContext('');

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchValue: '',
    };
  }

  componentDidUpdate() {
    console.log(this.state.searchValue);
  }

  render() {
    return (
      <div className="wrapper">
        <SearchContext.Provider
          value={{
            searchValue: this.state.searchValue,
            setSearchValue: (value) => {
              this.setState({ searchValue: value });
            },
          }}>
          <Header />
          <div className="content">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route index element={<Home searchValue={this.state.searchValue} />} />
              <Route path="/cart" element={<Cart />} />
              <Route path="*" element={<NotFound />} />
            </Routes>
          </div>
        </SearchContext.Provider>
      </div>
    );
  }
}

export default App;