Exploring redux for state management has been a new journey for me. I am hoping it will help reduce API calls and increase speed, but I've hit a roadblock with an error that I can't seem to figure out. To troubleshoot, I created a simplified version and yet the issue persists.
This is my simplified index.js:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './globals/Redux/store';
const container = document.getElementById('root');
const root = createRoot(container);
const TestComponent = () => <div>Hello World!</div>;
root.render(
<Provider store={store}>
<TestComponent />
</Provider>
);
The store.js file (which seems to be functioning correctly as I'm able to print its content):
import { configureStore } from '@reduxjs/toolkit';
import transactionsReducer from './transactionsSlice';
export const store = configureStore({
reducer: {
transactions: transactionsReducer
},
});
The error message I'm struggling with reads as follows:
Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
You can view the full output here: https://i.stack.imgur.com/gl90t.png
I would greatly appreciate any assistance. As a computer science undergraduate working on my first major project, I think I may have made a simple mistake. So far, I've tried removing node modules and reinstalling using npm install, as well as ensuring compatibility between react/react-dom versions. Any insight you can provide is valuable. Thank you!
Edit line 65 in Provider.tsx: https://i.stack.imgur.com/KTQrB.png
Edit 2- After completely reinstalling node_modules & package.json and clearing cache, I encountered a new extensive error stack. I'm unsure if this signifies progress or regression within the error hierarchy, but I'm unable to resolve it at this point:
ERROR in ./src/App.js 1:40-126
Module not found: Error: You attempted to import /Users/joshbenson/Desktop/fw/frontend/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/Assets/svg/Calendar.js 1:40-126
Module not found: Error: You attempted to import /Users/joshbenson/Desktop/fw/frontend/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/Assets/svg/Clock.js 1:40-126
Module not found: Error: You attempted to import /Users/joshbenson/Desktop/fw/frontend/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/Assets/svg/Credit.js 1:40-126
Module not found: Error: You attempted to import /Users/joshbenson/Desktop/fw/frontend/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/Assets/svg/Debit.js 1:40-126
Module not found: Error: You attempted to import /Users/joshbenson/Desktop/fw/frontend/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Tree structure is as follows: https://i.stack.imgur.com/LinYw.png
Your guidance on what could be causing these errors would be highly appreciated. The issue seems to affect nearly every file in the project. Many thanks!