Hey there, I’m having a bit of trouble getting functional components to work with my next.js app. I’ve been able to set up the plasmic-host page, but I keep running into issues with refs for functional components. I’ve tried some of the examples here but I’m a little unclear as to where to put the script call in the plasmic-host file. Thank you!
import * as React from 'react';
import Script from 'next/script';
import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../plasmic-init';
export default function PlasmicHost() {
return (
PLASMIC && (
<div>
<Script src="<https://static1.plasmic.app/preamble.js>" strategy="beforeInteractive" />
<PlasmicCanvasHost />
</div>
)
);
}
^This works, but then functional components don’t work.
I’m unclear where a better place to put that script call would be. I’d like to keep it contained to the host page itself so the rest of the app doesn’t need to call it.
Was able to resolve the editor not showing anything by clearing my host app, so guess those are related
Hi! Can you give more details on what issues you’re seeing?
Hi @chungwu , I’m getting an error that my functional components are not importing properly because of refs, looking for guidance into how to load the script properly in a nextjs app to work w functional components
I’ve also tried wrapping the functional components and still have an error.
And the editor is not working for me at all when running off plasmic-host, no matter if i import components or not
At this point, I think it’s related to an issue with the host. Whether I try to import code components or not, I’m not able to use most of the editor functionality.
hmmm any chance you’re able to share your repo with us?
Unfortunately no
Can share a few files or code snippets that would be helpful though
which version of next.js and react are you using?
"react": "^17.0.2",
"next": "^12.0.7",