UI Crash from NextJS #3460

abindaz · 2024-02-21T05:21:04Z

Describe the bug

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

To Reproduce

npm run build
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

The text was updated successfully, but these errors were encountered:

abindaz · 2024-02-22T06:18:47Z

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 · 2024-02-26T11:46:13Z

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

softmarshmallow · 2024-03-24T14:32:14Z

This happens on production. works fine on dev

softmarshmallow · 2024-03-24T14:33:30Z

@abindaz Did you happen to solve this?

softmarshmallow · 2024-03-24T14:38:42Z

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 · 2024-03-24T14:54:13Z

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 · 2024-03-24T15:04:43Z

[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 · 2024-03-28T04:28:59Z

@softmarshmallow thank you this worked!

adazzle/react-data-grid#3460

softmarshmallow · 2024-05-07T00:49:22Z

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

Aluisio · 2024-05-20T18:55:37Z

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

hari-bhandari · 2024-05-22T11:27:55Z

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

Aluisio · 2024-05-23T14:51:51Z

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 · 2024-06-01T06:52:59Z

Bumping nextjs from 14.1.1 -> 14.2.3 (latest at the moment) solved the issue, along with my previous comment #3460 (comment)

gridaco/grida@ca59ddc

Aluisio · 2024-06-04T19:47:27Z

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

Phucthuhigh · 2024-06-05T19:01:39Z

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 · 2024-06-06T06:27:41Z

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 · 2024-06-07T14:41:07Z

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 · 2024-06-07T14:42:46Z

Can we get some attention from the team 🥺 @nstepien

Phucthuhigh · 2024-06-07T19:44:32Z

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

softmarshmallow · 2024-06-30T14:00:29Z

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 · 2024-07-02T13:39:00Z

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 · 2024-08-12T14:45:04Z

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 · 2024-09-14T10:41:56Z

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

abindaz added the Bug label Feb 21, 2024

softmarshmallow added a commit to gridaco/grida that referenced this issue Mar 24, 2024

fix rdg styles - adazzle/react-data-grid#3460 (comment)

6dcbba1

softmarshmallow mentioned this issue Mar 24, 2024

Quick Fix Forms Data Grid CSS gridaco/grida#70

Merged

ajhenry added a commit to github-community-projects/org-metrics-dashboard that referenced this issue Mar 28, 2024

fix: breaking change in react-data-table nesting styles

2f30f8b

adazzle/react-data-grid#3460

rafel mentioned this issue Apr 25, 2024

react-data-grid css design break when production mode in next.js project. #3492

Open

ZachSARAO mentioned this issue Jul 11, 2024

Rows not rendering in production #3541

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Crash from NextJS #3460

UI Crash from NextJS #3460

abindaz commented Feb 21, 2024

abindaz commented Feb 22, 2024

abenhamdine commented Feb 26, 2024

softmarshmallow commented Mar 24, 2024

softmarshmallow commented Mar 24, 2024

softmarshmallow commented Mar 24, 2024 •

edited

Loading

softmarshmallow commented Mar 24, 2024

softmarshmallow commented Mar 24, 2024 •

edited

Loading

arvindbr95 commented Mar 28, 2024

softmarshmallow commented May 7, 2024

Aluisio commented May 20, 2024

hari-bhandari commented May 22, 2024

Aluisio commented May 23, 2024

softmarshmallow commented Jun 1, 2024

Aluisio commented Jun 4, 2024

Phucthuhigh commented Jun 5, 2024

abindaz commented Jun 6, 2024

softmarshmallow commented Jun 7, 2024

softmarshmallow commented Jun 7, 2024

Phucthuhigh commented Jun 7, 2024

softmarshmallow commented Jun 30, 2024

softmarshmallow commented Jul 2, 2024 •

edited

Loading

mooyeon-choi commented Aug 12, 2024

itsdapi commented Sep 14, 2024

UI Crash from NextJS #3460

UI Crash from NextJS #3460

Comments

abindaz commented Feb 21, 2024

Describe the bug

To Reproduce

Expected behavior

Environment

abindaz commented Feb 22, 2024

abenhamdine commented Feb 26, 2024

softmarshmallow commented Mar 24, 2024

softmarshmallow commented Mar 24, 2024

softmarshmallow commented Mar 24, 2024 • edited Loading

softmarshmallow commented Mar 24, 2024

softmarshmallow commented Mar 24, 2024 • edited Loading

arvindbr95 commented Mar 28, 2024

softmarshmallow commented May 7, 2024

Aluisio commented May 20, 2024

hari-bhandari commented May 22, 2024

Aluisio commented May 23, 2024

softmarshmallow commented Jun 1, 2024

Aluisio commented Jun 4, 2024

Phucthuhigh commented Jun 5, 2024

abindaz commented Jun 6, 2024

softmarshmallow commented Jun 7, 2024

softmarshmallow commented Jun 7, 2024

Phucthuhigh commented Jun 7, 2024

softmarshmallow commented Jun 30, 2024

softmarshmallow commented Jul 2, 2024 • edited Loading

mooyeon-choi commented Aug 12, 2024

itsdapi commented Sep 14, 2024

softmarshmallow commented Mar 24, 2024 •

edited

Loading

softmarshmallow commented Mar 24, 2024 •

edited

Loading

softmarshmallow commented Jul 2, 2024 •

edited

Loading