wxt-dev / wxt-dev/wxt

WXT Generating Types for React Causes `ReferenceError: useState is not defined` and more

Open
#1,829 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending-triage
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
  1. pnpm i
  2. pnpm 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.