GuidesTroubleshooting

Builder messages

Wrong API key

You are not using the correct API key

What this message means

It seems like you are using a wrong API key in the Makeswift client or API handler.

Possible ways to fix this

Check that the correct API key is passed to both the Makeswift client and API handler. If you’re using an environment variable for the Makeswift API key, make sure it’s set properly. Our installation guide explains how to set that up:

Page is not editable

There are no available elements to edit or the page is not integrated with Makeswift

What this message means

The page you are trying to edit is not editable in Makeswift. This can happen for a number of reasons:

  • the page is not integrated with Makeswift
  • your Next.js app is unable to communicate with the builder due to misconfiguration
  • there was an error fetching data from the builder

Possible ways to fix this

To make your page editable in Makeswift, please refer to our Quickstart guide.

If you see this message while trying to install Makeswift for your existing site, please make sure you have completed all the necessary steps in the Installation guide:

Manifest unreachable

The host manifest is unreachable

What this message means

Makeswift uses a host manifest to fetch metadata about your site. This metadata is used by the builder to determine what URL to use to route pages, what version of the runtime is running in the host, and what features are available in the host. If the host manifest is unreachable, the pages in the builder will not load properly.

Possible ways to fix this

Here is a list of things to check to make sure the host manifest is reachable:

1

Check that your Next.js app is running

Makeswift can only fetch the host manifest if your Next.js app is running. Make sure your Next.js app is running.

2

Check that the host URL is correct in the Makeswift host settings

If your Next.js app is running, check that the host URL including the host name and port are correct in the Makeswift host settings. Update the host URL if necessary.

3

Check that your API key is passed to the Makeswift API handler

Makeswift fetches the manifest from an API handler in your Next.js app. If you’re using an environment variable for the Makeswift API key, make sure it’s set properly. Our installation guide explains how to set that up:

4

Check that the Makeswift API handler is set up

Makeswift fetches the manifest from an API handler in your Next.js app. Make sure the API handler is set up correctly. See the Add the Makeswift API handler step of the installation guide for how to set it up:

Connection init timeout

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}