Encountered code component "..." that was not registred

Developer Support
1

Hi there,

I’ve create a new project with npx create-plasmic-app@latest in which i chose codegen specifically.

It immediatly tried to sync, which failed.

from project root, I then placed my component at ./components/UidButton.tsx.

And I registered it in ./pages/plasmic-host.tsx accordingly:

import * as React from 'react';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';
import { UidButton } from '../components/UidButton';

// 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(UidButton, {
  name: "UidButton",
  importPath: "./components/UidButton",
  props: {
    inputValue: { type: "string" },
    buttonText: { type: "string", defaultValue: "indienen" },
    className: { type: "class" },
    onClick: { type: "eventHandler", argTypes: [] },
    onSuccess: { type: "eventHandler", argTypes: [{ name: "successmsg", type: "string" }] },
    onError: { type: "eventHandler", argTypes: [{ name: "errormsg", type: "string" }] },
  },
});

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

The plasmic.json is generated at project root and srcDir is set to components.

When I run npx plasmic sync -p 4x1ZFiWT14tzYJu8FgRGdD I keep hitting the following error:

Plasmic error: Encountered code component "UidButton" that was not registered with an importPath, so we don't know where to import this component from.

I’m out of options here and not sure what im doing wrong.

Anyone who can provide me with some insights in what might be causing this?

Thanks,

Relevant links:

2

Hello @nathan_b, are you sure the importPath is correct relative to the plasmic.json file? Also, here are some relevant topics that you can check to help solve this:

https://forum.plasmic.app/t/encountered-code-component-that-was-not-registered-with-an-importpath-but-it-has-been/8754/8

https://forum.plasmic.app/t/encountered-code-component-that-was-not-registered-with-an-importpath-but-it-has-been/8754/9

3

Hi @sarah_ahmed,

Thanks for your quick response.

My plasmic.json is generated as the following.

{
  "platform": "nextjs",
  "code": {
    "lang": "ts",
    "scheme": "blackbox",
    "reactRuntime": "classic"
  },
  "style": {
    "scheme": "css-modules",
    "defaultStyleCssFilePath": ""
  },
  "images": {
    "scheme": "public-files",
    "publicDir": "../public",
    "publicUrlPrefix": "/"
  },
  "tokens": {
    "scheme": "theo",
    "tokensFilePath": "plasmic-tokens.theo.json"
  },
  "srcDir": "components",
  "defaultPlasmicDir": "./plasmic",
  "projects": [],
  "globalVariants": {
    "variantGroups": []
  },
  "wrapPagesWithGlobalContexts": true,
  "nextjsConfig": {
    "pagesDir": "../pages"
  },
  "cliVersion": "0.1.340",
  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.340/dist/plasmic.schema.json"
}

My project directory is generated as the following;

my-app/
├── components/
│ ├── plasmic/
│ └── UidButton.tsx
├── pages/
│ └── plasmic-host.tsx
└── plasmic.json

Since srcDir is set to components, I have tried to change importPath to ./UidButton but I keep hitting the same error.

4

Perhaps you need to refresh Plasmic Studio doesn’t know about the importPath because you added the importPath recently? Can you try opening up your project with the app host running to tell Plasmic about the importPath? Then try to plasmic sync again.

5

Hi @jason,

Thank you for your response.

This was indeed the issue :slight_smile: