why is typeof HTMLElement returning "object" instead of "function"?

[dadamssg]

I'm trying to use @headlessui/react's combobox in my app and it has this:

https://github.com/tailwindlabs/headlessui/blob/03c22b42b6228d961901ec1f3c4f954dd73c2e2d/packages/%40headlessui-react/src/internal/floating.tsx#L138-L145

  let stablePlacement = useMemo(
    () => placement,
    [
      JSON.stringify(
        placement,
        typeof HTMLElement !== 'undefined'
          ? (_, v) => {
              if (v instanceof HTMLElement) {
                return v.outerHTML
              }
              return v
            }
          : undefined
      ),
    ]
  )

typeof HTMLElement is returning "object" on the server instead of "function" like in the browser. This causes the v instanceof HTMLElement to throw an error:

TypeError: Right-hand side of 'instanceof' is not callable

I've tried upgrading the remix packages but that hasn't fixed anything. I can't reproduce this in a fresh remix app though. I'm not sure what i need to upgrade or change.

I've also tried putting this into a .client.tsx file but that results in completely different error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Anyone have ideas on what's going on here?

[sergiodxa]

HTMLElement is a class and class are functions behind the scene, so I think it makes sense that it returns functions instead of object.

[dadamssg]

Agreed which is why I don't understand why it's "object" on the server

[sergiodxa]

I just tried doing typeof HTMLElement on different server runtimes, I tried Node.js, Bun and workerd (Cloudflare runtime) and all of them return undefined, not object.

I also tried inside a Remix app and it's the same result.

Are you using Deno? Or is it possible you have something like jsdom mocking the DOM APIs server-side?

[dadamssg]

no, just using remix app server with vite. Node v20.12.0

{
  "private": true,
  "name": "app",
  "description": "",
  "license": "unlicensed",
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "start": "remix-serve ./build/server/index.js",
    "migrate": "sequelize db:migrate",
    "prepare": "husky install",
    "test": "jest",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/react": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@headlessui/react": "^2.0.4",
    "@heroicons/react": "^2.0.17",
    "@popperjs/core": "^2.11.7",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@remix-run/node": "^2.9.1",
    "@remix-run/react": "^2.9.1",
    "@remix-run/serve": "^2.9.1",
    "@remix-run/v1-route-convention": "^0.1.3",
    "@stripe/react-stripe-js": "^1.16.5",
    "@stripe/stripe-js": "^1.52.0",
    "ag-charts-community": "^7.3.0",
    "ag-charts-react": "^7.3.0",
    "ag-grid-community": "27.3",
    "ag-grid-enterprise": "27.3",
    "ag-grid-react": "27.3",
    "clsx": "^2.1.0",
    "d3-hierarchy": "^3.1.2",
    "dotenv": "^16.0.3",
    "fs-extra": "^11.1.1",
    "google-libphonenumber": "^3.2.32",
    "he": "^1.2.0",
    "isbot": "^5.1.1",
    "js-confetti": "^0.11.0",
    "nodemailer": "^6.9.1",
    "nprogress": "^0.2.0",
    "pg-hstore": "^2.3.4",
    "quill": "^2.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-email-editor": "^1.7.8",
    "react-loading": "^2.0.3",
    "react-phone-number-input": "^3.3.9",
    "react-popper": "^2.3.0",
    "react-quilljs": "^1.3.3",
    "react-select": "^5.8.0",
    "react-toastify": "^9.1.2",
    "react-tooltip": "^5.21.5",
    "reactflow": "^11.11.3",
    "remix-auth": "^3.6.0",
    "remix-auth-form": "^1.4.0",
    "remix-utils": "^7.5.0",
    "sequelize": "^6.31.0",
    "sequelize-cli": "^6.6.0",
    "socket.io-client": "^4.7.5",
    "stripe": "^11.18.0",
    "tailwind-merge": "^2.2.1",
    "tedious": "^15.1.3",
    "tiny-invariant": "^1.3.3",
    "use-debounce": "^9.0.4",
    "uuid": "^9.0.0",
    "winston": "^3.11.0",
    "winston-daily-rotate-file": "^4.7.1",
    "xlsx": "npm:@e965/[email protected]",
    "zod": "^3.21.4",
    "zustand": "^4.3.7"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.1",
    "@remix-run/eslint-config": "^2.9.1",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/react": "^13.4.0",
    "@types/fs-extra": "^11.0.1",
    "@types/he": "^1.2.0",
    "@types/jest": "^29.5.0",
    "@types/nodemailer": "^6.4.7",
    "@types/nprogress": "^0.2.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "jest": "^29.5.0",
    "lint-staged": "^13.2.1",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "^3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "ts-jest": "^29.1.0",
    "typescript": "^5.2.2",
    "vite": "^5.2.10",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "engines": {
    "node": ">=18"
  }
}

[dadamssg]

i'm working around it using your <ClientOnly> component from remix-utils but it would be nice to figure out what's causing this.