next js - tui-grid TypeError: Cannot read properties of null (reading 'clientHeight')

[jijoungsoo]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. next js set tui-grid
2. page loading
3. occur error TypeError: Cannot read properties of null (reading 'clientHeight')

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: windows 10
• Browser : chrome
• Version : 100.0.4896.127

Additional context package.json { "name": "AAAAA", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.6.1", "@mui/material": "^5.6.1", "@toast-ui/react-grid": "^4.21.0", "axios": "^0.26.1", "babel-preset-next": "^1.4.0", "flexlayout-react": "^0.7.0", "glob": "^8.0.1", "next": "12.1.4", "next-auth": "^4.3.1", "react": "18.0.0", "react-dom": "18.0.0", "react-hook-form": "^7.29.0", "react-minimal-side-navigation": "^1.9.2", "react-router-dom": "^6.3.0", "styled-components": "^5.3.5", "uuid": "^8.3.2" }, "devDependencies": { "@types/node": "17.0.23", "@types/react": "18.0.1", "@types/styled-components": "^5.1.25", "@types/uuid": "^8.3.4", "babel-plugin-styled-components": "^2.0.7", "eslint": "8.13.0", "eslint-config-next": "12.1.4", "typescript": "4.6.3" } } tsconfig.json { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "baseUrl": ".", "paths": { "@/": [ "" ] }, "noEmit": true, "incremental": true }, "include": [ "next-env.d.ts", "*/.ts", "*/.tsx" ], "exclude": [ "node_modules" ] }

[jajugoguma]

@jijoungsoo I can't reproduce the problem. Can you give me an example through codesandbox etc?

[jijoungsoo]

here https://codesandbox.io/s/gallant-dan-9vhshn?file=/src/App.tsx

fix me

[itpsolver]

I have same issue too.

---

2utils.js:69 Uncaught TypeError: Cannot read properties of null (reading 'clientHeight') at Object.refreshLayout (utils.js:69:8) at Object.dispatch (utils.js:69:8) at ContainerComp2._this.syncWithDOMWidth (utils.js:69:8) refreshLayout @ utils.js:69 dispatch @ utils.js:69 ContainerComp2._this.syncWithDOMWidth @ utils.js:69 setTimeout(비동기) ContainerComp2.componentDidMount @ utils.js:69 flushMounts @ customEvents.js:90 diff @ customEvents.js:108 render @ _safeEvent.js:15 Grid2 @ utils.js:69 value @ toastui-react-grid.js:1 commitLayoutEffectOnFiber @ react-dom.development.js:23305 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533

[OddbjornE]

I am using tui-grid and react. I believe I got this error because react render the grid twice, because of React strict mode. When I turned the strict mode off, it just render once, and my error is gone.