Insufficient heap size error on building project with Designer

Insufficient heap size error on building project with Designer

Posted by: datta on 9 October 2023, 4:16 pm EST

• 

  datta

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 4:16 pm EST

  Hi I am not able to build a simple react project with spreadJS designer and getting heap size error when I run “npm run build”. Problem can be replicated with attached files.

  Environment details:

  Spreadjs:16.1.0
  
  node:18.17.1
  
  React:18.2.0

  Getting below error on running “npm run build”

  [code]PS C:\hello1\spreadjs> npm run build

  spreadjs-re@0.1.0 build
  
  react-scripts build

  Creating an optimized production build…

  <— Last few GCs —>

  [9772:00000193FAE55830] 166132 ms: Mark-sweep (reduce) 2045.5 (2079.7) → 2044.8 (2080.0) MB, 3291.1 / 0.0 ms (average mu = 0.142, current mu = 0.002) allocation failure; scavenge might not succeed
  
  [9772:00000193FAE55830] 169285 ms: Mark-sweep (reduce) 2045.8 (2080.0) → 2045.1 (2080.2) MB, 3148.7 / 0.0 ms (average mu = 0.076, current mu = 0.001) allocation failure; scavenge might not succeed

  <— JS stacktrace —>

  1: 00007FF74AE307BF node_api_throw_syntax_error+175823
  
  2: 00007FF74ADB5796 DSA_meth_get_flags+59654
  
  3: 00007FF74ADB7480 DSA_meth_get_flags+67056
  
  4: 00007FF74B85E944 v8::Isolate::ReportExternalAllocationLimitReached+116
  
  5: 00007FF74B849CD2 v8::Isolate::Exit+674
  
  6: 00007FF74B6CBB8C v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
  
  7: 00007FF74B6C8DAB v8::internal::Heap::CollectGarbage+3963
  
  8: 00007FF74B6DEFE3 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
  
  9: 00007FF74B6DF88D v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
  
  10: 00007FF74B6EF050 v8::internal::NewFillerObject+816
  
  11: 00007FF74B3DFF95 v8::internal::DateCache::Weekday+1349
  
  12: 00007FF74B8FBE71 v8::internal::SetupIsolateDelegate::SetupHeap+558193
  
  13: 00007FF6CC415877[/code]
  
  Our production deployment is blocked because of this issue . can you please help

• 

  datta

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 4:18 pm EST

  I have already tried increasing heap memory to 8 GB by setting NODE_OPTIONS environment variable to --max-old-space-size=8192. Still not working

• 

  datta

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 4:20 pm EST - Updated 9 October 2023, 4:23 pm EST

  Not able to attach files So pasting the content of files for you to be able to replicate

  package.json

  {
    "name": "spreadjs",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@azure/msal-browser": "^3.2.0",
      "@grapecity/spread-excelio": "^16.2.3",
      "@grapecity/spread-sheets": "^16.2.3",
      "@grapecity/spread-sheets-barcode": "^16.2.3",
      "@grapecity/spread-sheets-charts": "^16.2.3",
      "@grapecity/spread-sheets-designer": "^16.2.3",
      "@grapecity/spread-sheets-designer-react": "^16.2.3",
      "@grapecity/spread-sheets-designer-resources-en": "^16.2.3",
      "@grapecity/spread-sheets-io": "^16.2.3",
      "@grapecity/spread-sheets-languagepackages": "^16.2.3",
      "@grapecity/spread-sheets-pdf": "^16.2.3",
      "@grapecity/spread-sheets-pivot-addon": "^16.2.3",
      "@grapecity/spread-sheets-print": "^16.2.3",
      "@grapecity/spread-sheets-react": "^16.2.3",
      "@grapecity/spread-sheets-shapes": "^16.2.3",
      "@grapecity/spread-sheets-slicers": "^16.2.3",
      "@grapecity/spread-sheets-tablesheet": "^16.2.3",
      "@testing-library/jest-dom": "^5.17.0",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-scripts": "5.0.1",
      "web-vitals": "^2.1.4"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "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"
      ]
    }
  }
  

  App.jsx

  import logo from './logo.svg';
  import './App.css';
  import * as GC from "@grapecity/spread-sheets";
  import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
  import "@grapecity/spread-sheets-print";
  import "@grapecity/spread-sheets-shapes";
  import "@grapecity/spread-sheets-slicers";
  import "@grapecity/spread-sheets-pivot-addon";
  import "@grapecity/spread-sheets-tablesheet";
  import "@grapecity/spread-sheets-io";
  import "@grapecity/spread-sheets-designer-resources-en";
  import "@grapecity/spread-sheets-designer";
  import { Designer } from "@grapecity/spread-sheets-designer-react";
  import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
  
  function App() {
    const [designer, setDesigner] = useState();
    return (
      <div className="App" style={{ height: '100%', width: '100%' }}>
        <Designer designerInitialized={(designer => { setDesigner(designer) })} />
      </div>
    );
  }
  
  export default App;

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 5:42 pm EST

  Hi,

  Thanks for sharing the files with us. I was able to replicate the issue at my end with the provided configuration. The memory error is not caused by the SpreadJS, but a limitation of React.

  You could refer to the following StackOverFlow case for the solution: https://stackoverflow.com/questions/44046366/increase-javascript-heap-size-in-create-react-app-project/55378108#55378108

  Just create a .env file and add GENERATE_SOURCEMAP=false and it will resolve the issue at your end. I have attached a modified sample in react with my comment.

  Steps to verify:

  1. Install the dependencies using the “npm install” command.

  2. Build the application using the “npm run build” command.

  Please let us know if you still face the issue at your end.

  Regards,

  Ankit

  react.zip