Handsontable Crashes on Production Build in Next.js 12 (v14.5)

Tags: #<Tag:0x00007f51c6c75a78> #<Tag:0x00007f51c6c758e8>
#1

I’m encountering a critical issue with Handsontable (v14.5) when running my Next.js 12 project in production mode. Everything works perfectly in development (npm run dev), but after building (npm run build) and starting the project (npm start), Handsontable crashes with the following error:

framework-4ab4da5df1dd0dac.js:9 TypeError: Cannot read properties of undefined (reading 'topOverlay')
    at get topOverlayTrimmingContainer (1096.7ac7798e02087ea0.js:45:113839)
    at eR.getWorkspaceHeight (1096.7ac7798e02087ea0.js:45:88033)
    at eR.getViewportHeight (1096.7ac7798e02087ea0.js:45:89893)
    at eR.createRowsCalculator (1096.7ac7798e02087ea0.js:45:90865)
    at eR.createCalculators (1096.7ac7798e02087ea0.js:45:92608)
    at el.draw (1096.7ac7798e02087ea0.js:45:15466)
    at eq.draw (1096.7ac7798e02087ea0.js:45:31559)
    at eJ.draw (1096.7ac7798e02087ea0.js:45:116115)
    at iu.render (1096.7ac7798e02087ea0.js:45:120488)
    at j.<anonymous> (d93df0d5.c906339055c7ee61.js:1:16532)

Here is my Handsontable setup:

import {
    AutoColumnSize,
    Autofill,
    ContextMenu,
    CopyPaste,
    DropdownMenu,
    Filters,
    HiddenRows,
    registerPlugin,
} from 'handsontable/plugins'

import {
    CheckboxCellType,
    NumericCellType,
    registerCellType,
} from 'handsontable/cellTypes'
import { HotTable, HotColumn } from '@handsontable/react'

import 'handsontable/dist/handsontable.full.css'
import { data } from './data'

registerCellType(CheckboxCellType);
registerCellType(NumericCellType);

registerPlugin(AutoColumnSize);
registerPlugin(Autofill);
registerPlugin(ContextMenu);
registerPlugin(CopyPaste);
registerPlugin(DropdownMenu);
registerPlugin(Filters);
registerPlugin(HiddenRows);

export default function Grid(props) {
    return (
        <HotTable
            data={data}
            colWidths={[140, 126, 192, 100, 100, 90, 90, 110, 97]}
            colHeaders={[
                'Company name',
                'Country',
                'Name',
                'Sell date',
                'Order ID',
                'In stock',
                'Qty',
                'Progress',
                'Rating',
            ]}
            dropdownMenu={true}
            contextMenu={true}
            filters={true}
            rowHeaders={true}
            manualRowMove={true}
            navigableHeaders={true}
            autoWrapRow={true}
            autoWrapCol={true}
            height={363}
            licenseKey="non-commercial-and-evaluation"
        >
            <HotColumn data={1} />
            <HotColumn data={2} />
            <HotColumn data={3} />
            <HotColumn data={5} />
            <HotColumn data={6} type="checkbox" className="htCenter" />
            <HotColumn data={7} type="numeric" />
            <HotColumn data={8} readOnly={true} className="htMiddle" />
            <HotColumn data={9} readOnly={true} className="htCenter" />
        </HotTable>
    );
}

What I’ve Tried:

  1. Verified that it works fine in development mode (npm run dev).
  2. Ensured all plugins and cell types are registered correctly.
  3. Checked if the error is related to SSR by wrapping Handsontable with useEffect, but the issue persists.
  4. Removed unnecessary props to see if any particular setting was causing the crash.

Environment:

  • Handsontable version: 14.5
  • @handsontable/react version: 14.5
  • Next.js version: 12
  • Node.js version: 16.x

Has anyone faced a similar issue? Any insights on what might be causing this in production mode?

Thanks in advance!

#2

Hi @ginrito1109

Thank you for contacting us. I checked with our Next.js from the documentation and the build completed without any errors. I noticed that you are using Node.js 16.x which might be causing such issues as since Handsontable 14.0 we are utilizing Node 20. Can you please try upgrading Node to the v. 20? Also, the current version of Handsontable is 15.1.0, updating it might be another step to check.

#3

Sorry for the confusion. My current Node.js version is already v20, and I previously encountered the same issue with Handsontable v15.1. To test, I downgraded to v14.

The only difference in my setup is that I am still importing CSS as in v14:

import 'handsontable/dist/handsontable.full.css'

I don’t think this should be causing the issue, but I wanted to mention it just in case.

I have tried updating everything to the latest version except for Next.js , but the issue still persists. Do you think the Next.js version could be the cause?

Thanks for your support!

#4

@ginrito1109

I can share our list of dependencies so you can compare them:

  "dependencies": {
    "@handsontable/react": "15.1.0",
    "handsontable": "15.1.0",
    "@types/node": "20.6.2",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-next": "13.5.1",
    "next": "13.5.1",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }