Cannot get custom component app hosting to work

Developer Support
1

Hello everyone and happy New Year!
I’m trying to add a custom component from my NextJS project to my Plasmic project by using the plasmic-host method, but when I run the dev server and add the <http://localhost:3000> to the host field, it simply never loads and I get the plasmic host error.
This is my /src/pages/plasmic-host.tsx file:

import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
import * as React from 'react';

import { PLASMIC } from '../../plasmic-init';
import Script from "next/script";

export default function PlasmicHost() {
  return (
    PLASMIC && (
      <div>
        <Script src="<https://static1.plasmic.app/preamble.js>" strategy="beforeInteractive" />
        <PlasmicCanvasHost />
      </div>
    )
  );
}

Regards, David.

2

Hello! What’s the error you’re seeing?

3

Your host field should probably be <http://localhost:3000/plasmic-host> instead

4

Thanks for your reply. Yes, I’m adding that full URL to the host field. In the plasmic UI i’m not seeing any error but a simple right-top poup about a possible wrong URL

5

Hello again and sorry for disturbing, but I’m still having this problem

6

hmm, when you open the project, do you see that your nextjs dev server received a request?

7

Yes, I do see. Everything seems correctly except for the browser showing a blank screen.