Component not found on page

Developer Support
1

I am trying to register a custom component.

So far I was able to make it show up in plasmic studio, but once I publish it my code (project created via CLI / codegen), I see this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of PlasmicHomepage.

I guess the issue is that I need to register it on every page where I use it.
The documentation says:

You must provide your registration calls ahead of wherever they will be needed, which includes two places:

  • The <PlasmicHost/> (/plasmic-host) page, for Plasmic Studio.
  • Wherever <PlasmicComponent/> is rendered, for your final pages.

This is why we typically conventionally place them in plasmic-init.ts, and import this into both types of locations.

I can’t find the file plasmic-init.ts though.

Further down it says

Typically you should perform your registerations in your plasmic-host.tsx page.

… that’s what I tried:

import NextImage from "../components/NextImage"; 

registerComponent(NextImage, {
  name: "NextImage",
  props: {
    src: "imageUrl",
    alt: "string",
    width: "number",
    height: "number",
    sizes: "string",
    fill: "boolean",
    priority: "boolean",
  },
  importPath: "./components/NextImage"
});

My NextImage looks like that:

// components/NextImage.tsx
import Image, { ImageProps } from "next/image";
import React from "react";

const NextImage = ({ src, alt, ...rest }: ImageProps) => {
  return <Image alt={alt} src={src} {...rest} />;
};

export default NextImage;

Any suggestion on how I can resolve that error?
Do I need to actually import the component on every single page or can I somehow automate that, so that a designer can create pages / use custom components, without the need of adding import statements to each page.

Thanks!

2

any idea? Still struggling here… Thanks!

3

Depending on how you set your project up, it may be plasmic-init.js. If you don’t have that file, then I’m guessing you’re hard coding the init in each plasmic page?

Anyway, I came to the forums because I was having a similar issue. My problem was that I wasn’t including rendering of the PLASMIC global before I rendered PlasmicCanvasHost in plasmic-host.tsx. This worked for me:

import { PlasmicCanvasHost } from "@plasmicapp/loader-react";
import React from "react";
import { PLASMIC } from "../plasmic-init";

export default function PlasmicHostRoute() {
  return PLASMIC && <PlasmicCanvasHost />;
}
4

Hi @clemens_vie, in this case I think you need to add isDefaultExport: true. By default, we assume the component is a named export, but looks like you are only exporting default.

Docs: Code components API reference | Learn Plasmic

Note you are using codegen, not loader API, which is why there is no plasmic-init.ts.

1 Like
5

Thanks a lot, the solution was to simply remove “export default NextImage;” from the component.

6

Just to clarify, you removed export default NextImage but also added export const NextImage = ...?

1 Like
7

That’s how I did it:

plasmic-host.tsx:

import * as React from 'react';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';
import Image, { ImageProps } from "next/image";

import { NextImage } from "../components/NextImage";

registerComponent(NextImage, {
  name: "NextImage",
  props: {
    src: "imageUrl",
    alt: "string",
    width: "number",
    height: "number",
    sizes: "string",
    fill: "boolean",
    priority: "boolean",
  },
  importPath: "./components/NextImage",
  importName: "NextImage"  // Explicitly specifying the named export
});

// Default export required by Next.js for pages
export default function PlasmicHost() {
  return <PlasmicCanvasHost />;
}

NextImage.tsx:

import Image, { ImageProps } from "next/image";
import React from "react";

export const NextImage = ({ src, alt, ...rest }: ImageProps) => {
  return <Image alt={alt} src={src} {...rest} />;
};