Next.js Discord

Discord Forum

ReferenceError: Cannot access 'Utils' before initialization

Unanswered
Horned oak gall posted this in #help-forum
Open in Discord
Horned oak gallOP
I am trying to use [Gridstack](https://github.com/gridstack/gridstack.js) in Next.js and there is a [Utils](https://github.com/gridstack/gridstack.js/blob/master/src/utils.ts#L62) causing troubles.
'use client';
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    let grid = GridStack.init();
  });

  return null;
}

Please see screenshot for more info about the error.
Why is it causing troubles and what could be the fix? I thought by using 'use clisent' it should force the the code to run in the browser?

4 Replies

adam.birds
Try a dynamic import instead. This is one I use in mine;

import dynamic from 'next/dynamic';

const MilkdownEditor = dynamic(() => import('@/components/cms/ui/markdown/MarkdownEditor'), {
  ssr: false,
});


I'm not sure exactly how it would go for gridstack, but should hopefully work.
Horned oak gallOP
Do you mean(this doesn't work, same error)
import dynamic from 'next/dynamic'

const Debug = dynamic(() => import('../grid/Grid2'), {
  ssr: false,
})

GridStack itself is not a React component and cannot be dynamically imported.

Let me try the [react version](https://github.com/gridstack/gridstack.js/tree/master/react) of it.
adam.birds
Try the actual react component then yeah.
Horned oak gallOP
Hmm, back to sqaure one. Conceptually the the demoed react component is the same as what I am doing.
It also [import { GridStack } from 'gridstack'](https://github.com/gridstack/gridstack.js/blob/master/react/lib/grid-stack-render-provider.tsx#L9) directly like I do.