`@types/chrome` needs to be installed manually when using pnpm

2wheeh commented 5 days ago

Describe the bug

when using npm, TS infers browser namespace successfully:

but when using pnpm, it fails without installing @types/chrome manually:

we may need to improve docs or fix: this might be related to how pnpm handles devDependencies differently from npm.

Reproduction

just start fresh projects with pnpm following installation docs.

pnpm dlx wxt@latest init

Steps to reproduce

after installing, put your cursor on browser.runtime.* to see the inferred types. for example, browser.runtime.id in entrypoints/background.ts.

System Info

System:
    OS: macOS 15.0.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 2.53 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.70
    Safari: 18.0.1
  npmPackages:
    wxt: ^0.19.11 => 0.19.13

Used Package Manager

pnpm

Validations

[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

1natsu172 commented 5 days ago

Is the extensionApi in config set to 'chrome'? Also try restarting ts-server on your editor. ref: https://wxt.dev/guide/essentials/extension-apis.html#disabling-the-polyfill

Although you are still experiencing differences in behavior due to the package manager?

2wheeh commented 4 days ago

@1natsu172

Is the extensionApi in config set to 'chrome'? Also try restarting ts-server on your editor.

yes, it is set to 'chrome' as configured after scaffolding the project via pnpm dlx wxt@latest init currently.

Although you are still experiencing differences in behavior due to the package manager?

yes, there seems to be an issue where browser.runtime fails to load properly.

without `@types/chrome` on the app devDependency

with `@types/chrome` on the app devDependency

plus, even in npm (or with @types/chrome in pnpm), the type inference fails for the snippet below from the docs while it works correctly with chrome namespace:

if this isn't a bug I may be missing something important here - would you have any suggestions?

2wheeh commented 4 days ago

as per https://github.com/wxt-dev/wxt/issues/784#issuecomment-2248989854, it seems to need to install @types/chrome when using pnpm.

when browser is a value it infers well but still when it is a type, it shows TS error.

1natsu172 commented 4 days ago

@2wheeh Alright, there are two problems. I understood it too.

First, for some reason in the pnpm environment, the internal dependency @types/chrome can't be resolved and the typeof chrome is failing. The workaround to this problem is to include @types/chrome in the devDeps on the app side, as you already understood.

Here's the code inside. https://github.com/wxt-dev/wxt/blob/68183b648e309641e415f5856d233bea6f5f4439/packages/wxt/src/browser/chrome.ts#L12

The second thing is that the interface as a type cannot be inferred from the browser as you say. This one is not a package-manager dependent problem. I think it's an implementation glitch in WXT.

The workaround over here is below, and either approach should be used.

import { Runtime } from "wxt/browser";

// This types from webextension-polyfill
function handler1(params: Runtime.MessageSender) {}

// This types from @types/chrome(need install `@types/chrome`)
function handler2(params: chrome.runtime.MessageSender) {}

2wheeh commented 4 days ago

@1natsu172 thank you for the very clear summary 👍🏻

wxt-dev / wxt