TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')

[mihir-kanzariya]

I cloned your starter and modified it to run the editor at localhost:3000/demo. While I was able to launch the editor, I can't drag and drop sections from the sidebar, which results in an error.

I have a couple of questions. Can I create multiple pages? According to your README file, it seems possible, but that guidance doesn't seem to work. I can't get localhost:3000/demo to render as expected, and it throws various errors.

Sometimes I encounter "module not found: 'fs'" at build/server, and other times I get a {"error": "forbidden"} message.

This is a cool tool, but I think it needs more refactoring. I’m happy to assist with documentation, but I really need help resolving these issues.

mycode: https://github.com/mihir-kanzariya/destack-by-mihir

[mihir-kanzariya]

It runs smoothly at the root endpoint (localhost:3000).

[mihir-kanzariya]

[LiveDuo]

@mihir-kanzariya I tried git cloning the repo you send me earlier and it works on my machine. I see you are using Windows so it might be a windows specific problem. I also check the changes you made and they seem reasonable so being issue with Windows is very likely.

Another observation from the screenshots is that every API request returns a 404 which should not happen.

[mihir-kanzariya]

@LiveDuo

It works well on localhost:3000/ but not on localhost:3000/demo, where it encounters errors on multiple pages. You can test the localhost:3000/demo endpoint in my code.

Please check out the Loom video I recorded to reproduce the issue.https://www.loom.com/share/2258b8eb600d415d87b8def9f5b880ee?sid=d0adc25b-a675-48a2-9770-d26983d5655f

[LiveDuo]

@mihir-kanzariya Thanks for the video, I thought you are using Windows before but you are clearing using OSX.

I manage to reproduce the issue now and will take a closer look later today or tomorrow

[mihir-kanzariya]

Thank you @LiveDuo

let me know if I can help somewhere, I look forward to using this destack on my product marketing pages.

[meet-bhimani]

Yes, I am also facing the same issue when I try to use it with NextJS app router. I am working on Ubuntu - Linux machine

[meet-bhimani]

I am getting this error when trying to add below code in any of the component (i.e. root layout/page or other page) inside app directory

code:

export { getStaticProps } from "destack/build/server";
export { ContentProvider as default } from "destack";

[meet-bhimani]

Is there any typescript support? As i am getting this error also npm i --save-dev @types/destack is not working

[LiveDuo]

@mihir-kanzariya Just pushed a fix https://github.com/LiveDuo/destack/commit/511578388e55389180df3c8826707b74269835c5.

To get it update your destack version with npm i destack@latest.

[LiveDuo]

Yes, I am also facing the same issue when I try to use it with NextJS app router. I am working on Ubuntu - Linux machine

NextJs app router is not supported right now. There was some effort before https://github.com/LiveDuo/destack/issues/79 which solved it for earlier versions of Nextjs.

Is there any typescript support? As i am getting this error also npm i --save-dev @types/destack is not working

While the library is written in Typescript, there's no @types/destack. At this point, the build system (rollup, react, typescript) creates enough problems that I'm not sure it's the way to go. Work started on this with https://github.com/LiveDuo/destack/issues/104.

[meet-bhimani]

I am getting this another error while working with pages router:

Sometimes this error occurs and after restarting the application sometimes error is gone!

here is the code:

/pages/_app.tsx:

import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

/pages/index.tsx:

export { getStaticProps } from "destack/build/server";
export { ContentProvider as default } from "destack";

/pages/api/builder/handle.js:

export { handleEditor as default, config } from "destack/build/server";

[LiveDuo]

@meet-bhimani Can you create a repo to reproduce the error? It helps to have the exact dependencies that created the problem.

[meet-bhimani]

Sure, @LiveDuo here I am sharing both repo for pages router as well as app router:

pages router: https://github.com/meet-bhimani/destack-demo-nextjs-pages-router

app router: https://github.com/meet-bhimani/destack-demo-nextjs-app-router

I have upgraded to the latest version (i.e. ^3.0.8) but still facing this error

[meet-bhimani]

@LiveDuo here is the loom video for that issue:

https://www.loom.com/share/99720d1558a1431e887f2b7d0887008f?sid=3b540e59-4ad7-4efe-9bae-d12a659614e3

[mihir-kanzariya]

To get it update your destack version with npm i destack@latest.

Thanks @LiveDuo , resolved first error, Now I am getting

Module not found: Can't resolve 'fs' at ./node_modules/destack/build/server/index.js:6:1

[LiveDuo]

@meet-bhimani As mentioned before it's not a goal right now to support the app router. Yet, if you have a bugfix I'd be happy to review and merge a PR.

I've tried your pages demo and so far it works without throwing an error. In what scenerios did you see the errors that poping up?

[LiveDuo]

To get it update your destack version with npm i destack@latest.

Thanks @LiveDuo , resolved first error, Now I am getting

Module not found: Can't resolve 'fs' at ./node_modules/destack/build/server/index.js:6:1

@mihir-kanzariya Either you have a different setup or trying to do something different in destack that I haven't tried yet. Have to figure it out to investigate further.

[LiveDuo]

ps: quite strange that the Nextjs API route can't find fs

[mihir-kanzariya]

@LiveDuo I'm trying to make it work with the Next.js app router, but I'm having trouble getting it to function correctly.

Do you plan to support the next app router in Next.js in near future?

[LiveDuo]

@LiveDuo I'm trying to make it work with the Next.js app router, but I'm having trouble getting it to function correctly.

Do you plan to support the next app router in Next.js in near future?

@mihir-kanzariya Yes but there isn't a timeline for that. Next.js has an upgrade guide and there are relevant sections about API routes and getStaticProps that Destack uses https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration.

If anyone made a PR or suggest a solution for these issues I'd try to review them asap.

[meet-bhimani]

@LiveDuo Good news! I have integrated support for the Nextjs app router in your repo! I have created PR here take a look and let me know!

[LiveDuo]

@meet-bhimani thanks for the PR, let's continue the review there