fix: add is mounted check

Author: chargome

src/components/codeKeywords/animatedContainer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {motion, MotionProps} from 'framer-motion';
 
 export function AnimatedContainer({

src/components/codeKeywords/codeKeywords.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {Children, cloneElement, ReactElement} from 'react';
 
 import {KeywordSelector} from './keywordSelector';

src/components/codeKeywords/keyword.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {MotionProps} from 'framer-motion';
 
 import {KeywordSpan} from './styles.css';

src/components/codeKeywords/keywordSelector.tsx

@@ -1,10 +1,13 @@
+'use client';
+
 import {ComponentProps, Fragment, useContext, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {usePopper} from 'react-popper';
 import {AnimatePresence} from 'framer-motion';
 import {useTheme} from 'next-themes';
 
 import {useOnClickOutside} from 'sentry-docs/clientUtils';
+import {useIsMounted} from 'sentry-docs/hooks/isMounted';
 
 import {CodeContext} from '../codeContext';
 
@@ -36,6 +39,7 @@ export function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
   const [orgFilter, setOrgFilter] = useState('');
   const {theme} = useTheme();
   const isDarkMode = theme === 'dark';
+  const {isMounted} = useIsMounted();
 
   const {styles, state, attributes} = usePopper(
     referenceEl,
@@ -144,7 +148,7 @@ export function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
           </AnimatePresence>
         </span>
       </KeywordDropdown>
-      {document &&
+      {isMounted &&
         createPortal(<AnimatePresence>{selector}</AnimatePresence>, document.body)}
     </Fragment>
   );

src/components/codeKeywords/orgAuthTokenCreator.tsx

@@ -1,10 +1,13 @@
+'use client';
+
 import {Fragment, useContext, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {usePopper} from 'react-popper';
 import {AnimatePresence} from 'framer-motion';
 import {useTheme} from 'next-themes';
 
 import {useOnClickOutside} from 'sentry-docs/clientUtils';
+import {useIsMounted} from 'sentry-docs/hooks/isMounted';
 
 import {CodeContext, createOrgAuthToken} from '../codeContext';
 
@@ -41,6 +44,8 @@ export function OrgAuthTokenCreator() {
   const {theme} = useTheme();
   const isDarkMode = theme === 'dark';
 
+  const {isMounted} = useIsMounted();
+
   useOnClickOutside({
     ref: {current: referenceEl},
     enabled: isOpen,
@@ -192,7 +197,7 @@ export function OrgAuthTokenCreator() {
           </AnimatePresence>
         </span>
       </KeywordDropdown>
-      {document &&
+      {isMounted &&
         createPortal(<AnimatePresence>{selector}</AnimatePresence>, document.body)}
     </Fragment>
   );

src/components/codeKeywords/styles.css.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {ArrowDown} from 'react-feather';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';

src/hooks/isMounted.tsx

@@ -0,0 +1,11 @@
+import {useEffect, useState} from 'react';
+
+export const useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return {isMounted};
+};