Error from registering code component

Developer Support
1

This Error occured when I visit localhost:3000 after registered react-countup code component in codegen, to reproduce this Error, simply npx create-plasmic-app to create a new plasmic app and then yarn add react-countup and then import and register like this:

import * as React from 'react';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
import CountUp from "react-countup";
registerComponent(CountUp, {
  name: "CountUp",
  importPath: "react-countup",
  props: {
    start: {
      type: "number",
      description: "The number to start counting from",
      defaultValue: 0,
    },
    end: {
      type: "number",
      description: "The number to count up to",
    },
    duration: {
      type: "number",
      description: "Duration in seconds",
      defaultValue: 2.75,
    },
    delay: {
      type: "number",
      description: "Number of seconds to delay before starting the animation",
      defaultValue: 0,
    },
    useEasing: {
      type: "boolean",
      description: "Whether to use easing functions or linear transition.",
      defaultValue: true,
    },
    decimals: {
      type: "number",
      defaultValue: 0,
    },
    separator: {
      type: "string",
      description: "The string used to separate the groups of thousands",
      defaultValue: ",",
    },
    decimal: {
      type: "string",
      description: "The string used to separate the decimal",
      defaultValue: ".",
    },
    prefix: {
      type: "string",
      description: "The string used as a prefix for the number",
      defaultValue: "",
    },
    suffix: {
      type: "string",
      description: "The string used as a suffix for the number",
      defaultValue: "",
    },
    enableScrollSpy: {
      type: "boolean",
      description: "Enables start animation when target is in view",
      defaultValue: false,
    },
  },
});
export default function PlasmicHost() {
  return <PlasmicCanvasHost />;
}

Any one have an idea how to solve this kind of issues?

image.png
image.png1504×1058 102 KB

2

can you try adding isDefaultExport: true to the component registration?

3

Sure

4

Oh wow now it works, @victor I wonder why is that?

5

Oh WOW :scream_cat: so much to learn

6

it tells plasmic it should import the component as:

import CountUp from "react-countup";

instead of:

import { CountUp } from "react-countup";
7

Thank you Victor

8

Got it