[bug] create-widget-app does not support importing React hooks

[hydrosquall]

Steps

When code.tsx from the create-widget-app example is modified to a minimal example with state management:

import * as React from "react"

function Widget() {
  const [ text, setText ] = React.useState('Hello World')
 
  return <div>{text}</div> 
}

This error gets logged to the console when you try to import the widget:

SyntaxError: possible import expression rejected around line 1

Screenshot: https://a.cl.ly/GGu4957G

It looks a lot like this error (figma/plugin-typings#36), except it's with a React core library rather than Endo, so it may be harder to patch.

Update

• I realized after writing this report that React hooks are not permitted in the code.tsx file, but I was confused earlier because they were permitted in the UI panel file. The fix is to use useSyncedState from the figma.widget API instead.

I'm filing this report anyways in case someone googling this error message may benefit and save themselves some trouble 😅