Uncaught TypeError: Cannot read properties of undefined (reading 'context') when using Recoil with Preact.

I’m using Recoil for React for state management. I have aliased react & react-dom to preact/compat in vite.config.ts. But still I’m getting this error. Isn’t there any good state management lib for Preact X?

ERROR I’m getting.

Uncaught TypeError: Cannot read properties of undefined (reading 'context')
    at F (compat.module.67ec5013.js:3)
    at useStoreRef (recoil.10ccdcda.js:3598)
    at useRecoilValue (recoil.10ccdcda.js:4880)
    at useRecoilState (recoil.10ccdcda.js:4932)
    at recoilState.ts:13
F @ compat.module.67ec5013.js:3
useStoreRef @ recoil.10ccdcda.js:3598
useRecoilValue @ recoil.10ccdcda.js:4880
useRecoilState @ recoil.10ccdcda.js:4932
(anonymous) @ recoilState.ts:13

vite.config.ts

export default defineConfig(
  {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
  alias:
    [
       {find: 'react', replacement: 'preact/compat'},
       {find: 'react-dom', replacement: 'preact/compat'},
    ],
  plugins: [
    preactRefresh()
  ],
});

main.tsx

import { render, h, hydrate } from 'preact';
import { App } from './app';
import './index.css';
import { Provider } from 'react-redux';
import { store } from './redux/store';

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')!
);

app.tsx

import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import AddTasks from './Components/Tasks/AddTasks';
import CompletedTask from './Components/Tasks/CompletedTask';
import ActiveTask from './Components/Tasks/ActiveTask';
import * as dotenv from 'dotenv';
import Footer from './Components/Footer';
import InitializingServiceWorker from './Components/ServiceWorker';
import { ActiveTasks, CompletedTasks } from './recoil/recoilState';
import { RecoilRoot } from 'recoil';

export const App = () => {  

  useEffect(() => {
    localStorage.setItem('ActiveTasks', JSON.stringify(ActiveTasks));
  }, [ActiveTasks])

  useEffect(() => {
    localStorage.setItem('CompletedTasks', JSON.stringify(CompletedTasks));
  }, [CompletedTasks])

  function returnLineBreak(): any {
    if (CompletedTasks.length > 0 && ActiveTasks.length > 0) {
      return (
        <hr />
      );
    }
  }

  console.log("Active Tasks: " + ActiveTasks.length);
  console.log("Completed Tasks: " + CompletedTasks.length);

  return (
    <div className="container mx-auto lg:w-1/2">
      <h1 className="text-5xl">Todo App</h1>
      <RecoilRoot>
        <AddTasks />
        <ActiveTask />
        {returnLineBreak()}
        <CompletedTask />
      </RecoilRoot>
      <Footer />
    </div>
  );
}

[rschristian]

At the very least it looks like you’re setting your aliases incorrectly, though I’m not sure if this is your problem or not without a reproduction.

Aliases are to be set using resolve.alias, see Vite’s docs or Preact’s Vite preset as an example.

[JoviDeCroock]

Recoil seems to work correctly, this could be a configuration issue for vite, working example. Aliases according to our preset look like this