WXT Generating Types for React Causes `ReferenceError: useState is not defined` and more
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10.5k
- Forks
- 564
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
This is a provider that I have:
import { createContext, FC } from "react";
import z from "zod";
import { en } from "zod/locales";
import ChildrenProps from "@/types/ChildrenProps";
export const ZodContext = createContext<"zod" | null>(null);
const ZodProvider: FC<ChildrenProps> = ({ children }) => {
const [isLoaded, setIsLoaded] = useState<"zod" | null>(null);
useEffect(() => {
z.config({
...z.config(),
...en(),
});
setIsLoaded("zod");
}, []);
return <ZodContext.Provider value={isLoaded}>{children}</ZodContext.Provider>;
};
export default ZodProvider;
...and it does not complain in VSCode *although I have not imported useState explicitly.
Apparently, .wxt/tsconfig.json includes the generated types defined in .wxt/wxt.d.ts, which refers to .wxt/types/imports.d.ts.
Since these are defined, VSCode does not complain and it causes error during runtime:
ReferenceError: useState is not defined
ReferenceError: useEffect is not defined
What must have happened is that VSCode must have complained that I have not imported the hooks from React.
Reproduction
Repo in related commit: https://github.com/erayerdin/content-block/tree/45c5b71fa27d5109f2b85f362fabe13b482eae2e
Steps to reproduce
pnpm ipnpm dev
System Info
System:
OS: Linux 6.15 Fedora Linux 42 (KDE Plasma Desktop Edition)
CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13500H
Memory: 5.77 GB / 15.30 GB
Container: Yes
Shell: 5.2.37 - /bin/bash
Binaries:
Node: 22.17.0 - /usr/bin/node
npm: 10.9.2 - /usr/bin/npm
pnpm: 10.13.1 - /usr/local/bin/pnpm
Browsers:
Chrome: 138.0.7204.168
npmPackages:
vite: 6.3.5 => 6.3.5
wxt: ^0.20.7 => 0.20.7
Used Package Manager
pnpm
Validations
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue from the linked content-block commit with pnpm i and pnpm dev. Inspect the generated .wxt/wxt.d.ts and .wxt/types/imports.d.ts files and how they are included by .wxt/tsconfig.json; done means missing React hook imports are reported by VSCode and the reproduction no longer reaches ReferenceError at runtime.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100