Error message "Internal error: TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null."

I am facing this error

Internal error: TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

which is followed by a long list of lines from a specific node_modules file that all look like this :

\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50095

with the exception of the first two lines from the list :

at useResolvedPath (./node_modules/react-router/dist/index.js:361:5)

at NavLinkWithRef (./node_modules/react-router-dom/dist/index.js:903:75)

Perhaps it's worth mentioning that I am currently trying to migrate my React app to Next.js and this error appeared after I did all the steps necessary in that direction.

I'm guessing it might have something to do with my navbar(which was working fine before next.js) so here is the code for it too just in case :

'use client';

import React, { useState, useEffect } from 'react';
import {
    Nav,
    NavLink,
    Bars,
    CloseIcon,
    IconWrapper,
    NavMenu,
} from './navbarElements';
import Image from 'next/image';

const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [isMobile, setIsMobile] = useState(false); // Initialize as false

    const toggleMenu = () => {
        setIsOpen(!isOpen);
    }

    const closeMenu = () => {
        setIsOpen(false);
    }

    useEffect(() => {
        const handleResize = () => {
            const isCurrentlyMobile = typeof window !== 'undefined' && window.innerWidth < 769;
            if (!isCurrentlyMobile) {
                setIsOpen(false);
            }
            setIsMobile(isCurrentlyMobile);
        };

        // Initial check
        handleResize();

        // Add resize event listener
        window.addEventListener('resize', handleResize);

        // Clean up the listener on component unmount
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return (
        <Nav>
            <NavLink to="/">
                <Image src="../public/logo.png" alt="" className="navbar-logo" />
            </NavLink>
            
            <IconWrapper onClick={toggleMenu}>
                <Bars isOpen={isOpen} />
                <CloseIcon isOpen={isOpen} />
            </IconWrapper>
            <NavMenu className={isOpen ? 'active' : ''} isMobile={isMobile}>
                <NavLink to="/produse" activeStyle onClick={closeMenu}>
                    Produse
                </NavLink>
                <NavLink to="/aboutus" activeStyle onClick={closeMenu}>
                    Despre noi
                </NavLink>
                <NavLink to="/portofolio" activeStyle onClick={closeMenu}>
                    Portofoliu
                </NavLink>
                <NavLink to="/contact" activeStyle onClick={closeMenu}>
                    Contact
                </NavLink>
            </NavMenu>
        </Nav>
    );
};

export default Navbar;

And here is the App.js content :

import React from "react";
import '../App.css';
import Navbar from './navbar';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';
import Home from "./pages/home";
import Produse from "./pages/produse"
import About from "./pages/aboutus";
import Contact from "./pages/contact";
import Portofolio from "./pages/portofolio";
import ScrollToTopButton from "./scrollToTop";
import Footer from "./footer";

function App() {
  return (
    <Router>
            <Routes>
            <Navbar />
                <Route path="/" element={<Home />} />
                <Route path="/produse" element={<Produse />} />
                <Route path="/aboutus" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="/portofolio" element={<Portofolio />} />
            </Routes>
        <ScrollToTopButton />
        <Footer />
    </Router>
  );
 
}

export default App;

Any ideas?

I also tried npm update and deleting node_modules and package-lock.json.

It is look like you are using react-router-dom on NextJS, where nextjs is built for server side routing. If you are using app based router in NextJS, routing will be as follows (as per your app.js content).

app/
├── contact/
│   ├── page.js
├── portfolio/
│   ├── page.js
├── produse/
│   ├── page.js
├── page.js

It is a vast topic when you switch from react routing to next routing. Please find official documentation link for more details