The preview layout doesn't show properly in Nextjs 13

[galacoder]

Hi there,

First of all, great job on this v2 version. Loving it.

As I am trying to integrate it into my existing website running Nextjs 13. And I figured out it doesn't work properly.

Please check the attachment and advise. Your help is pretty much appreciated :)

[LiveDuo]

Hey @galacoder, there's a chance this has to do with Windows. I'm still squishing out a few bugs and haven't tested on all operating systems.

Can you confirm if you are on Windows?

[galacoder]

Thanks for the timely response. I am not on Windows. I am using Mac Air M1. By the way, I found these errors in the console :

(425:1) postcss-import: @import must precede all other statements (besides @charset or empty @layer) warn - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[7].use[2]!./node_modules/destack/build/browser/index.css Warning

(425:1) postcss-import: @import must precede all other statements (besides @charset or empty @layer) error - TypeError: resolver is not a function at Object.apiResolver (/Users/sangle/dev/action/projects/@new-websites/sangletech-tailwindcss/node_modules/next/dist/server/api-utils/node.js:363:15) at DevServer.runApi (/Users/sangle/dev/action/projects/@new-websites/sangletech-tailwindcss/node_modules/next/dist/server/next-server.js:487:27) { page: '/api/builder/handle' }

[LiveDuo]

Thanks for sharing more info.

The second issue might be relevant. It states there are issues with PostCSS and the Destack local server. For reference, PostCSS shouldn't be loaded in the local server at all.

To look more into this it would be helpful if I can see the repo.

PS: If that's not possible, can you try cloning this repository and see if the issue exists?

[galacoder]

Hi Andreas. As this is a private project, I just added you to my repository with your gmail. Please help me to check the dev branch out. Your earliest help is very much appreciated. Thanks :)

[LiveDuo]

@galacoder I got your invitation. That makes things a lot easier.

I will check it out probably tomorrow or in the weekend.

Also want to give you a heads up as I see v1 installed in your main branch. The next version of the library (v2) won't be compatible with v1. Any page created with v1 should be recreated with v2.

[galacoder]

Thank you. Can you clone the dev branch instead? As I haven't merged to my main branch.

[LiveDuo]

Hey @galacoder,

I had a look in the dev branch and it was not an issue with PostCSS (that was just a warning). There's something missing from your setup and there was also a bug with nested pages (which is fixed now).

To get your repo working:

1. You have to fix the named import in pages/api/builder/handle.js that was changed from v1. It was handleData previously but now is handleEditor.

2. You have to update destack to the latest beta. You can do that easily with npm i destack@beta

[galacoder]

Hey Andreas. It's working beautifully now. Thank you for your time.

I just realised, though, that there isn't a way to activate the layer and editor left-panel like in Craft.js. Is that a result of you not integrating that? Because without that panel I can't really customise much of the UI.

Please advise!

[LiveDuo]

@galacoder

I just realised, though, that there isn't a way to activate the layer and editor left-panel like in Craft.js. Is that a result of you not integrating that? Because without that panel I can't really customise much of the UI.

Indeed you can't enable either the layers panel or the toolbar as of right now. There's are various reasons why that I want to explain further as well as the possible options.

If you don't mind, create a new discussion in https://github.com/LiveDuo/destack/discussions with what you said in your previous post (and the image). I'll go give more details there.