Page editor broken with latest version of Next? about destack HOT 16 CLOSED

I confirm the same issue happening for me.
I used the recommended method for new next projects (i.e. by cloning destack-starter)

from destack.

Even the starter pack still has the same issue. Which node version do you use?

from destack.

Just tested destack-react-starter and it works

from destack.

@sergor5 in destack-starter's package.json main branch, I have

"next": "12.2.0"

The bug dates from yesterday for me.

from destack.

I've found what causes the issue:

• installing destack as it's shown in the docs through npm i destack or yarn add destack causes it to install the version ^1.0.3, while we need to use the version ^0.12.0.
• also destack-starter uses the version ^1.0.3 too (which causes the problem), while destack-react-starter uses the version ^0.12.0. by default.

Shortly, for it to work now, install destack this way:

• npm i destack@^0.12.0
  or
• yarn add destack@^0.12.0

from destack.

@ARMBouhali
Found a better solution:
just install grapesjs 😅 and then it starts working with the latest destack(currently destack@^1.0.3)

npm i grapesjs
or
yarn add grapesjs

from destack.

Btw latest vesion grapesjs breaks some of the CSS in destack. The version 0.17.29 is the latest one that works properly.

So install it like:
npm i [email protected]
or
yarn add [email protected]

from destack.

Update:
destack@^1.0.3 doesn't work with grapesjs under version 0.18.1, so version 0.17.29 won't work.
It works fine if the vesion grapesjs is 0.18.1 or above
but has CSS issues like:

from destack.

[email protected] works with [email protected]

So for now, while installing destack use this:
npm i destack@^0.12.0 grapesjs@^0.17.29
or
yarn add destack@^0.12.0 grapesjs@^0.17.29

from destack.

@sergor5 Thank you for the quick feedback.
I prefer waiting for next@13 to be supported to future-proof my new project.

from destack.

after some adjustments in CSS, destack@^1.0.3 + grapesjs@^0.20.1 + next@^13.0.2 works good enough.

npm i destack@^1.0.3 grapesjs@^0.20.1
or
yarn add destack@^1.0.3 grapesjs@^0.20.1

Just add this CSS to file globals.css.

html,
body {
  padding: 0;
  margin: 0;
} 

.gjs-layer-caret{
  top: 4px !important;
  transform: none !important;
}

.gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector .gjs-sm-title, .gjs-clm-tags .gjs-sm-title {
  font-weight: lighter;
  background-color: rgba(0,0,0,.1);
  letter-spacing: 1px;
  padding: 9px 10px 9px 20px;
  border-bottom: 1px solid rgba(0,0,0,.25);
  text-align: left;
  position: relative;
  cursor: pointer;
}

.gjs-sm-sector #gjs-sm-caret, .gjs-clm-tags #gjs-sm-caret {
  padding-right: 5px;
  font-size: 11px;
}
.gjs-toolbar-item {
  padding: 5px 7px !important;
  font-size: .8rem;
  cursor: pointer;
  width: 26px;
  vertical-align: middle;
  display: inline-block;
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-layer #gjs-sm-preview, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer #gjs-sm-preview, .gjs-sm-sector .gjs-sm-property .gjs-sm-layer #gjs-sm-preview-box, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer #gjs-sm-preview-box {
  border-radius: 2px;
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-layer>#gjs-sm-preview-box, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer>#gjs-sm-preview-box {
  height: 15px;
  position: absolute;
  right: 27px;
  top: 6px;
  width: 15px;
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-layer>#gjs-sm-preview-box #gjs-sm-preview, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer>#gjs-sm-preview-box #gjs-sm-preview {
  background-color: #fff;
  height: 100%;
  width: 100%;
  background-size: cover !important;
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-layer #gjs-sm-close-layer, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer #gjs-sm-close-layer {
  display: block;
  font-size: 23px;
  position: absolute;
  cursor: pointer;
  right: 5px;
  top: 0;
  opacity: .5;
  filter: alpha(opacity=50);
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-layer, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer {
  background-color: rgba(255,255,255,.055);
  border-radius: 2px;
  margin: 2px 0;
  padding: 7px;
  position: relative;
  cursor: pointer;
}

.gjs-checker-bg, .gjs-field-colorp-c, .checker-bg, .gjs-sm-sector .gjs-sm-property .gjs-sm-layer>#gjs-sm-preview-box, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer>#gjs-sm-preview-box {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
}

.gjs-sm-sector .gjs-sm-stack #gjs-sm-add, .gjs-clm-tags .gjs-sm-stack #gjs-sm-add {
  padding: 1px 6px !important;
  width: revert;
  height:revert;
  font-size: 22px !important;
  top: -22px !important;
}

.gjs-sm-sector .gjs-sm-field, .gjs-clm-tags .gjs-sm-field, .gjs-sm-sector .gjs-clm-select, .gjs-clm-tags .gjs-clm-select, .gjs-sm-sector .gjs-clm-field, .gjs-clm-tags .gjs-clm-field {
  width: 100%;
  position: relative;
  display: block !important;
}

.gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-select input, .gjs-clm-tags .gjs-clm-select input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-select select, .gjs-clm-tags .gjs-clm-select select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
    color: #6366f1 !important;
    background-color: #dddada !important;
}

.gjs-sm-layer.gjs-sm-active {
  background-color: rgb(72 72 72 / 12%) !important;
}

from destack.

I finally get to reproduce the issue locally by deleting my node_modules.

Some things I found looking into this:

1. The issue is because of Grapesjs CSS imports

The issue is because grapes is not resolved as a dependency nor do grapesjs CSS imports. The line that creates this issue is the following: import 'grapesjs/dist/css/grapes.min.css'.

On the contrary, if the project has or had grapesjs as a dependency it should resolve the CSS and Destack will work (to the best of my knowledge).

2. Is not affected. by Destack, react or next.js version

I tested it with different version of destack (including 0.12.0 and 1.0.3) and different versions of react (17 and 18) and nextjs (12 and 13) and the issue persists. If someone has a different experience might be good to delete node_modules do npm i again and then report it here (along with details of your setup).

from destack.

The suggested solution for now is to install grapes v0.17 manually:
ie. npm i [email protected]

PS: Indeed [email protected] breaks some CSS (thanks @sergor5 for the investigation). It has to do with a few CSS overrides Destack has.

from destack.

As a side note:

The reason this happens is not known yet and I'm very curious to learn what it is as I didn't changed anything with my setup and from my understanding nor did most people.

One possibility is that that is caused by [email protected] which was had releases recently. It shouldn't changed anything as it's a patch version but these things happen.

from destack.

@SyDant

What's the setup you are facing the issue on? Node.js / React / Next.js versions?

Have you tried #54 (comment) solution?

from destack.

@SyDant

On my machine it's working after npm i [email protected].

I want to look into it but I need a way to reproduce the issue.

from destack.