document is not defined, window is not defined, React.useEffectが使えない

Question

Reactで作られたプロダクト内で、特定のDOMの高さを取得しようとしています。
やりたいこととしては、

const hoge = document.querySelector('#hoge');
const height = hoge.clientHeight;

のようなシンプルなものです。
ただ、

• document.querySelector('#hoge');をしようとするとdocument is not definedと怒られる
• window.hogehogeのようなことをしようとするとwindow is not definedと怒られる
• React.useEffect内にconsoleを仕込んでも表示されない

と言った形になっています

import * as React from 'react';

function Hoge() {
  const hoge = document.querySelector('#hoge');
  // -> document is not defined

  const hoge2 = window.dataLayer;
  // -> window is not defined

  React.useEffect(() => {
    console.log('hogehoge');
    // -> 表示されない
  });

  return (
    <>
      <div id="hoge">hoge</div>
    </>
  );
};

if (typeof document !== 'undefined')やif (typeof window === 'object')のような分岐をさせてみてもelseの方に入ってしまい引っかからず、documentやwindowが使えません

このような場合、どうしたら良いのでしょうか、、？ 🙇‍♀️

Comments

[hoshi-takanori]

React で document.querySelector する時点で何かが間違ってる気が…。

[maisumakun]

> document is not definedと怒られる

「何が」出したエラーメッセージですか？

[reactq]

> React で document.querySelector する時点で何かが間違ってる気が

具体的にどう言うところが間違っているのでしょうか？🙇‍♀️
また、Reactで特定のDOMの高さを取得しようとした場合、document.querySelectorする以外でどのように取得するのでしょうか？🙇‍♀️

> 「何が」出したエラーメッセージですか？
terminalに出たエラーメッセージです🙇‍♀️

[maisumakun]

> terminalに出たエラーメッセージです

周辺も含めてご提示いただけないでしょうか。

[reactq]

> 周辺も含めてご提示いただけないでしょうか。

例えば上記のHoge functionの中で`const hoge = document.querySelector('#hoge');`のように呼び出した場合、以下のようなエラーが発生します🙇‍♀️
```
ErrorHandler: ReferenceError: document is not defined
at Hoge (/Users/hoge/hoge/dist/server.js:4157:16)
at processChild (/Users/hoge/hoge/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
at resolve (/Users/hoge/hoge/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (/Users/hoge/hoge/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (/Users/hoge/hoge/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
at renderToString (/Users/hoge/hoge/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
at ./src/core/router/serverRouter.jsx.__webpack_exports__.default (/Users/hoge/hoge/dist/server.js:7789:91)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
```

[hoshi-takanori]

関数コンポーネントの先頭で document.querySelector してますが、まず最初はまだ DOM 要素が作られてませんから undefined が返ると思いますし、その後も正しい DOM 要素を取得できる保証はないはず。
React から DOM 要素にアクセスするには通常 useRef あたりを使うと思いますが、height を使って何をしたいかによってもやり方は変わってくる可能性があるかと。(というか、本当に DOM 要素にアクセスする必要があるのかの検討から…。)

[reactq]

なるほど、、！Reactに詳しくなく、大変勉強になります🙇‍♀️
今回やりたいこととしてはuseRefの使用で事足りそうですので、useRefを使用して実装し直してみたいと思います！ありがとうございます！

Answer 1

useRefを使用して実装できました

Answer 2

エラーメッセージのとおり、サーバサイドにはdocumentなどのDOMは存在しません。

「特定のDOMの高さを取得」するのは、そもそもサーバサイドでやるにはふさわしくない作業ですので、ブラウザ内で行ってください。