Troubleshooting

AnchorComponents aren't interactive in builder when using next/dynamic

Unfortunately, next/dynamic changes the ref exposed by the component when the suspense option is not set to true. If you're not using suspense: true, you will need a special helper function to forward the ref.

import dynamic from 'next/dynamic'
import { forwardNextDynamicRef } from '@makeswift/runtime/next'
import { ReactRuntime } from '@makeswift/runtime/react'

const DynamicHeader = forwardNextDynamicRef(
  patch => dynamic(() => patch(import('../components/header'))
)

ReactRuntime.registerComponent(DynamicHeader, {
  type: 'header',
  label: 'Header',
  props: {
    /* Header props... */
  },
})

AnchorBuilder isn't loading in Safari

If you're using Safari and the builder isn't loading, it's likely that you're running into issues with mixed content.

Safari blocks loading of all mixed-content resources, which means that https://app.makeswift.com, which is loaded via HTTPS, can't load http://localhost:3000, which is loaded via HTTP.

The solution to this issue is to run your local Next.js app with HTTPS. If you're not familiar with running your Next.js app locally with HTTPS, we've explained how to do so in this blog post.

AnchorBuilder isn't loading in Brave Browser

If you're using Brave and the builder isn't loading, it's likely you're running into issues with Brave Shields and its restrictions on localhost.

After #463 was merged, Brave blocks requests to localhost from non-localhost documents.

To solve this issue, go to brave://adblock and add the following custom filter:

@@||localhost^$domain=app.makeswift.com

This will make it so that Brave Shields doesn't block localhost requests from app.makeswift.com.