styled.div is not a function

I’m trying to use glide-data-grid in a new Next.js project, but I’m running into the follow error:

TypeError: styled.div is not a function

Call Stack <unknown> node_modules/@glideapps/glide-data-grid/dist/js/data-grid-overlay-editor/private/bubbles-overlay-editor-style.js (2:52)

The file that it’s complaining about imports styled from styles.ts. This is what styles.ts compiles to in my node_modules:

import baseStyled from "styled-components";

const dataEditorBaseTheme = {
  accentColor: "#4F5DFF",
  accentFg: "#FFFFFF",
  accentLight: "rgba(62, 116, 253, 0.1)",
  textDark: "#313139",
  textMedium: "#737383",
  textLight: "#B2B2C0",
  textBubble: "#313139",
  bgIconHeader: "#737383",
  fgIconHeader: "#FFFFFF",
  textHeader: "#313139",
  textGroupHeader: "#313139BB",
  textHeaderSelected: "#FFFFFF",
  bgCell: "#FFFFFF",
  bgCellMedium: "#FAFAFB",
  bgHeader: "#F7F7F8",
  bgHeaderHasFocus: "#E9E9EB",
  bgHeaderHovered: "#EFEFF1",
  bgBubble: "#EDEDF3",
  bgBubbleSelected: "#FFFFFF",
  bgSearchResult: "#fff9e3",
  borderColor: "rgba(115, 116, 131, 0.16)",
  drilldownBorder: "rgba(0, 0, 0, 0)",
  linkColor: "#4F5DFF",
  cellHorizontalPadding: 8,
  cellVerticalPadding: 3,
  headerFontStyle: "600 13px",
  baseFontStyle: "13px",
  fontFamily: "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
  editorFontSize: "13px"
};
export const styled = baseStyled;
export function getDataEditorTheme() {
  return dataEditorBaseTheme;
}

Maybe also relevant is that I get the following error when bringing up the app, but it gives me no stack trace or indication where it’s coming from. It also doesn’t happen when refreshing the page, whereas the styled.div error does happen every time.

error - unhandledRejection: ReferenceError: document is not defined

This is what my tsconfig.json looks like:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

[jassmith]

Its the last FAQ question now in the readme.

[chris-aeviator]

for anyone stumbling upon this: this happened to me also when only importing anything (e.g. GridCellKind) outside of my dynamicly included component