Plasmic app Build failed
I didn’t set up a local code base for the project, I used the publish button in Plasmic Studio
I got the same Errors and more after I set up a local code base, here’s the Plasmic project ID: qDNA17RfdgsM73kkELPPxa and here’s the code repo: https://github.com/MrBiscuit/biscuitsite
Thank a ton in advance
Hey I was able to take a quick look! I spotted a few things, starting with the following:
• A few packages are missing, like framer-motion, @emotion/styled, @chakra-ui/react
• Multiple versions of React are pulled in, because react-simple-typewriter requires 18+ but the project has 17. You can try upgrading React 17 to 18
• (You can also compare the above to a brand-new clean Next.js site with create-plasmic-app for example)
• The registerComponent calls for some components seem to have wrong import specs, resulting in lines like this which lead to undefined errors: import {Countup} from 'react-countup'
LMK if that helps!
Omg thank you sooo much @yang , I’m on a bus from Madrid to Paris and then to Munich to join the Oktoberfest, but I will check this out asap
It’s has fewer errors now, and the problem boils down to Error: Element type is invalid: expected a string (for built-in components)
This error shows up when I register react-countup
code component, below is my registration code, and the package can be installed using yarn add 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,
},
},
});