Unable to import custom component into Plasmic Studio in Next.js

Developer Support
1

Hi, I am unable to import a custom code component Task in Plasmic Studio in Next.js.

If I understand it correctly, the component should appear in Plasmic Studio after plasmic-init.tsx is run, but no component appears.

Here is my plasmic-init.tsx:

import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
import Task from "./components/Task";

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: "project_id",  // ID of a project you are using
      token: "token"  // API token for that project
    }
  ],

  preview: true,
})
PLASMIC.registerComponent(Task, {
  name: 'Task',
  props: {
    content: "string"
},
  importPath: './components/Task',
  isDefaultExport: true
})

Here is the Task component:

import React from "react"
export default class Task extends React.Component {
  render() {
    return (
      <div className="list-item" style={{"background-color": "#faaaaa"}}>
        <input type="text" value={this.props.content} readOnly={true} />
      </div>
    )
  };
}

I would really appreciate your help!

Many thanks,
guusto

2

Have you configured an app host?
https://docs.plasmic.app/learn/app-hosting/#gatsby-focus-wrapper

This is required for code components to show up

3

Hi, thank you very much, I forgot to configue the project app host, that was the issue!

However, now after setting <http://localhost:3000/plasmic-host> as the plasmic host, studio.plasmic.app hasn’t loaded yet after 5 minutes. What may be the issue ?

4

It may be that your plasmic-host page is not rendering <PlasmicCanvasHost />?

5

Do you have an idea what may be causing this?

My plasmic-host.tsx is copied directly from the docs:

import * as React from 'react';
import { PlasmicCanvasHost } from '@plasmicapp/host';
import Head from 'next/head';

export default function Host() {
  return (
    <div>
      <Head>
        {/* Optional: */}
        <script src="<https://static1.plasmic.app/preamble.js>" />
      </Head>
      <PlasmicCanvasHost />
    </div>
  );
}
6

OK, the hosting works now, according to <http://localhost:3000/plasmic-host> - the internet connection caused the long loading times. Thank you!

However, I still can’t see my custom “Task” component in Studio. Should it be there or do I need to look somewhere else?

7

@voluntary_rook Can you try ensuring your plasmic-host.tsx page is importing your plasmic-init?

8

Sorry, I am new to React / Next.js, would you kindly tell me how to do it?

Edit:
I tried adding import '../plasmic-init'; in plasmic-host.tsx, but to no avail. Not sure if this is what you meant though.

9

That looks right…

What if you try the quickstart instructions here? https://docs.plasmic.app/learn/app-hosting/#quickstart-with-an-example-repo That should give you something that is already working, as a starting point.

10

Thanks, I will try it!

11

It works! I mistakengly tried searching for my code component on the artboard instead of trying to add it to the canvas :flushed:

Thanks to y’all @yang @ray @chungwu, Plasmic has an amazing and helpful community!

12

wonderful! Excited for you to try the feature!