So I am trying to implement a something to fetch data from the API, but whenever I add <Provider store={store}>
to my website, it causes the below error:
ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
RangeError: /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js: Maximum call stack size exceeded
at new TraceMap (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:166:20)
at /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:26
at Array.map (<anonymous>)
at build (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
at /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
at Array.map (<anonymous>)
at build (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
at /home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
at Array.map (<anonymous>)
at build (/home/netsu/Documents/Code/HTML-CSS-JS/Webpages/steve-studies/website/client/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
@ ./src/store.ts 3:0-50 5:14-28
@ ./src/index.tsx 7:0-28 12:11-16
The index.tsx is pretty simple:
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<>
<Provider store={store}>
<App />
</Provider>
</>,
document.getElementById('root')
);
The store as well:
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
const store = configureStore({
reducer: rootReducer,
});
if (process.env.NODE_ENV === 'development' && module.hot) {
module.hot.accept('./reducers', () => {
store.replaceReducer(rootReducer);
});
}
export default store;
And reducers:
import { combineReducers } from 'redux';
import coursesSlice from './views/courses/slice';
const rootReducer = combineReducers({
courses: coursesSlice,
});
export default rootReducer;
At first I thought the error might have originated from the slices.ts file, but not so sure now:
import { createSlice } from '@reduxjs/toolkit';
import { getCourses } from '../../api/courses';
const initialState = {
loadingStatus: 'NOT_STARTED',
courses: [],
error: ""
};
const coursesSlice = createSlice({
name: 'courses',
initialState,
reducers: {
getCoursesStarted(state) {
state.loadingStatus = 'PENDING';
},
getCoursesSuccess(state, action) {
const courses = action.payload;
state.courses = courses;
state.loadingStatus = 'COMPLETE';
},
getCoursesFailed(state) {
state.loadingStatus = 'COMPLETE';
state.error = 'Could not get courses';
},
},
});
export const {
getCoursesStarted,
getCoursesSuccess,
getCoursesFailed,
} = coursesSlice.actions;
export default coursesSlice.reducer;
export const fetchCourses = () => async (dispatch: any) => {
try {
dispatch(getCoursesStarted());
const courses = await getCourses();
dispatch(getCoursesSuccess(courses));
} catch (err: any) {
dispatch(getCoursesFailed());
}
};
And the App.tsx is this, however, even if I remove everything except for the return, it still throws the error, so it's not from this:
import React, { useEffect } from 'react';
import { fetchCourses } from './views/courses/slice';
import { RootStateOrAny, useDispatch, useSelector } from 'react-redux';
const App: React.FC = () => {
const dispatch = useDispatch();
const courses = useSelector<RootStateOrAny, {
loadingStatus: string,
courses: any,
error: string
}>((state) => state);
useEffect(() => {
if(courses.loadingStatus === "NOT_STARTED"){
dispatch(fetchCourses)
}
}, [dispatch, courses.loadingStatus])
return (
<div>
<h1>Users</h1>
</div>
)
}
export default App;
I've searched and searched, but could not find the answer... Why is this happening, I know it's because of a recursive functions, from what I've read, but I can't see why it is being caused...
- OS: Arch Linux
- TypeScript: 4.5.5
- Node.js: 16.13.2
CodePudding user response:
Update: The problem has been fixed in the just released 7.17.4. Your build should go through without issues.
This seems to be a problem with a @babel/core update (7.17.3) today. Pinning @babel/core to 7.17.2 seems to have solved the issue for some