search

reduxjs / redux-toolkit

The official, opinionated, batteries-included toolset for efficient Redux development
https://redux-toolkit.js.org
MIT License
10.68k stars 1.16k forks source link

RangeError: Maximum call stack size exceeded at Array.map #2037

Closed michaelhtran120 closed 2 years ago

michaelhtran120 commented 2 years ago

Hello,

New to Redux toolkit here. The following error generated in my terminal was encountered when initializing a project with "npx create-react-app --template redux" or when I followed the quick start guide.

Seems anyway I approach using Redux toolkit right now, I am running into the following error.

Failed to compile.

RangeError: /Users/michaeltran/side-projects/testapp/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js: Maximum call stack size exceeded
    at Array.map (<anonymous>)
    at Array.map (<anonymous>)
    at Array.map (<anonymous>)
assets by path static/ 1.65 MiB
  asset static/js/bundle.js 1.65 MiB [emitted] (name: main) 1 related asset
  asset static/media/logo.b2e5a01e505f739f1484b881277d5186.svg 1.1 KiB [emitted] (auxiliary name: main)
asset index.html 1.68 KiB [emitted]
asset asset-manifest.json 278 bytes [emitted]
cached modules 1.49 MiB [cached] 151 modules
runtime modules 28.1 KiB 13 modules
./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js 39 bytes [built] [1 error]

ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
RangeError: /Users/michaeltran/side-projects/testapp/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js: Maximum call stack size exceeded
    at Object.decode (/Users/michaeltran/side-projects/testapp/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js:36:20)
    at new TraceMap (/Users/michaeltran/side-projects/testapp/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:187:48)
    at /Users/michaeltran/side-projects/testapp/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:26
    at Array.map (<anonymous>)
    at build (/Users/michaeltran/side-projects/testapp/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/michaeltran/side-projects/testapp/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/Users/michaeltran/side-projects/testapp/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /Users/michaeltran/side-projects/testapp/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
 @ ./src/app/store.js 3:0-50 5:21-35
 @ ./src/index.js 8:0-36 14:11-16

webpack 5.69.0 compiled with 1 error in 7247 ms
phryneas commented 2 years ago

Can you provide a repository with that error?

michaelhtran120 commented 2 years ago

https://github.com/michaelhtran120/react-app-redux-toolkit

I made no changes to the files after running "npx create-react-app _appname_ --template redux"

Ponevejski commented 2 years ago

Have the same issues. As @michaelhtran120 mentioned, made no changes to the files after running "npx create-react-app appname --template redux"

ThinhNguyenHoang commented 2 years ago

I also encounter the same issues here.

My package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@craco/craco": "^6.4.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@reduxjs/toolkit": "^1.7.2",
    "@testing-library/jest-dom": "^5.14.s1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^17.0.10",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@types/react-redux": "^7.1.22",
    "antd": "^4.18.0",
    "axios": "^0.24.0",
    "babel-plugin-import": "^1.13.3",
    "craco-less": "^2.0.0",
    "customize-cra": "^1.0.0-alpha.0",
    "dotenv": "^10.0.0",
    "formik": "^2.2.9",
    "i18next": "^21.6.4",
    "i18next-browser-languagedetector": "^6.1.2",
    "less": "^4.1.2",
    "less-loader": "5.0.0",
    "lodash": "^4.17.21",
    "luxon": "^2.3.0",
    "moment": "^2.29.1",
    "normalizr": "^3.6.1",
    "query-string": "^7.1.0",
    "react": "^17.0.2",
    "react-dnd": "^14.0.5",
    "react-dnd-html5-backend": "^14.1.0",
    "react-dom": "^17.0.2",
    "react-highlight-words": "^0.17.0",
    "react-i18next": "^11.15.2",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-toastify": "^8.1.0",
    "recoil": "^0.5.2",
    "sass": "^1.47.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "start-server": "json-server --watch ./fake_json_server/db.json --port 3001 --delay 2000",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "packageManager": "yarn@3.1.1",
  "devDependencies": {
    "@types/lodash": "^4.14.178",
    "@types/luxon": "^2.0.9",
    "file-loader": "^6.2.0",
    "uuid": "^8.3.2"
  }
}

and the error when starting the project: 

ERROR in ./node_modules/@reduxjs/toolkit/dist/query/react/rtk-query-react.esm.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
RangeError: /home/consigliere/WebstormProjects/lms/frontend/node_modules/@reduxjs/toolkit/dist/query/react/rtk-query-react.esm.js: Maximum call stack size exceeded
    at new TraceMap (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:166:20)
    at /home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:26
    at Array.map (<anonymous>)
    at build (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
 @ ./src/redux/features/CentralAPI.ts 3:0-73 16:24-33 18:13-27
 @ ./src/redux/store/store.ts 5:0-50 10:41-60
 @ ./src/index.tsx 20:0-44 49:11-16

ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
RangeError: /home/consigliere/WebstormProjects/lms/frontend/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js: Maximum call stack size exceeded
    at Array.map (<anonymous>)
    at new TraceMap (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:182:48)
    at /home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:26
    at Array.map (<anonymous>)
    at build (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
    at build (/home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:206:42)
    at /home/consigliere/WebstormProjects/lms/frontend/node_modules/@ampproject/remapping/dist/remapping.umd.js:230:20
    at Array.map (<anonymous>)
 @ ./src/redux/store/store.ts 3:0-50 7:21-35
 @ ./src/index.tsx 20:0-44 49:11-16

webpack 5.69.0 compiled with 2 errors and 1 warning in 38213 ms
ERROR in src/index.tsx:18:13
TS2345: Argument of type 'IconPack' is not assignable to parameter of type 'IconDefinitionOrPack'.
  Type 'IconPack' is missing the following properties from type 'IconDefinition': icon, prefix, iconName
    16 | import 'react-quill/dist/quill.bubble.css'
    17 |
  > 18 | library.add(fab, faCheckSquare, faCoffee,faSchool, faCommentSlash)
       |             ^^^
    19 | console.log("PROCESS ENV IS: ",process.env.REACT_APP_BASE_URL);
    20 |
    21 |
mcooper7649 commented 2 years ago

I am having the same issue. Also installed with "npx create-react-app appname --template redux".

kaliahinartem commented 2 years ago

I started having the same error today, though I am not using neither redux toolkit nor create-react-app

phryneas commented 2 years ago

This seems due to a dependency of a dependency that updated today. I'm still trying to track it down.

These are the candidates I have identified to be updated today:

2022-02-15T01:11:27.236Z express@4.17.2
2022-02-15T03:17:32.906Z raw-body@2.4.2
2022-02-15T05:46:52.865Z char-regex@1.0.2
2022-02-15T05:46:52.865Z char-regex@2.0.1
2022-02-15T07:02:31.875Z electron-to-chromium@1.4.71
2022-02-15T11:13:23.657Z sass-loader@12.6.0
2022-02-15T11:24:51.801Z stringify-object@3.3.0
2022-02-15T12:34:15.579Z webpack@5.69.0
2022-02-15T13:17:45.001Z eslint-plugin-jest@25.7.0
2022-02-15T15:44:21.024Z @babel/plugin-proposal-object-rest-spread@7.17.3
2022-02-15T15:44:21.223Z @babel/parser@7.17.3
2022-02-15T15:44:21.340Z @babel/generator@7.17.3
2022-02-15T15:44:23.739Z @babel/plugin-transform-react-jsx@7.17.3
2022-02-15T15:44:24.949Z @babel/plugin-transform-destructuring@7.17.3
2022-02-15T15:44:29.593Z @babel/traverse@7.17.3
2022-02-15T15:44:32.891Z @babel/core@7.17.3
2022-02-15T16:50:05.010Z minimatch@3.0.4
2022-02-15T16:50:05.010Z minimatch@3.1.1
2022-02-15T17:44:41.574Z tslib@1.14.1
2022-02-15T17:44:41.574Z tslib@2.3.1
2022-02-15T17:44:41.574Z tslib@2.3.1
2022-02-15T17:44:41.574Z tslib@2.3.1
2022-02-15T17:44:41.574Z tslib@2.3.1
2022-02-15T17:44:41.574Z tslib@2.3.1
2022-02-15T17:44:41.574Z tslib@2.3.1
2022-02-15T18:46:02.235Z tailwindcss@3.0.22
2022-02-15T19:01:36.756Z @csstools/postcss-progressive-custom-properties@1.1.0
2022-02-15T19:03:37.239Z postcss-lab-function@4.1.0
2022-02-15T19:05:20.030Z postcss-double-position-gradients@3.0.5
phryneas commented 2 years ago

@kaliahinartem maybe you can cross-check that list with packages installed on your system?

kaliahinartem commented 2 years ago

@phryneas sure I also have sass-loader, webpack, all @babels (except traverse) and tslib My error was coming from babel-loader, but I'm not sure, probably it was just because my code is being compiled by babel :) Hope this helps

phryneas commented 2 years ago

Pinning "@babel/core" down to "7.17.2" seems to solve the problem for me. Time to open a ticket I guess?

Stephankarl commented 2 years ago

Pinning "@babel/core" down to "7.17.2" seems to solve the problem for me. Time to open a ticket I guess?

This worked for me too.

JLHwung commented 2 years ago

The upstream Babel issue has been fixed in 7.17.4.

richwblake commented 2 years ago

Because of the above, running npm update @babel/core in react root folder fixes the issue.

ThinhNguyenHoang commented 2 years ago

Having tried both version of @babel/core (@7.12.2 and @7.12.4), the issues still persists for me. 

<--- Last few GCs --->

[13263:0x55e73bfbebb0]    34868 ms: Mark-sweep 2038.9 (2085.5) -> 2038.2 (2087.3) MB, 1491.5 / 0.1 ms  (average mu = 0.170, current mu = 0.018) allocation failure scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x55e738a966b1 node::Abort() [/usr/bin/node]
 2: 0x55e73899cceb node::FatalError(char const*, char const*) [/usr/bin/node]
 3: 0x55e738c76782 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 4: 0x55e738c769e8 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 5: 0x55e738e1c2c6  [/usr/bin/node]
 6: 0x55e738e2dbf2 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/bin/node]
 7: 0x55e738e2feca v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/bin/node]
 8: 0x55e738e2ff57 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/bin/node]
 9: 0x55e738df3a5d v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/bin/node]
10: 0x55e739144429 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/bin/node]
11: 0x55e7394f7bf9  [/usr/bin/node]
error Command failed with exit code 1.

PS: Never mind the error is due to another issues, downgrading babel does fix the problem for me

markerikson commented 2 years ago

Closing as this was not actually an RTK issue and appears to be resolved on the Babel side.