simple-react-esm React code errors

[Jaanilj]

Hi! I really like the idea of this package! So thanks for that <3

However, I noticed a simple problem in simple-react-esm example when using React functions. I changed the button code in here to:

import { useState } from 'react'

const style = {
  background: '#a3e077',
  color: '#FFFFFF',
  padding: 12
}

export default Button = () => {
  const [count, setCount] = useState(0)

  const buttonClick = () => setCount((c) => c + 1)

  return <div style={style}>
    <span>Current count {count}</span>
    <button onClick={buttonClick}>Increment count</button>
  </div>
}

So I wanted to use useState (Shared from host-esm).

To my surprise, I got an error that Button is not defined. Looking at the built code, I see a weird build result that is not valid JS.

I fixed this and got a new error:

I think the React share doesn't work in the example...?

[Jiannan-dev]

@Jaanilj Hi, sorry, I've been a bit busy lately, so I'm just getting back to you now. I tried to run it using your code, but strangely enough, in my webstorm, this usage prompts an error, like this

Then I changed the code to the following

// i only modify here
export default function Button(){
  const [count, setCount] = useState(0)

  const buttonClick = () => setCount((c) => c + 1)

  return <div style={style}>
    <span>Current count {count}</span>
    <button onClick={buttonClick}>Increment count</button>
  </div>
}

Then I got the following result, and it looks like the display and buttons are working properly

Is there a limitation in export default that prevents it from running?

[philals]

I am having a similar issue

Changing from
const [count, setCount] = useState(0);
to
const [count, setCount] = React.useState(0);

Fixed it.

Will try a few other things