fix: unable to run npm run build to package libp2p-devtools for browser installation

[Faolain]

Problem:
I wanted to install the browser devtools located in https://github.com/ipshipyard/js-libp2p-inspector/tree/main/packages/libp2p-devtools so I started with the fresh repo, cloned it, and ran npm i && npm build in the packages/libp2p-devtools directory (EDIT: I also tried on root directory) and I got build errors.

Logs:

❯ npm i && npm run build
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated read-pkg-up@11.0.0: Renamed to read-package-up
npm warn deprecated chai-subset@1.6.0: functionality of this lib is built-in to chai now. see more details here: https://github.com/debitoor/chai-subset/pull/85
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated metro-react-native-babel-preset@0.64.0: Use @react-native/babel-preset instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 1847 packages, and audited 2059 packages in 56s

462 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> @ipshipyard/libp2p-devtools@1.0.4 build
> tsc && node esbuild.js

error TS2688: Cannot find type definition file for 'lodash'.
  The file is in the program because:
    Entry point for implicit type library 'lodash'

src/app.tsx:2:59 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-metrics' or its corresponding type declarations.

2 import { LIBP2P_INSPECTOR_METRICS_KEY, valueCodecs } from '@ipshipyard/libp2p-inspector-metrics'
                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app.tsx:3:106 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-ui' or its corresponding type declarations.

3 import { Inspector, FloatingPanel, FatalErrorPanel, HandleCopyToClipboardContext, ConnectingPanel } from '@ipshipyard/libp2p-inspector-ui'
                                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app.tsx:17:95 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-metrics' or its corresponding type declarations.

17 import type { ClientMessage, InspectorRPCEvents, MetricsRPC, RPCMessage, SOURCE_CLIENT } from '@ipshipyard/libp2p-inspector-metrics'
                                                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/content-script.ts:8:47 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-metrics' or its corresponding type declarations.

8 import { SOURCE_METRICS, SOURCE_CLIENT } from '@ipshipyard/libp2p-inspector-metrics'
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/service-worker.ts:1:31 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-metrics' or its corresponding type declarations.

1 import { SOURCE_CLIENT } from '@ipshipyard/libp2p-inspector-metrics'
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/service-worker.ts:42:20 - error TS2538: Type 'undefined' cannot be used as an index type.

42     if (toDevTools[tabId] !== port) {
                      ~~~~~

src/service-worker.ts:43:18 - error TS2538: Type 'undefined' cannot be used as an index type.

43       toDevTools[tabId]?.onMessage.removeListener(onDevToolsPanelMessage)
                    ~~~~~

src/service-worker.ts:44:18 - error TS2538: Type 'undefined' cannot be used as an index type.

44       toDevTools[tabId] = port
                    ~~~~~

src/service-worker.ts:47:25 - error TS2538: Type 'undefined' cannot be used as an index type.

47     if (toContentScript[tabId] == null) {
                           ~~~~~

src/service-worker.ts:48:23 - error TS2538: Type 'undefined' cannot be used as an index type.

48       toContentScript[tabId] = browser.tabs.connect(message.tabId, {
                         ~~~~~

src/service-worker.ts:52:23 - error TS2538: Type 'undefined' cannot be used as an index type.

52       toContentScript[tabId].onMessage.addListener(onContentScriptMessage)
                         ~~~~~

src/service-worker.ts:54:23 - error TS2538: Type 'undefined' cannot be used as an index type.

54       toContentScript[tabId].onDisconnect.addListener((port) => {
                         ~~~~~

src/service-worker.ts:54:56 - error TS7006: Parameter 'port' implicitly has an 'any' type.

54       toContentScript[tabId].onDisconnect.addListener((port) => {
                                                          ~~~~

src/service-worker.ts:63:23 - error TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.

63       copyToClipboard(tabId, message.value); return
                         ~~~~~

src/service-worker.ts:67:21 - error TS2538: Type 'undefined' cannot be used as an index type.

67     toContentScript[tabId].postMessage(message)
                       ~~~~~

src/utils/send-message.ts:1:31 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-metrics' or its corresponding type declarations.

1 import { SOURCE_CLIENT } from '@ipshipyard/libp2p-inspector-metrics'
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/utils/send-message.ts:5:33 - error TS2307: Cannot find module '@ipshipyard/libp2p-inspector-metrics' or its corresponding type declarations.

5 import type { RPCMessage } from '@ipshipyard/libp2p-inspector-metrics'
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 18 errors in 4 files.

Errors  Files
     3  src/app.tsx:2
     1  src/content-script.ts:8
    11  src/service-worker.ts:1
     2  src/utils/send-message.ts:1
npm error Lifecycle script `build` failed with error:
npm error code 1
npm error path /Users/aristotle/Documents/Projects/js-libp2p-inspector/packages/libp2p-devtools
npm error workspace @ipshipyard/libp2p-devtools@1.0.4
npm error location /Users/aristotle/Documents/Projects/js-libp2p-inspector/packages/libp2p-devtools
npm error command failed
npm error command sh -c tsc && node esbuild.js

Edit:
I think I updated what was necessary w.r.t dependencies to get it to work here #24

[achingbrain]

This is a monorepo project, you need to run npm i && npm run build in the root of the repo first, not the individual packages.

[Faolain]

Heh that's what I had ran first but still got the same error. Pulled and ran fresh right now same error on root
.

Switched to my branch (on root and it fixes the problem):

edit: my friend ran the commands vanilla and they work for him. sigh. Unsure what it can be, I'm on Node v22.15.0 if that helps

[Faolain]

Attached recording of following the instructions vanilla from root (my PR #24 solves this error)

Screen.Recording.2025-08-04.at.6.35.03.PM.mov