Redux Provider causes Maximum call stack size exceeded

Question

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

Answer 1

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