TypeError: Cannot read properties of undefined (reading 'toLowerCase')

TypeError: Cannot read properties of undefined (reading 'toLowerCase')

Posted by: finance on 10 May 2024, 12:42 am EST

• 

  finance

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 May 2024, 12:42 am EST - Updated 10 May 2024, 12:48 am EST

  I am trying to use SpreadJS in a NextJS project.

  The app is working as expected when running locally using

  next dev

  but when running the production build after

  next build

  , we’re getting an error when rendering the component that has these imports

  import { SpreadSheets } from '@mescius/spread-sheets-react'
  import * as GC from '@mescius/spread-common'
  import '@mescius/spread-calc-engine'
  import '@mescius/spread-sheets-core'
  import '@mescius/spread-sheets-calc-engine'
  import '@mescius/spread-sheets-conditional-formatting'
  import '@mescius/spread-sheets-cell-types'
  import '@mescius/spread-sheets-filter'
  import '@mescius/spread-sheets-bindings'
  import '@mescius/spread-sheets-outlines'
  import '@mescius/spread-sheets-outline-column'
  import '@mescius/spread-sheets-print'
  import '@mescius/spread-sheets-tables'
  import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'

  The error:

  TypeError: Cannot read properties of undefined (reading 'toLowerCase')
      at ./dist/core/util/common.js (gc.spread.sheets.all.min.js:12:182070)
      at t (gc.spread.sheets.all.min.js:12:98)
      at ./dist/core/core.entry.js (gc.spread.sheets.all.min.js:12:95414)
      at t (gc.spread.sheets.all.min.js:12:98)
      at ./all.entry.js (gc.spread.sheets.all.min.js:12:213)
      at t (gc.spread.sheets.all.min.js:12:98)
      at 50473 (gc.spread.sheets.all.min.js:12:98)
      at p (bootstrap:21:1)
      at 28267 (index.js:1:1)
      at p (bootstrap:21:1)

  The component which has these imports is being imported dynamically without SSR like so

  const SpreadSheet = dynamic(() => import('../spreadsheet/SpreadSheet'), {
    ssr: false,
  })

  How can we resolve this? happy to share any more details if required

  

  3024×1156 618 KB

• 

  finance

  • Post Options:
  • Link
    Copy

  Posted 10 May 2024, 5:55 am EST - Updated 10 May 2024, 6:00 am EST

  Attaching a minimal code sample where this is reproducible.

  Steps to reproduce

  1. Extract zip file, navigate to the source folder
  2. Install nodejs (required to run nextjs)
  3. Run

     npm install 

  4. Run

     npm run build

     and

     npm run start

     to serve the production build
  5. Open localhost:3005/testroute and you can see a client error as seen in the attached screenshot

  spreadjs-test.zip

  

  3024×1204 196 KB

  

  3020×1630 299 KB

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 13 May 2024, 3:20 am EST - Updated 13 May 2024, 3:25 am EST

  Hi,

  I am able to replicate the problem on my end, and after investigating, it appears that the issue is linked to Next.js. Switching to version 13.5.2 has resolved the problem, as shown in the attached GIF “resolve.gif”.

  GIF:

  Therefore, I recommend that you also upgrade from Next.js version 13.4.2 to version 13.5.2.

  Regards,
  
  Priyam