search

httptoolkit / httptoolkit-desktop

Electron wrapper to build and distribute HTTP Toolkit for the desktop
https://httptoolkit.com
GNU Affero General Public License v3.0
615 stars 83 forks source link

npm run start:dev fails to start #54

Closed lionelhorn closed 1 year ago

lionelhorn commented 1 year ago

I'm trying to figure out how to add features like using existing chrome profiles.

So I tried to setup a local dev env following: https://github.com/httptoolkit/httptoolkit-desktop#contributing

It first seemed to miss "tslib" as a deps

I first tried: 

npm run start:dev

It failed so I tried to run the separate steps from npm run server:setup && npm run start:app

npm run server:setup đź‘Ť

> httptoolkit-desktop@1.12.3 server:setup C:\PROG\Tests\_httptoolkit\httptoolkit-desktop
> ts-node ./setup-server.ts

Downloading httptoolkit-server v1.12.3 for win32-x64
Downloading server from https://github.com/httptoolkit/httptoolkit-server/releases/download/v1.12.3/httptoolkit-server-v1.12.3-win32-x64.tar.gz...
Extracting server to C:\PROG\Tests\_httptoolkit\httptoolkit-desktop
Server download completed
Server setup completed.

Process finished with exit code 0

npm run start:app => đź‘Ž

6:25:24 PM - Starting compilation in watch mode...

error TS6054: File '.'' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

6:25:27 PM - Found 1 error. Watching for file changes.

Desktop app doesn't start.

pimterry commented 1 year ago

Not sure I'm afraid. I'm fairly confident the setup works generally (it works for me locally, and for starters the CI build installs & runs very similar steps successfully) but it's hard to know exactly what could cause the above on your machine.

Can you share the node, npm & Windows versions you're using, and the exact steps you're running (from git clone onwards) so I can reproduce this for myself?

pimterry commented 1 year ago

I'm trying to figure out how to add features like using existing chrome profiles.

Oh, and the above would be useful info to ensure this is working properly regardless, but actually I think you probably don't need to use this repo for that case. This repo provides the desktop shell, which affects the end application UX and installation process, but it doesn't have the implementation of interception features like existing chrome interception etc.

The backend for that lives in httptoolkit-server while the UI for interceptors (mostly just buttons, but some have more complex behaviour) lives in httptoolkit-ui. You can run either/both of those independently and then just open the UI in a normal browser without the desktop shell bits on top. See the readme for each for instructions on how to do that.

lionelhorn commented 1 year ago

@pimterry 

Windows 10.0.22621
node 16.14.2
npm 9.1.2
pnpm 7.18.2

Install steps with pnpm. Powershell => đź‘Ž fails.

PS C:\PROG\Tests\_bug-repros> git clone https://github.com/httptoolkit/httptoolkit-desktop
Cloning into 'httptoolkit-desktop'...
remote: Enumerating objects: 1475, done.
remote: Counting objects: 100% (497/497), done.
remote: Compressing objects: 100% (136/136), done.
remote: Total 1475 (delta 391), reused 382 (delta 361), pack-reused 978
Receiving objects: 100% (1475/1475), 1.38 MiB | 1.18 MiB/s, done.
Resolving deltas: 100% (928/928), done.

PS C:\PROG\Tests\_bug-repros> cd .\httptoolkit-desktop\

PS C:\PROG\Tests\_bug-repros\httptoolkit-desktop> pnpm install
 WARN  deprecated electron-notarize@1.2.2: Please use @electron/notarize moving forward.  There is no API change, just a package name change
 WARN  deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
 WARN  deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
 WARN  deprecated electron-osx-sign@0.6.0: Please use @electron/osx-sign moving forward. Be aware the API is slightly different
 WARN  deprecated asar@3.2.0: Please use @electron/asar moving forward.  There is no API change, just a package name change
Packages: +482
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: C:\Users\Lionel\AppData\Local\pnpm\store\v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 493, reused 425, downloaded 66, added 482, done
node_modules/.pnpm/registry-js@1.15.1/node_modules/registry-js: Running install script, done in 655ms
node_modules/.pnpm/electron@22.3.3/node_modules/electron: Running postinstall script, done in 22.7s

> httptoolkit-desktop@1.12.3 postinstall C:\PROG\Tests\_bug-repros\httptoolkit-desktop
> electron-builder install-app-deps

  • electron-builder  version=23.6.0
  • loaded configuration  file=package.json ("build" field)

dependencies:
+ @sentry/electron 4.3.0
+ @sentry/integrations 7.44.2
+ electron-context-menu 3.6.1
+ electron-store 8.1.0
+ electron-window-state 5.0.3
+ os-proxy-config 1.1.1
+ rimraf 2.7.1 (4.4.1 is available)
+ semver 7.3.8
+ uuid 3.4.0 (9.0.0 is available) deprecated
+ yargs 15.4.1 (17.7.1 is available)

devDependencies:
+ @types/electron-window-state 2.0.34 (5.0.0 is available)
+ @types/lodash 4.14.191
+ @types/node 15.14.9 (18.15.5 is available)
+ @types/node-fetch 2.6.2
+ @types/rimraf 3.0.2 (4.0.5 is available)
+ @types/semver 7.3.13
+ @types/targz 1.0.1
+ @types/universal-analytics 0.4.5
+ @types/uuid 3.4.10 (9.0.1 is available)
+ @types/yargs 15.0.15 (17.0.23 is available)
+ babel-plugin-transform-async-to-generator 6.24.1
+ babel-preset-env 1.7.0
+ cross-env 7.0.3
+ electron 22.3.3 (23.1.4 is available)
+ electron-builder 23.6.0
+ electron-notarize 1.2.2 deprecated
+ lodash 4.17.21
+ node-fetch 2.6.9 (3.3.1 is available)
+ targz 1.0.1
+ ts-node 7.0.1 (10.9.1 is available)
+ tsc-watch 4.6.2 (6.0.0 is available)
+ tslint 5.20.1 (6.1.3 is available)
+ typescript 3.9.10 (5.0.2 is available)

The integrity of 6366 files was checked. This might have caused installation to take longer.
Done in 1m 5.3s

PS C:\PROG\Tests\_bug-repros\httptoolkit-desktop> pnpm run start:dev

> httptoolkit-desktop@1.12.3 start:dev C:\PROG\Tests\_bug-repros\httptoolkit-desktop
> ts-node ./skip-server.ts && cross-env HTK_DEV=true APP_URL='http://local.httptoolkit.tech:8080' npm run start:app

C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\index.ts:261
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
skip-server.ts(15,16): error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.

    at createTSError (C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\index.ts:261:12)
    at getOutput (C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\index.ts:367:40)
    at Object.compile (C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\index.ts:558:11)
    at Module.m._compile (C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\index.ts:439:43)
    at Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Object.require.extensions.<computed> [as .ts] (C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\index.ts:442:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at Object.<anonymous> (C:\PROG\Tests\_bug-repros\httptoolkit-desktop\node_modules\.pnpm\ts-node@7.0.1\node_modules\ts-node\src\bin.ts:157:12)
 ELIFECYCLE  Command failed with exit code 1.
lionelhorn commented 1 year ago

Install steps with npm. Powershell => đź‘Ž fails.

PS C:\PROG\_bug-repros> git clone https://github.com/httptoolkit/httptoolkit-desktop
Cloning into 'httptoolkit-desktop'...
remote: Enumerating objects: 1475, done.
remote: Counting objects: 100% (497/497), done.
remote: Compressing objects: 100% (136/136), done.
remote: Total 1475 (delta 391), reused 382 (delta 361), pack-reused 978
Receiving objects: 100% (1475/1475), 1.38 MiB | 3.51 MiB/s, done.
Resolving deltas: 100% (928/928), done.

PS C:\PROG\_bug-repros> cd .\httptoolkit-desktop\

PS C:\PROG\_bug-repros\httptoolkit-desktop> npm install
npm WARN deprecated asar@3.2.0: Please use @electron/asar moving forward.  There is no API change, just a package name change
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated electron-osx-sign@0.6.0: Please use @electron/osx-sign moving forward. Be aware the API is slightly different
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

> httptoolkit-desktop@1.12.3 postinstall
> electron-builder install-app-deps

  • electron-builder  version=23.6.0
  • loaded configuration  file=package.json ("build" field)
  • rebuilding native dependencies  dependencies=registry-js@1.15.1 platform=win32 arch=x64
  • install prebuilt binary  name=registry-js version=1.15.1 platform=win32 arch=x64 napi=

dded 571 packages, and audited 572 packages in 24s

43 packages are looking for funding
6 high severity vulnerabilities

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

Run `npm audit` for details.
PS C:\PROG\_bug-repros\httptoolkit-desktop>

PS C:\PROG\_bug-repros\httptoolkit-desktop> npm run start:dev

> httptoolkit-desktop@1.12.3 start:dev
> ts-node ./skip-server.ts && cross-env HTK_DEV=true APP_URL='http://local.httptoolkit.tech:8080' npm run start:app
> httptoolkit-desktop@1.12.3 start:app
> tsc-watch --onSuccess 'electron .'

8:19:51 PM - Starting compilation in watch mode...

error TS6054: File '.'' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

8:19:53 PM - Found 1 error. Watching for file changes.
lionelhorn commented 1 year ago

Running on windows, npm installation, WSL shell => đź‘Ť works. App starts.


/mnt/c/PROG/_bug-repros/httptoolkit-desktop$ npm run start:dev

> httptoolkit-desktop@1.12.3 start:dev
> ts-node ./skip-server.ts && cross-env HTK_DEV=true APP_URL='http://local.httptoolkit.tech:8080' npm run start:app
> httptoolkit-desktop@1.12.3 start:app
> tsc-watch --onSuccess 'electron .'

[8:28:53 PM] Starting compilation in watch mode...
[8:29:27 PM] Found 0 errors. Watching for file changes.

C:\PROG\_bug-repros\httptoolkit-desktop>node "C:\PROG\_bug-repros\httptoolkit-desktop\httptoolkit-server\bin\\httptoolkit-server" start
pimterry commented 1 year ago

Thanks for all the details @lionelhorn! Very helpful.

This syntax requires an imported helper but module 'tslib' cannot be found.

I think this must be due to how pnpm manages packages, it looks like in effect we had an implicit dependency on that, which works fine with npm via transitive dependencies, but fails with pnpm. I've just added that as an explicit dependency which should resolve this. Let me know if you're still seeing pnpm issues after updating to use that.

File '.'' has an unsupported extension.

No idea why that'd happen, it must be some kind of shell difference (as you say, it works in WSL). I think this must be caused by the electron . command that's run, but I think that command is actually correct... The electron CLI help says you have to provide an argument pointing to an Electron app, and a "Folder containing a package.json file" is a valid option.

If you can work out a different command for "run this directory as an electron app" that does work for Powershell, without breaking anything else, a PR to switch to that would be much appreciated!

pimterry commented 1 year ago

Ok, I still have no idea what causes this, but I've somehow managed to reproduce it in a Windows VM. It seems to be to do with the quotes in that npm script, and escaping double quotes does resolve the issue, for me at least, as here: https://github.com/httptoolkit/httptoolkit-desktop/commit/d9f25199d041a91e44955313f9f84fff86cacccb.

I'm assuming this will also fix that for you (and any others) so I'm going to close this, but do please reply here if you're still having issues with this after that fix.