useContext hooks not working properly in electron-vite reactjs

[lequan81]

Describe the bug

I want to use useContext hooks in my app. It works well on Reactjs using yarn create vite my-react-app --template react command, but have some error warnings in electron-vite using react and react-router-dom package

Here is a working demo: https://bdoui0.csb.app/

my app tree looks like this:

📦 renderer
└─ src
   ├─ assets
   ├─ pages
   │  └─ Classes.jsx
   ├─ component
   │  ├─ ClassList.jsx
   │  └─ NavbarHeader.jsx
   └─ hooks
      └─ context.js

context.js file

import React from 'react'

export default React.createContext()

Classes.jsx file

import { useState, useRef, useEffect } from 'react'
import ClassContext from '../hooks/context'
import NavbarHeader from '../components/Navbar'
import ClassList from '../components/ClassList'

const Classes = () => {
  let [classes, setClasses] = useState([])
  let [query, setQuery] = useState('')

  return (
    <>
      <ClassContext.Provider
        value={{ query, setQuery, classes }}
      >
        <div>
          <div>
            <section>
               <NavbarHeader />
              <div>
                <div>
                  <div>
                    <ClassList />
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </ClassContext.Provider>
    </>
  )
}

export default Classes

NavbarHeader.jsx file

import { useContext } from 'react'
import ClassContext from '../hooks/context'

const NavbarHeader = ({ header }) => {
  let { query, setQuery } = useContext(ClassContext)

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('Enter key pressed')
    }
  }

  return (
    <div>
      <div>
        <div >
            {header}
            <div>
              <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder="Search"
                name="search"/>
              <button
                type="submit">
                    Search
              </button>
            </div>
        </div>
      </div>
    </div>
  )
}

export default NavbarHeader

ClassList.jsx file

import { useContext } from 'react'
import ClassContext from '../hooks/context'

const ClassList = () => {
  const { query, classes } = useContext(ClassContext)
  return (
    <>
      {classes?.length > 0 ? (
        <>
          {classes
            .filter((item) => {
              if (query === '') {
                return item
              } else if (item.className.includes(query)) {
                return item
              }
            })
            .map((data, index) => (
              <span
                key={index}
                className={data.className}
              />
            ))}
        </>
      ) : (
        <></>
      )}
    </>
  )
}

export default ClassList

error message in Developer Tools

Electron-Vite Version

1.0.21

Electron Version

22.3.4

Vite Version

4.2.1

Validations

• [X] Follow the Code of Conduct.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

Using react-router-dom's BrowserRouter? Electron does not handle history and works with the synchronized URL, so BrowserRouter does not work with Electron. Use HashRouter instead of BrowserRouter to sync URL with UI (windows.location.hash).

[lequan81]

Thank you for your advice, @alex8088. I have already changed BrowserRouter to HashRouter, but it seems the problem still exists. I have two components, one is List and another is NavbarHeader, but for some reason when I use useContext hooks in the List component, it works fine, but if I use useContext hooks for both the List and Navbar components, I get an error as I mentioned above.

[alex8088]

Is the problem solved?

[lequan81]

I'm sorry to reply to you this late. Nah, I'm now using props instead of useContext hooks as a workaround for my problems, and although kind of dirty, it works at least. If I still can not figure out what was wrong, I will update you with a demo of the error as soon as possible. ps: Due to my tight final exam schedule for the next 3 weeks, I might not be active for a couple of days :<