Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Crash from NextJS #3460

Open
abindaz opened this issue Feb 21, 2024 · 24 comments
Open

UI Crash from NextJS #3460

abindaz opened this issue Feb 21, 2024 · 24 comments
Labels

Comments

@abindaz
Copy link

abindaz commented Feb 21, 2024

Describe the bug

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

image

To Reproduce

  1. npm run build
  2. npm run start

Expected behavior

image

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 abindaz added the Bug label Feb 21, 2024
@abindaz
Copy link
Author

abindaz commented Feb 22, 2024

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
Copy link

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

@softmarshmallow
Copy link

This happens on production. works fine on dev

@softmarshmallow
Copy link

@abindaz Did you happen to solve this?

@softmarshmallow
Copy link

softmarshmallow commented Mar 24, 2024

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
Copy link

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
Copy link

softmarshmallow commented Mar 24, 2024

[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
Copy link

@softmarshmallow thank you this worked!

@softmarshmallow
Copy link

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

@Aluisio
Copy link

Aluisio commented May 20, 2024

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

@hari-bhandari
Copy link

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

@Aluisio
Copy link

Aluisio commented May 23, 2024

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
Copy link

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
Copy link

Aluisio commented Jun 4, 2024

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

@Phucthuhigh
Copy link

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
Copy link
Author

abindaz commented Jun 6, 2024

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
Copy link

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
Copy link

Can we get some attention from the team 🥺 @nstepien

@Phucthuhigh
Copy link

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

@softmarshmallow
Copy link

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
Copy link

softmarshmallow commented Jul 2, 2024

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

Screenshot 2024-07-02 at 10 36 11 PM Screenshot 2024-07-02 at 10 36 14 PM

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
Copy link

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

image

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
Copy link

itsdapi commented Sep 14, 2024

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

CleanShot 2024-09-14 at 18 33 25

@amanmahajan7
Copy link
Contributor

amanmahajan7 commented Nov 22, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

10 participants