UI Crash from NextJS

[abindaz]

Describe the bug

The table was working fine, After I build and start the server for production, The UI crashed

To Reproduce

1. npm run build
2. npm run start

Expected behavior

Working like this while debugging locally npm run dev

Environment

• react-data-grid version: 7.0.0-beta.42
• react/react-dom version: 18.2.0
• next version: 13.2.4

[abindaz]

In my case, I'm not able to use the features, text edit, column resize, or sticky column. The table will be working fine if I avoid these features.

[abenhamdine]

FWIW we use this library with nextjs 14, in client components (with 'use client' directive) and it works perfectly

[softmarshmallow]

This happens on production. works fine on dev

[softmarshmallow]

@abindaz Did you happen to solve this?

[softmarshmallow]

In 7.0.0-beta.42, the css class names are transformed (at least it seems) Yet this is inteded, this library uses linaria.

this is from node_modules directory

node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-data-grid/lib/styles.css

@layer rdg {
  @layer Defaults,
    FocusSink,
    CheckboxInput,
    CheckboxIcon,
    CheckboxLabel,
    Cell,
    HeaderCell,
    SummaryCell,
    EditCell,
    Row,
    HeaderRow,
    SummaryRow,
    GroupedRow,
    Root;
}

.mlln6zg7-0-0-beta-42 {
  @layer rdg.MeasuringCell {
    contain: strict;
    grid-row: 1;
    visibility: hidden;
  }
}


.cj343x07-0-0-beta-42 {
  @layer rdg.Cell {
    /* max-content does not work with size containment
     * dynamically switching between different containment styles incurs a heavy relayout penalty
     * Chromium bug: at odd zoom levels or subpixel positioning,
     * layout/paint/style containment can make cell borders disappear
     *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
     */
    position: relative; /* needed for absolute positioning to work */
    padding-block: 0;
    padding-inline: 8px;
    border-inline-end: 1px solid var(--rdg-border-color);
    border-block-end: 1px solid var(--rdg-border-color);
    grid-row-start: var(--rdg-grid-row-start);
    background-color: inherit;

    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    outline: none;

    &[aria-selected='true'] {
      outline: 2px solid var(--rdg-selection-color);
      outline-offset: -2px;
    }
  }
}

.csofj7r7-0-0-beta-42 {
  @layer rdg.Cell {
    position: sticky;
    /* Should have a higher value than 0 to show up above unfrozen cells */
    z-index: 1;
  }
}

.ch2wcw87-0-0-beta-42 {
  @layer rdg.Cell {
    box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
  }
}


.c1bn88vv7-0-0-beta-42 {
  @layer rdg.CheckboxLabel {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    margin-inline-end: 1px; /* align checkbox in row group cell */
  }
}

.c1qt073l7-0-0-beta-42 {
  @layer rdg.CheckboxInput {
    all: unset;
  }
}

.cf71kmq7-0-0-beta-42 {
  @layer rdg.CheckboxIcon {
    content: '';
    inline-size: 20px;
    block-size: 20px;
    border: 2px solid var(--rdg-border-color);
    background-color: var(--rdg-background-color);

    .c1qt073l7-0-0-beta-42:checked + & {
      background-color: var(--rdg-checkbox-color);
      outline: 4px solid var(--rdg-background-color);
      outline-offset: -6px;
    }

    .c1qt073l7-0-0-beta-42:focus + & {
      border-color: var(--rdg-checkbox-focus-color);
    }
  }
}

.c1lwve4p7-0-0-beta-42 {
  @layer rdg.CheckboxLabel {
    cursor: default;

    .cf71kmq7-0-0-beta-42 {
      border-color: var(--rdg-checkbox-disabled-border-color);
      background-color: var(--rdg-checkbox-disabled-background-color);
    }
  }
}


.g1s9ylgp7-0-0-beta-42 {
  @layer rdg.GroupCellContent {
    outline: none;
  }
}

.cz54e4y7-0-0-beta-42 {
  @layer rdg.GroupCellCaret {
    margin-inline-start: 4px;
    stroke: currentColor;
    stroke-width: 1.5px;
    fill: transparent;
    vertical-align: middle;

    > path {
      transition: d 0.1s;
    }
  }
}


.c1w9bbhr7-0-0-beta-42 {
  @layer rdg.DragHandle {
    --rdg-drag-handle-size: 8px;
    z-index: 0;
    cursor: move;
    inline-size: var(--rdg-drag-handle-size);
    block-size: var(--rdg-drag-handle-size);
    background-color: var(--rdg-selection-color);
    place-self: end;

    &:hover {
      --rdg-drag-handle-size: 16px;
      border: 2px solid var(--rdg-selection-color);
      background-color: var(--rdg-background-color);
    }
  }
}

.c1creorc7-0-0-beta-42 {
  @layer rdg.DragHandle {
    z-index: 1;
    position: sticky;
  }
}


.cis5rrm7-0-0-beta-42 {
  @layer rdg.EditCell {
    padding: 0;
  }
}


.h44jtk67-0-0-beta-42 {
  @layer rdg.SortableHeaderCell {
    display: flex;
  }
}

.hcgkhxz7-0-0-beta-42 {
  @layer rdg.SortableHeaderCellName {
    flex-grow: 1;
    overflow: clip;
    text-overflow: ellipsis;
  }
}


.c6l2wv17-0-0-beta-42 {
  @layer rdg.HeaderCell {
    cursor: pointer;
  }
}

.c1kqdw7y7-0-0-beta-42 {
  @layer rdg.HeaderCell {
    touch-action: none;
  }
}

.r1y6ywlx7-0-0-beta-42 {
  @layer rdg.HeaderCell {
    cursor: col-resize;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: 10px;
  }
}

.c1bezg5o7-0-0-beta-42 {
  opacity: 0.5;
}

.c1vc96037-0-0-beta-42 {
  background-color: var(--rdg-header-draggable-background-color);
}


.r1upfr807-0-0-beta-42 {
  @layer rdg.Row {
    display: contents;
    line-height: var(--rdg-row-height);
    background-color: var(--rdg-background-color);

    &:hover {
      background-color: var(--rdg-row-hover-background-color);
    }

    &[aria-selected='true'] {
      background-color: var(--rdg-row-selected-background-color);

      &:hover {
        background-color: var(--rdg-row-selected-hover-background-color);
      }
    }
  }
}

.r190mhd37-0-0-beta-42 {
  @layer rdg.FocusSink {
    outline: 2px solid var(--rdg-selection-color);
    outline-offset: -2px;
  }
}

.r139qu9m7-0-0-beta-42 {
  @layer rdg.FocusSink {
    &::before {
      content: '';
      display: inline-block;
      height: 100%;
      position: sticky;
      inset-inline-start: 0;
      border-inline-start: 2px solid var(--rdg-selection-color);
    }
  }
}


.h10tskcx7-0-0-beta-42 {
  @layer rdg.HeaderRow {
    display: contents;
    line-height: var(--rdg-header-row-height);
    background-color: var(--rdg-header-background-color);
    font-weight: bold;

    & > .cj343x07-0-0-beta-42 {
      /* Should have a higher value than 1 to show up above regular cells and the focus sink */
      z-index: 2;
      position: sticky;
    }

    & > .csofj7r7-0-0-beta-42 {
      z-index: 3;
    }
  }
}


.c6ra8a37-0-0-beta-42 {
  @layer rdg.Cell {
    background-color: #ccccff;
  }
}

.cq910m07-0-0-beta-42 {
  @layer rdg.Cell {
    background-color: #ccccff;

    &.c6ra8a37-0-0-beta-42 {
      background-color: #9999ff;
    }
  }
}


.a3ejtar7-0-0-beta-42 {
  @layer rdg.SortIcon {
    fill: currentColor;

    > path {
      transition: d 0.1s;
    }
  }
}


.rnvodz57-0-0-beta-42 {
  @layer rdg.Defaults {
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
  }

  @layer rdg.Root {
    --rdg-color: #000;   --rdg-border-color: #ddd;   --rdg-summary-border-color: #aaa;   --rdg-background-color: hsl(0deg 0% 100%);   --rdg-header-background-color: hsl(0deg 0% 97.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 96%);   --rdg-row-selected-background-color: hsl(207deg 76% 92%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);   --rdg-checkbox-color: hsl(207deg 100% 29%);   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);   --rdg-checkbox-disabled-border-color: #ccc;   --rdg-checkbox-disabled-background-color: #ddd;
    --rdg-selection-color: #66afe9;
    --rdg-font-size: 14px;

    display: grid;

    color-scheme: var(--rdg-color-scheme, light dark);

    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
    /* We set a stacking context so internal elements don't render on top of external elements. */
    /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
    contain: content;
    content-visibility: auto;
    block-size: 350px;
    border: 1px solid var(--rdg-border-color);
    box-sizing: border-box;
    overflow: auto;
    background-color: var(--rdg-background-color);
    color: var(--rdg-color);
    font-size: var(--rdg-font-size);

    /* needed on Firefox to fix scrollbars */
    &::before {
      content: '';
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

    &.rdg-dark {
      --rdg-color-scheme: dark;
      --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-color: hsl(207deg 100% 79%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);   --rdg-checkbox-disabled-border-color: #000;   --rdg-checkbox-disabled-background-color: #333;
    }

    &.rdg-light {
      --rdg-color-scheme: light;
    }

    @media (prefers-color-scheme: dark) {
      &:not(.rdg-light) {
        --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-color: hsl(207deg 100% 79%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);   --rdg-checkbox-disabled-border-color: #000;   --rdg-checkbox-disabled-background-color: #333;
      }
    }
  }
}

.vlqv91k7-0-0-beta-42 {
  @layer rdg.Root {
    user-select: none;

    & .r1upfr807-0-0-beta-42 {
      cursor: move;
    }
  }
}

.f1lsfrzw7-0-0-beta-42 {
  @layer rdg.FocusSink {
    grid-column: 1/-1;
    pointer-events: none;
    /* Should have a higher value than 1 to show up above regular frozen cells */
    z-index: 1;
  }
}

.f1cte0lg7-0-0-beta-42 {
  @layer rdg.FocusSink {
    /* Should have a higher value than 3 to show up above header and summary rows */
    z-index: 3;
  }
}


.s8wc6fl7-0-0-beta-42 {
  @layer rdg.SummaryCell {
    inset-block-start: var(--rdg-summary-row-top);
    inset-block-end: var(--rdg-summary-row-bottom);
  }
}


.skuhp557-0-0-beta-42 {
  @layer rdg.SummaryRow {
    line-height: var(--rdg-summary-row-height);

    > .cj343x07-0-0-beta-42 {
      position: sticky;
    }
  }
}

.tf8l5ub7-0-0-beta-42 {
  @layer rdg.SummaryRow {
    > .cj343x07-0-0-beta-42 {
      z-index: 2;
    }

    > .csofj7r7-0-0-beta-42 {
      z-index: 3;
    }
  }
}

.tb9ughf7-0-0-beta-42 {
  @layer rdg.SummaryRow {
    > .cj343x07-0-0-beta-42 {
      border-block-end: 2px solid var(--rdg-summary-border-color);
    }
  }
}

.b1yssfnt7-0-0-beta-42 {
  @layer rdg.SummaryRow {
    > .cj343x07-0-0-beta-42 {
      border-block-start: 2px solid var(--rdg-summary-border-color);
    }
  }
}


.g1yxluv37-0-0-beta-42 {
  @layer rdg.GroupedRow {
    &:not([aria-selected='true']) {
      background-color: var(--rdg-header-background-color);
    }

    > .cj343x07-0-0-beta-42:not(:last-child):not(.ch2wcw87-0-0-beta-42) {
      border-inline-end: none;
    }
  }
}


.t7vyx3i7-0-0-beta-42 {
  @layer rdg.TextEditor {
    appearance: none;

    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    padding-block: 0;
    padding-inline: 6px;
    border: 2px solid #ccc;
    vertical-align: top;
    color: var(--rdg-color);
    background-color: var(--rdg-background-color);

    font-family: inherit;
    font-size: var(--rdg-font-size);

    &:focus {
      border-color: var(--rdg-selection-color);
      outline: none;
    }

    &::placeholder {
      color: #999;
      opacity: 1;
    }
  }
}

Perhaps this is a issue with the RDG version not nextjs?

[softmarshmallow]

I've narrowed it down to issue related to css layer.

Original css (library, untouched)

.cj343x07-0-0-beta-42 {
  @layer rdg.Cell {
    /* max-content does not work with size containment
     * dynamically switching between different containment styles incurs a heavy relayout penalty
     * Chromium bug: at odd zoom levels or subpixel positioning,
     * layout/paint/style containment can make cell borders disappear
     *   https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
     */
    position: relative; /* needed for absolute positioning to work */
    padding-block: 0;
    padding-inline: 8px;
    border-inline-end: 1px solid var(--rdg-border-color);
    border-block-end: 1px solid var(--rdg-border-color);
    grid-row-start: var(--rdg-grid-row-start);
    background-color: inherit;

    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    outline: none;

    &[aria-selected='true'] {
      outline: 2px solid var(--rdg-selection-color);
      outline-offset: -2px;
    }
  }
}

NextJS Build output

.cj343x07-0-0-beta-42 {
    @layer rdg.Cell {
        position: relative;
        padding-block:0;padding-inline:8px;border-inline-end:1px solid var(--rdg-border-color);border-block-end: 1px solid var(--rdg-border-color);
        grid-row-start: var(--rdg-grid-row-start);
        background-color: inherit;
        white-space: nowrap;
        overflow: clip;
        text-overflow: ellipsis;
        outline: none;
        &[aria-selected=true] {
            outline: 2px solid var(--rdg-selection-color);
            outline-offset: -2px
        }
    }
}

It's identical at this moment, If I remove (unwrap) @layer rdg.Cell { ... } the style will start working again.

Full css chunk on production

@layer rdg {
    @layer Defaults, FocusSink, CheckboxInput, CheckboxIcon, CheckboxLabel, Cell, HeaderCell, SummaryCell, EditCell, Row, HeaderRow, SummaryRow, GroupedRow, Root}

.cj343x07-0-0-beta-42,.mlln6zg7-0-0-beta-42 {
    @layer rdg.Cell {
        position: relative;
        padding-block:0;padding-inline:8px;border-inline-end:1px solid var(--rdg-border-color);border-block-end: 1px solid var(--rdg-border-color);
        grid-row-start: var(--rdg-grid-row-start);
        background-color: inherit;
        white-space: nowrap;
        overflow: clip;
        text-overflow: ellipsis;
        outline: none;
        &[aria-selected=true] {
            outline: 2px solid var(--rdg-selection-color);
            outline-offset: -2px
        }
    }
}

.c1bn88vv7-0-0-beta-42,.c1qt073l7-0-0-beta-42,.cf71kmq7-0-0-beta-42,.ch2wcw87-0-0-beta-42,.csofj7r7-0-0-beta-42 {
    @layer rdg.CheckboxIcon {
        content: "";
        inline-size: 20px;
        block-size: 20px;
        border-left-color: var(--rdg-border-color);
        border-left-style: solid;
        border-left-width: 2px;
        border-bottom-color: var(--rdg-border-color);
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-right-color: var(--rdg-border-color);
        border-right-style: solid;
        border-right-width: 2px;
        border-top-color: var(--rdg-border-color);
        border-top-style: solid;
        border-top-width: 2px;
        background-color: var(--rdg-background-color);
        .c1qt073l7-0-0-beta-42:checked+& {
            background-color: var(--rdg-checkbox-color);
            outline: 4px solid var(--rdg-background-color);
            outline-offset: -6px
        }

        .c1qt073l7-0-0-beta-42:focus+& {
            border-color: var(--rdg-checkbox-focus-color)
        }
    }
}

.c1lwve4p7-0-0-beta-42 {
    @layer rdg.CheckboxLabel {
        cursor: default;
        .cf71kmq7-0-0-beta-42 {
            border-color: var(--rdg-checkbox-disabled-border-color);
            background-color: var(--rdg-checkbox-disabled-background-color)
        }
    }
}

.cz54e4y7-0-0-beta-42,.g1s9ylgp7-0-0-beta-42 {
    @layer rdg.GroupCellCaret {
        margin-inline-start:4px;stroke: currentColor;
        stroke-width: 1.5px;
        fill: transparent;
        vertical-align: middle;
        >path {
            transition: d .1s
        }
    }
}

.c1w9bbhr7-0-0-beta-42 {
    @layer rdg.DragHandle {
        --rdg-drag-handle-size: 8px;
        z-index: 0;
        cursor: move;
        inline-size: var(--rdg-drag-handle-size);
        block-size: var(--rdg-drag-handle-size);
        background-color: var(--rdg-selection-color);
        place-self: end;
        &:hover {
            --rdg-drag-handle-size: 16px;
            border: 2px solid var(--rdg-selection-color);
            background-color: var(--rdg-background-color)
        }
    }
}

.c1creorc7-0-0-beta-42,.c1kqdw7y7-0-0-beta-42,.c6l2wv17-0-0-beta-42,.cis5rrm7-0-0-beta-42,.h44jtk67-0-0-beta-42,.hcgkhxz7-0-0-beta-42,.r1y6ywlx7-0-0-beta-42 {
    @layer rdg.HeaderCell {
        cursor: col-resize;
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        inset-block-end: 0;
        inline-size: 10px
    }
}

.c1bezg5o7-0-0-beta-42 {
    opacity: .5
}

.c1vc96037-0-0-beta-42 {
    background-color: var(--rdg-header-draggable-background-color)
}

.r1upfr807-0-0-beta-42 {
    @layer rdg.Row {
        display: contents;
        line-height: var(--rdg-row-height);
        background-color: var(--rdg-background-color);
        &:hover {
            background-color: var(--rdg-row-hover-background-color)
        }

        &[aria-selected=true] {
            background-color: var(--rdg-row-selected-background-color);
            &:hover {
                background-color: var(--rdg-row-selected-hover-background-color)
            }
        }
    }
}

.r139qu9m7-0-0-beta-42,.r190mhd37-0-0-beta-42 {
    @layer rdg.FocusSink {
        &:before {
            content: "";
            display: inline-block;
            height: 100%;
            position: sticky;
            inset-inline-start: 0;
            border-inline-start:2px solid var(--rdg-selection-color)}
    }
}

.h10tskcx7-0-0-beta-42 {
    @layer rdg.HeaderRow {
        display: contents;
        line-height: var(--rdg-header-row-height);
        background-color: var(--rdg-header-background-color);
        font-weight: 700;
        &>.cj343x07-0-0-beta-42 {
            z-index: 2;
            position: sticky
        }

        &>.csofj7r7-0-0-beta-42 {
            z-index: 3
        }
    }
}

.c6ra8a37-0-0-beta-42,.cq910m07-0-0-beta-42 {
    @layer rdg.Cell {
        background-color: #ccf;
        &.c6ra8a37-0-0-beta-42 {
            background-color: #99f
        }
    }
}

.a3ejtar7-0-0-beta-42 {
    @layer rdg.SortIcon {
        fill: currentColor;
        >path {
            transition: d .1s
        }
    }
}

.rnvodz57-0-0-beta-42 {
    @layer rdg.Defaults {
        *,:after,:before {
            box-sizing: inherit
        }
    }

    @layer rdg.Root {
        --rdg-color: #000;
        --rdg-border-color: #ddd;
        --rdg-summary-border-color: #aaa;
        --rdg-background-color: #fff;
        --rdg-header-background-color: #f9f9f9;
        --rdg-header-draggable-background-color: #e7e7e7;
        --rdg-row-hover-background-color: #f5f5f5;
        --rdg-row-selected-background-color: #dbecfa;
        --rdg-row-selected-hover-background-color: #c9e3f8;
        --rdg-checkbox-color: #005194;
        --rdg-checkbox-focus-color: #61b8ff;
        --rdg-checkbox-disabled-border-color: #ccc;
        --rdg-checkbox-disabled-background-color: #ddd;
        --rdg-selection-color: #66afe9;
        --rdg-font-size: 14px;
        display: grid;
        color-scheme: var(--rdg-color-scheme,light dark);
        contain: content;
        content-visibility: auto;
        block-size: 350px;
        border-left-color: var(--rdg-border-color);
        border-left-style: solid;
        border-left-width: 1px;
        border-bottom-color: var(--rdg-border-color);
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-right-color: var(--rdg-border-color);
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: var(--rdg-border-color);
        border-top-style: solid;
        border-top-width: 1px;
        box-sizing: border-box;
        overflow: auto;
        background-color: var(--rdg-background-color);
        color: var(--rdg-color);
        font-size: var(--rdg-font-size);
        &:before {
            content: "";
            grid-column: 1/-1;
            grid-row: 1/-1
        }

        &.rdg-dark {
            --rdg-color-scheme: dark;
            --rdg-color: #ddd;
            --rdg-border-color: #444;
            --rdg-summary-border-color: #555;
            --rdg-background-color: #212121;
            --rdg-header-background-color: #1b1b1b;
            --rdg-header-draggable-background-color: #2d2d2d;
            --rdg-row-hover-background-color: #171717;
            --rdg-row-selected-background-color: #1a73bc;
            --rdg-row-selected-hover-background-color: #1768ab;
            --rdg-checkbox-color: #94cfff;
            --rdg-checkbox-focus-color: #c7e6ff;
            --rdg-checkbox-disabled-border-color: #000;
            --rdg-checkbox-disabled-background-color: #333
        }

        &.rdg-light {
            --rdg-color-scheme: light
        }

        @media (prefers-color-scheme: dark) {
            &:not(.rdg-light) {
                --rdg-color:#ddd;
                --rdg-border-color: #444;
                --rdg-summary-border-color: #555;
                --rdg-background-color: #212121;
                --rdg-header-background-color: #1b1b1b;
                --rdg-header-draggable-background-color: #2d2d2d;
                --rdg-row-hover-background-color: #171717;
                --rdg-row-selected-background-color: #1a73bc;
                --rdg-row-selected-hover-background-color: #1768ab;
                --rdg-checkbox-color: #94cfff;
                --rdg-checkbox-focus-color: #c7e6ff;
                --rdg-checkbox-disabled-border-color: #000;
                --rdg-checkbox-disabled-background-color: #333
            }
        }
    }
}

.vlqv91k7-0-0-beta-42 {
    @layer rdg.Root {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        & .r1upfr807-0-0-beta-42 {
            cursor: move
        }
    }
}

.f1cte0lg7-0-0-beta-42,.f1lsfrzw7-0-0-beta-42,.s8wc6fl7-0-0-beta-42,.skuhp557-0-0-beta-42 {
    @layer rdg.SummaryRow {
        line-height: var(--rdg-summary-row-height);
        >.cj343x07-0-0-beta-42 {
            position: sticky
        }
    }
}

.tf8l5ub7-0-0-beta-42 {
    @layer rdg.SummaryRow {
        >.cj343x07-0-0-beta-42 {
            z-index: 2
        }

        >.csofj7r7-0-0-beta-42 {
            z-index: 3
        }
    }
}

.tb9ughf7-0-0-beta-42 {
    @layer rdg.SummaryRow {
        >.cj343x07-0-0-beta-42 {
            border-block-end:2px solid var(--rdg-summary-border-color)}
    }
}

.b1yssfnt7-0-0-beta-42 {
    @layer rdg.SummaryRow {
        >.cj343x07-0-0-beta-42 {
            border-block-start: 2px solid var(--rdg-summary-border-color)
        }
    }
}

.g1yxluv37-0-0-beta-42 {
    @layer rdg.GroupedRow {
        &:not([aria-selected=true]) {
            background-color: var(--rdg-header-background-color)
        }

        >.cj343x07-0-0-beta-42:not(:last-child):not(.ch2wcw87-0-0-beta-42) {
            border-inline-end:none}
    }
}

.t7vyx3i7-0-0-beta-42 {
    @layer rdg.TextEditor {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        inline-size: 100%;
        block-size: 100%;
        padding-block:0;padding-inline:6px;border-left-color: #ccc;
        border-left-style: solid;
        border-left-width: 2px;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-right-color: #ccc;
        border-right-style: solid;
        border-right-width: 2px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 2px;
        vertical-align: top;
        color: var(--rdg-color);
        background-color: var(--rdg-background-color);
        font-family: inherit;
        font-size: var(--rdg-font-size);
        &:focus {
            border-color: var(--rdg-selection-color);
            outline: none
        }

        &::-moz-placeholder {
            color: #999;
            opacity: 1
        }

        &::placeholder {
            color: #999;
            opacity: 1
        }
    }
}

[softmarshmallow]

[Solution for Nextjs 14 / tailwindcss users] Ok. here's the hotfix. for those who uses tailwindcss, you can notice nested error while building (found out the hard way - warning won't show by default, but if you copy & paste the css to your own css file, then import, it will tell which part is misconfigured.)

TL;DR (based on nextjs 14 + tailwindcss) Move your css import from .tsx (.js / .jsx) to globals.css

your-component-file.tsx

// remove this line
// import "react-data-grid/lib/styles.css";

your globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* add here - see https://github.com/adazzle/react-data-grid/issues/3460#issuecomment-2016837753 */
@import "react-data-grid/lib/styles.css";

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 255, 255, 255;
  --background-end-rgb: 255, 255, 255;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

postcss.config.js

module.exports = {
  plugins: {
    // added
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

[arvindbr95]

@softmarshmallow thank you this worked!

[softmarshmallow]

Update. It works on production build, but randomly fails when deployed (don't know why)

[Aluisio]

For me this solution stopped working after updating the library to version v7.0.0-beta.44

[hari-bhandari]

hi guys, any updates on this, ui crashes on production mode, using mui not tailwind

[Aluisio]

After testing further, I identified that the problem started with version 7.0.0-beta.42, where the styles were modified this topic. I'm using next 14.2.3 with pages folder and styled components. I also tested with app folder and tailwind and the problem persists.

[softmarshmallow]

Bumping nextjs from 14.1.1 -> 14.2.3 (latest at the moment) solved the issue, along with my previous comment https://github.com/adazzle/react-data-grid/issues/3460#issuecomment-2016837753

https://github.com/gridaco/grida/commit/ca59ddcaa77eb71a547e06c3ef2e560699b1e08d

[Aluisio]

@softmarshmallow My test was using version 14.2.3, and I still have the problem

[Phucthuhigh]

Has anyone found a solution yet? I've tried all of the solutions above and none of them worked. I've been stuck with this error for a week now and have no idea how to fix it.:(

[abindaz]

react-data-grid built with zero runtime, that's why occurs this error. You should import data grid css file globally.

I have created a global css file. Then, copied all CSS from react-data-grid. It fixes some of my issues, Like, Freezing particular columns is now working for me. For other features, you can customize the CSS file.

[softmarshmallow]

Sorry to confuse you guys. It seems to be related to nextjs build system, and for me, this only happens when deployed. local build always works fine. for even production deployment, it randomly works for certain build. (but 95% does not)

[softmarshmallow]

Can we get some attention from the team 🥺 @nstepien

[Phucthuhigh]

hmm this solution worked for me. But the resizable still has some bugs (idk why)

[softmarshmallow]

Checking this thread on daily basis. It really bugs me. I managed to work with some breaking styles with custom css, but unresolved problem is, that the selected cell won't hightlight (no border) on production (deployment) (it actually works fine on local production)

[softmarshmallow]

This issue is set of multiple styling issues. Let's break down and tackle one by one.

Case - Cell selection outline not showing on deployment

As you can see above, the outline property syntax is broken.

Hot fix: (replace with your own colors)

.rdg {
  --rdg-color: hsl(var(--foreground));
  --rdg-border-color: hsl(var(--border));
  --rdg-summary-border-color: hsl(var(--border));
  --rdg-background-color: hsl(var(--background));
  --rdg-header-background-color: hsl(var(--background));
  --rdg-header-draggable-background-color: hsl(var(--background));
  --rdg-row-hover-background-color: hsl(var(--muted));
  --rdg-row-selected-background-color: hsl(var(--muted));
  --rdg-row-selected-hover-background-color: hsl(var(--muted));
  --rdg-checkbox-color: hsl(207deg 100% 29%);
  --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
  --rdg-checkbox-disabled-border-color: #ccc;
  --rdg-checkbox-disabled-background-color: #ddd;

  --rdg-selection-color: hsl(var(--ring));
  --rdg-font-size: 13px;
  --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
}


.rdg-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--rdg-selection-color);
  outline: 2px solid var(--rdg-selection-color);
}

Here's my full custom css override for dedicated to this issue

.rdg {
  --rdg-color: hsl(var(--foreground));
  --rdg-border-color: hsl(var(--border));
  --rdg-summary-border-color: hsl(var(--border));
  --rdg-background-color: hsl(var(--background));
  --rdg-header-background-color: hsl(var(--background));
  --rdg-header-draggable-background-color: hsl(var(--background));
  --rdg-row-hover-background-color: hsl(var(--muted));
  --rdg-row-selected-background-color: hsl(var(--muted));
  --rdg-row-selected-hover-background-color: hsl(var(--muted));
  --rdg-checkbox-color: hsl(207deg 100% 29%);
  --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
  --rdg-checkbox-disabled-border-color: #ccc;
  --rdg-checkbox-disabled-background-color: #ddd;

  --rdg-selection-color: hsl(var(--ring));
  --rdg-font-size: 13px;
  --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
}

.rdg-header-row > .rdg-cell {
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}

.rdg-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--rdg-selection-color);
  outline: 2px solid var(--rdg-selection-color);
}

https://github.com/gridaco/grida/blob/main/apps/forms/scaffolds/grid/grid.css

[mooyeon-choi]

In Next.js version 14.2.5, the CSS properties using @layer are being overridden by subsequently written properties.

Due to this issue, bugs occur when applying resizable, draggable, or sortable properties, but since I'm not familiar with CSS @layer, I'm not sure if this is the intended behavior.

[itsdapi]

Disable the resizeable, raggable solve the header issues. But the editable cell style still crash. I noticed that the edit cell does not have width and mis placement

[amanmahajan7]

Is NextJS able to correctly bundle styles? We are using css layers

[amanmahajan7]

Closing due to inactivity. Please create a new bug with reproducible example if you are still facing issues.