Page editor broken with latest version of Next?

[DavidPIsaac]

Followed install instructions except used 'npx create-next-app@latest'.
Dragging a component from the picker to a page places an image of the component instead of the component.
Please advise. Thx.

[ARMBouhali]

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

[sergor5]

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

[sergor5]

Just tested destack-react-starter and it works

[ARMBouhali]

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

"next": "12.2.0"

The bug dates from yesterday for me.

[sergor5]

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

[sergor5]

@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

[sergor5]

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]

[sergor5]

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:

[sergor5]

[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

[ARMBouhali]

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

[sergor5]

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;
}

[LiveDuo]

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).

[LiveDuo]

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.

[LiveDuo]

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.

[SyDant]

yea i got problem when try run

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'CodeMirror')

Call Stack
<unknown>
<anonymous> (7:17)

[LiveDuo]

@SyDant

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

Have you tried #54 (comment) solution?

[SyDant]

i'm not create next/reach app just fork destack-starter
npm i and npm run dev
then i got this
`Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'CodeMirror')

Call Stack

(7:17)`

and when i drag component from library, they just become image not properly component
then i use npm i [email protected] and npm run dev > working perfect
but still have Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'CodeMirror')

[LiveDuo]

@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.