[BUG] Error "$RefreshSig$ is not a function" if I use state in a nested component

[GorvGoyl]

What happened?

If I define a state in nested react component I get this error: $RefreshSig$ is not a function.

This bug is reproducible in latest plasmo version. Here's the code:

import { useState } from "react"

export const MainComponent = () => {
  const EmailComponent = () => {
    const [showTextEmailSent, setTextEmailSent] = useState(false)
    return <div>{showTextEmailSent && <div>Sent Again</div>}</div>
  }

  return (
    <div>
      <EmailComponent />
      <button>Send email</button>
    </div>
  )
}

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Microsoft Edge

Relevant log output

CountButton.tsx:4 
 Uncaught TypeError: $RefreshSig$ is not a function
    at MainComponent (CountButton.tsx:4:9)
    at renderWithHooks (react-dom.development.js:16307:7)
    at mountIndeterminateComponent (react-dom.development.js:20075:13)
    at beginWork (react-dom.development.js:21590:10)
    at beginWork$1 (react-dom.development.js:27427:14)
    at performUnitOfWork (react-dom.development.js:26563:3)
    at workLoopSync (react-dom.development.js:26468:1)
    at renderRootSync (react-dom.development.js:26435:7)
    at recoverFromConcurrentError (react-dom.development.js:25852:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25751:7)
MainComponent	@	CountButton.tsx:4
renderWithHooks	@	react-dom.development.js:16307
mountIndeterminateComponent	@	react-dom.development.js:20075
beginWork	@	react-dom.development.js:21590
beginWork$1	@	react-dom.development.js:27427
performUnitOfWork	@	react-dom.development.js:26563
workLoopSync	@	react-dom.development.js:26468
renderRootSync	@	react-dom.development.js:26435
recoverFromConcurrentError	@	react-dom.development.js:25852
performConcurrentWorkOnRoot	@	react-dom.development.js:25751
workLoop	@	scheduler.development.js:267
flushWork	@	scheduler.development.js:241
performWorkUntilDeadline	@	scheduler.development.js:534

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

That seems like an anti-pattern?... i.e component declared inside a component. Since it will continuously be re-rendered.

The issue is related to the react refresh runtime trying to inject into that func I think.

[GorvGoyl]

That seems like an anti-pattern?... i.e component declared inside a component. Since it will continuously be re-rendered.

Yes, it's not the recommended way, but the code is still valid, so it shouldn't throw a runtime error. It's interesting that if the nested component doesn't have a state or effect, then the issue doesn't occur.

The issue is related to the react refresh runtime trying to inject into that func I think.

Does this mean it's an issue with the third-party library and out of scope for this project?