Messages

Your page did not connect to the builder in time.

Editing a page in the Makeswift Visual Builder requires your page to establish a connection with the builder. This message means that your page did not initialize this connection in time.

Possible ways to fix this

Runtime v0.24 and later

In v0.24 and later, the connection is automatically initiated by the ReactRuntimeProvider. Make sure you have correctly rendered the ReactRuntimeProvider and are passing a correct value for the previewMode (in v0.24) or siteVersion (in v0.25+) prop. For more details, see our installation guides:

Runtime v0.23 and earlier

For v0.23 and earlier, the connection is initiated by the DraftModeScript or PreviewModeScript components for App Router and Pages Router, respectively. This message indicates that these components are likely missing from your page.

App Router

Make sure you have added the DraftModeScript component to the <head> of your page by rendering it in the root layout.

src/app/layout.tsx
1import { draftMode } from "next/headers";
2+ import { DraftModeScript } from "@makeswift/runtime/next/server";
3import { MakeswiftProvider } from "../../../../makeswift/provider";
4import "../../../../makeswift/components";
5
6export default async function RootLayout({
7  children,
8}: Readonly<{
9  children: React.ReactNode;
10}>) {
11  return (
12    <html lang="en">
13      <head>
14+       <DraftModeScript />
15      </head>
16      <body>
17        <MakeswiftProvider previewMode={(await draftMode()).isEnabled}>
18          {children}
19        </MakeswiftProvider>
20      </body>
21    </html>
22  );
23}

Pages Router

Make sure you have added the PreviewModeScript component to the <Head> of the page by extending the custom document.

src/pages/_document.tsx
1import { Html, Head, Main, NextScript } from "next/document";
2+ import { PreviewModeScript } from "@makeswift/runtime/next";
3import { Document } from "@makeswift/runtime/next/document";
4
5export default class MyDocument extends Document {
6  render() {
7    return (
8      <Html>
9        <Head>
10+         <PreviewModeScript isPreview={this.props.__NEXT_DATA__.isPreview} />
11        </Head>
12        <body>
13          <Main />
14          <NextScript />
15        </body>
16      </Html>
17    );
18  }
19}