Any easy way to debug component errors?

Developer Support
1

Is there any easy way to debug compent errors? It justs error value must not be undefined or null code component is expected to have an implementation… so I am clearly doing something very very wrong

2

Hmmmm, I believe this error happens if Plasmic studio can not find the implementation for your component, for example if you register a component that does not exist:

PLASMIC.registerComponent(null, { ... });
3

is that I am using js not ts a possible cause of it?

4

I have tried moving the file everywhere

5

is that I am using js not ts a possible cause of it?
No, although TS helps avoiding type errors

6

I have tried moving the file everywhere
You mean your component file? Can you share your plasmic-init file (assuming that’s the file where you’re registering your component)?

7

yea I mean the first import works so I presume its an issue of the second import reference

8

No I put the registion in like EVERY file. I had it in plasmic-host, _app, and and had it in plasmic init

9

none worked though i dont currently have a plasmic init file. It doesnt seem the CLI generates one if you use codegen

10

Yeah, if you’re using codegen you don’t need a plasmic-init file. Can you share your plasmic-host, then?

11

(no content)

12

like the url domain im running from local host right now

13

or u just need like a project id

14

I mean plasmic-host.jsx file contents

15 
import * as React from 'react';
import Script from 'next/script';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
import {FormHook } from "/components/CodeComponents/Form"

// You can register any code components that you want to use here; see
// <https://docs.plasmic.app/learn/code-components-ref/>
// And configure your Plasmic project to use the host url pointing at
// the /plasmic-host page of your nextjs app (for example,
// <http://localhost:3000/plasmic-host>).  See
// <https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host>

// registerComponent(...)
registerComponent(FormHook, {
  name: 'FormHook',
  props: {
    name: 'string',
    dob: 'string',
  },
  importPath: "../components/CodeComponents/Form",
});


export default function PlasmicHost() {
  return <PlasmicCanvasHost />;
}
16

ive moved the import path to every variation of that

17

for importPath the top import works fine

18

I believe you should replace:

import {FormHook } from "/components/CodeComponents/Form"

with a relative path to your code component:

import { FormHook } from "../components/CodeComponents/Form";

because I don’t think you can use absolute imports like “/components/…” in Next.js :thinking_face:

19

yea ive tried that part

20

Can you share your components/CodeComponents/Form file?