Getting this error trying to register this component

Developer Support
1

I’m getting this error when trying to register this component:

import React from 'react'
import Button from "@chakra-ui/react"
import { LiveProvider, LiveEditor, LivePreview } from 'react-live'

const scope = { Button }

const code = `
  <Button variant="secondary" title="my title" />
`

export const ButtonPreview = () => {
  return (
    <LiveProvider code={code} scope={scope}>
      <LiveEditor style={{ height: '100px', background: '#000', color: '#fff' }} />
      <LivePreview style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '50px' }} />
    </LiveProvider>
  )
}

  registerComponent(ButtonPreview, {
    name: 'ButtonPreview',
    importPath: './styles/ButtonPreview',
    props: {
    }
  })

Any clues?

image.png

2

hmm this usually means you ended up calling React.createElement(undefined), or, one of these “components” in your snippet are actually not a component but just undefined. You could try making code not use Button and just render a safe string instead and see

3

I need to think more like a dev…

const code = `
  TEST
`

works!

4

image.png

5

I changed export to:

const ButtonPreview = () => {
  return (
    <LiveProvider code={code} scope={scope}>
      <LiveEditor style={{ height: '100px', background: '#000', color: '#fff' }} />
      <LivePreview style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '50px' }} />
    </LiveProvider>
  )
}

export default ButtonPreview;

and it works:

image.png

6

Right now it’s hard to know when I have a REACT ONLY issue, so apologies and I’ll try remember to first test outside of Plasmic.