[Bug]: ⨯ Menu.js ⨯ Internal error: ReferenceError: document is not defined

[edumorlom]

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

@carbon/react@1.47.0

React version

react@18.2.0

Description

 ⨯ Internal error: ReferenceError: document is not defined
    at Menu (./node_modules/@carbon/react/es/components/Menu/Menu.js:40:99)
    at ai (/Users/edumorales/dpr/ix-events-dpr/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6505)

The following code causes the an error:

      <MenuButton label="Actions" kind={"tertiary"}>
      <MenuItem label="Option 1" />
      <MenuItem label="Option 2" />
      <MenuItem label="Option 3" />
      <MenuItem label="Option 4" />
    </MenuButton>

Reproduction/example

None

Steps to reproduce

Any time I compile my code with NextJS/Typescript, I get the error above.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[edumorlom]

FYI: This is NextJS 14 + TypeScript, its client side rendering.

├── @carbon/react@1.47.0
├── @types/carbon__icons-react@11.29.0
├── @types/node@20.11.0
├── @types/react-dom@18.2.18
├── @types/react@18.2.47
├── dotenv@16.3.1
├── eslint-config-next@14.0.4
├── eslint@8.56.0
├── next@14.0.4
├── react-dom@18.2.0
├── react@18.2.0
├── sass@1.69.7
└── typescript@5.3.3

[tay1orjones]

Menu's target prop defaults to document.body

carbon/packages/react/src/components/Menu/Menu.js

Line 38 in abff3a5

target = document.body,

[tay1orjones]

@janhassel do you think it makes sense to guard against this by moving this out of the default function parameter and instead have it in a useEffect?

[tay1orjones]

@edumorlom it would be helpful to have a concrete reproduction of this issue, could you put together a sandbox of it on codesandbox?

[janhassel]

@tay1orjones I have to admit I'm not super familiar with how Next.js handles the rehydration, so let me know if this makes sense or not.

Having the target set by a useEffect for this case feels a bit overkill and I'm concerned about code readability down the line. Couldn't we use optional chaining for the default value?

function Menu({
  target = document?.body,
}) {

or alternatively remove the default value and add a nullish coalescing operator when creating the portal (also with optional chaining)?

createPortal(rendered, target ?? document?.body)

I'm leaning towards the first option though (provided it works as I assume) for a more transparent API.

[lukababu]

I'm also getting this error, maybe I didn't implement it correctly, but I just have the following:

            <MenuButton
              label="Actions"
              kind="primary"
              menuAlignment="bottom-start"
            >
              <MenuItem label="View" />
              <MenuItem
                label="Send"
                disabled={ isSent }
              />
              <MenuItem label="Download" />
            </MenuButton>

[tw15egan]

A good first step would be to implement @janhassel's first suggestion and seeing if this resolves the issue 👍