[BUG] Cannot find module 'react' inside a CSUI

What happened?

Unable to import hooks from react such as useState or useEffect, I got the following error: Uncaught Error: Cannot find module 'react'

This happens on a CSUI named contents/widget.tsx with TailwindCSS setup:

import cssText from "data-text:~style.css";

import type { PlasmoCSConfig, PlasmoGetStyle } from "plasmo";
import { useState } from "react";

export const config: PlasmoCSConfig = {
  matches: ["[REDACTED]"],
};

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style");

  style.textContent = cssText;

  return style;
}

const Widget = () => {
  const [activeSearch, setActiveSearch] = useState(false);

  return (
    <div className="w-[320px] absolute lg:top-[60px] lg:left-[500px] bg-white p-4 shadow-md antialiased rounded-md">
      <button
        type="button"
        className="flex items-center justify-center w-full text-base text-white bg-zinc-900 hover:bg-zinc-800 focus:outline-none px-6 py-1.5 font-medium rounded-md"
      >
        [REDACTED]
      </button>
    </div>
  );
};

export default Widget;

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

❯ npm run dev             

> plasmo-project@0.0.1 dev
> plasmo dev

🟣 Plasmo v0.83.0
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Loaded environment variables from: []
🟢 DONE   | Extension re-packaged in 1346ms! 🚀

(OPTIONAL) Contribution

[ ] I would like to fix this BUG via a PR

Code of Conduct

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

PlasmoHQ / plasmo

[BUG] Cannot find module 'react' inside a CSUI #799