Uncaught TypeError: Cannot read properties of undefined (reading 'context') when using Recoil with Preact.
See original GitHub issueI’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>
);
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
useContext give error Cannot read property '...' of undefined
I think the issue here is that since the selectedTrack is loaded asynchronously, when it is accessed from the context, it is undefined...
Read more >Possible race condition leading to "TypeError: Cannot read ...
There seems to be a race condition related to useContext with Suspense and preact-ssr-prepass . In my application i use usePromise (from ...
Read more >uncaught typeerror: cannot read properties of ... - You.com
The "Uncaught TypeError: Cannot read properties of undefined (reading 'useState')" error is usually caused by attempting to access a state variable that hasn't ......
Read more >TypeError: Cannot read properties of null (reading 'useContext ...
TypeError : Cannot read properties of null (reading 'useContext') when using Materiel UI in react. ... The error is gone when i uninstall...
Read more >Context API with React Hooks. error "Cannot read property '' of ...
TypeError : Cannot read property 'data' of null export const Context = React.createContext(null); function GlobalContext(props) { const [user ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.Recoil seems to work correctly, this could be a configuration issue for vite, working example. Aliases according to our preset look like this