search

httptoolkit / httptoolkit-ui

The UI of HTTP Toolkit
https://httptoolkit.com
GNU Affero General Public License v3.0
288 stars 107 forks source link

Couldn't run due to ts error? #27

Closed shirshak55 closed 3 years ago

shirshak55 commented 3 years ago 
C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:434
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
automation/webpack.dev.ts:6:22 - error TS2345: Argument of type 'import("C:/Users/quantum/Desktop/projects/http-toolkit/httptoolkit-ui/node_modules/@types/webpack/index").Configuration' is not assignable to parameter of type 'import("C:/Users/quantum/Desktop/projects/http-toolkit/httptoolkit-ui/node_modules/@types/webpack-merge/node_modules/webpack/types").Configuration'.
  Types of property 'cache' are incompatible.
    Type 'boolean | object | undefined' is not assignable to type 'boolean | MemoryCacheOptions | FileCacheOptions | undefined'.
      Type 'object' is not assignable to type 'boolean | MemoryCacheOptions | FileCacheOptions | undefined'.
        Property 'type' is missing in type '{}' but required in type 'FileCacheOptions'.

6 export default merge(common, {
                       ~~~~~~

  node_modules/@types/webpack-merge/node_modules/webpack/types.d.ts:3889:2
    3889  type: "filesystem";
          ~~~~
    'type' is declared here.

    at createTSError (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:434:12)
    at reportTSError (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:438:19)
    at getOutput (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:578:36)
    at Object.compile (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:775:32)
    at Module.m._compile (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:858:43)
    at Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Object.require.extensions.<computed> [as .ts] (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:861:12)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:828:14)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜ httptoolkit-ui git:(master)✗

I am using node v16 i hope that's not causing this issue? npm doesn't seems to work on windows tbh.

pimterry commented 3 years ago

Huh, that's weird. This is a type error between @types/webpack and @types/webpack-merge, but I can't reproduce it in a clean checkout and that shouldn't happen unexpectedly - the types for both are locked.

Can you please share the output of:

That should say that you're using @types/webpack v4.4.19 and @types/webpack-merge v4.1.3. Those two definitely work together.

pimterry commented 3 years ago

Ah - I can see from the details at the end there that you're using Yarn, that's probably it.

This should definitely work if you get a clean checkout, do npm install, and then npm start. If you're using Yarn though, I think yarn install will ignore npm's package-lock by default, so you can end up with untested package version combinations like this.

If you'd strongly prefer to use Yarn instead of npm, it looks like if you run yarn import before yarn install, it will create a yarn.lock from npm's package-lock, and then you should end up with the same versions and everything working as normal.

shirshak55 commented 3 years ago

@pimterry Thanks. But i still think there is issue on windows at least

➜ httptoolkit-ui git:(master) yarn start
yarn run v1.22.5
$ node-dev ./node_modules/.bin/httptoolkit-server start & npm run start:web
C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\.bin\httptoolkit-server:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1025:15)
    at Module._compile (node:internal/modules/cjs/loader:1059:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Object.nodeDevHook [as .js] (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\node-dev\lib\hook.js:61:7)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\node-dev\lib\wrap.js:73:1)
[ERROR] 08:14:28 SyntaxError

I am using latest version of node,npm, yarn v1.

Even if I use yarn start:web that also have issue

➜ httptoolkit-ui git:(master) git reset --hard origin
HEAD is now at 7174f3d Fix websocket rule version range
➜ httptoolkit-ui git:(master) yarn start:web
yarn run v1.22.5
$ env-cmd -f ./automation/ts-node.env webpack-dev-server --config ./automation/webpack.dev.ts

C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:434
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
automation/webpack.dev.ts:6:22 - error TS2345: Argument of type 'import("C:/Users/quantum/Desktop/projects/http-toolkit/httptoolkit-ui/node_modules/@types/webpack/index").Configuration' is not assignable to parameter of type 'import("C:/Users/quantum/Desktop/projects/http-toolkit/httptoolkit-ui/node_modules/@types/webpack-merge/node_modules/webpack/types").Configuration'.
  Types of property 'cache' are incompatible.
    Type 'boolean | object | undefined' is not assignable to type 'boolean | MemoryCacheOptions | FileCacheOptions | undefined'.
      Type 'object' is not assignable to type 'boolean | MemoryCacheOptions | FileCacheOptions | undefined'.
        Property 'type' is missing in type '{}' but required in type 'FileCacheOptions'.

6 export default merge(common, {
                       ~~~~~~

  node_modules/@types/webpack-merge/node_modules/webpack/types.d.ts:3889:2
    3889  type: "filesystem";
          ~~~~
    'type' is declared here.

    at createTSError (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:434:12)
    at reportTSError (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:438:19)
    at getOutput (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:578:36)
    at Object.compile (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:775:32)
    at Module.m._compile (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:858:43)
    at Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Object.require.extensions.<computed> [as .ts] (C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui\node_modules\ts-node\src\index.ts:861:12)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜ httptoolkit-ui git:(master)✗  npm --version
7.20.0
httptoolkit-ui@0.1.0 C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui
+-- @types/copy-webpack-plugin@4.4.4
| `-- @types/webpack@5.28.0
+-- @types/html-webpack-plugin@3.2.0
| `-- @types/webpack@5.28.0
+-- @types/webpack-dev-server@3.11.5
| `-- @types/webpack@4.41.30 deduped
+-- @types/webpack-merge@4.1.5
| `-- @types/webpack@5.28.0
`-- @types/webpack@4.41.30
httptoolkit-ui@0.1.0 C:\Users\quantum\Desktop\projects\http-toolkit\httptoolkit-ui
`-- @types/webpack-merge@4.1.5
pimterry commented 3 years ago

Ok, I've done some digging, and there's two separate problems here: the server script launch on Windows, and you're still using the wrong type versions in some places for some reason.

I've fixed the server script directly: https://github.com/httptoolkit/httptoolkit-ui/commit/605abf60f96a0afee794f85cca53076ae7efed4d. If you pull the latest version, that should now the server as you'd expect.

For the types, I think you should be able to make this work by just not using yarn. Try:

That should install the correct files and build the web UI successfully. For reference I'm using npm 6.14.13, but in theory it should work with any modern version you like. npm ls @types/webpack should only show v4.4.19, used in various places, with no other versions coming from elsewhere.

If that does work then let me know, I'll see if there's anything I can do to make Yarn work properly or to make it fail more clearly instead.

shirshak55 commented 3 years ago

@pimterry

Seems like I need to use npm version that you used. Because new version of npm doesn't work. NPM always gives me useless error that yarn never gives tbh.

➜ httptoolkit-ui git:(master) npm i
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated @types/react-ga@2.3.0: This is a stub types definition for react-ga (https://github.com/react-ga/react-ga). react-ga provides its own type definitions, so you don't need @types/react-ga installed!
npm WARN deprecated mkdirp-promise@1.1.0: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
npm WARN deprecated gulp-header@1.8.12: Removed event-stream from gulp-header
npm WARN deprecated @hapi/pinpoint@1.0.2: Moved to 'npm install @sideway/pinpoint'
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.3: this library is no longer supported
npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
npm WARN deprecated flat@4.1.0: Fixed a prototype pollution security issue in 4.1.0, please upgrade to ^4.1.1 or ^5.0.1.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated @hapi/formula@1.2.0: Moved to 'npm install @sideway/formula'
npm WARN deprecated xmldom@0.1.31: Deprecated due to CVE-2021-21366 resolved in 0.5.0
npm WARN deprecated chokidar@2.0.4: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated uuid@3.3.2: 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 mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
npm WARN deprecated @hapi/joi@16.1.8: Switch to 'npm install joi'
npm WARN deprecated core-js@1.2.7: core-js@<3.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. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.5.7: core-js@<3.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. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.10: core-js@<3.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. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code E401
npm ERR! Incorrect or missing password.
npm ERR! If you were trying to login, change your password, create an
npm ERR! authentication token or enable two-factor authentication then
npm ERR! that means you likely typed your password in incorrectly.
npm ERR! Please try again, or recover your password at:
npm ERR!     https://www.npmjs.com/forgot
npm ERR!
npm ERR! If you were doing some other operation then your saved credentials are
npm ERR! probably out of date. To correct this please try logging in again with:
npm ERR!     npm login

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\quantum\AppData\Local\npm-cache\_logs\2021-07-17T05_20_30_844Z-debug.log

I am sure something is wrong because why is it even asking password lol. Anyway I did try to run start:web script

➜ httptoolkit-ui git:(master)✗  npm run start:web

> httptoolkit-ui@0.1.0 start:web
> env-cmd -f ./automation/ts-node.env webpack-dev-server --config ./automation/webpack.dev.ts

'env-cmd' is not recognized as an internal or external command,
operable program or batch file.
shirshak55 commented 3 years ago

Ok finally solved it using frozen command on yarn. Thanks.

Looking forward to contribute httptoolkit-ui

pimterry commented 3 years ago

Ah, ok, interesting. I've attempted to solve it myself by manually fixing the lockfile, since npm 7 (but not npm 6?) seems to break with the current lockfile, but now bizarrely the npm registry itself throws an error retrieving from some of the updated URLs so the build is currently broken :grimacing:. It does work for me locally, but I suspect due to local caching somewhere. Such a pain. I'll fix that in a minute (EDIT: now fixed).

Anyway, glad it's working for you now! Let me know if you run into any problems, and contributions of all kinds are welcome, from features to bug fixes, or even improvements to sort out the npm configuration :smile:. In case you're not aware, HTTP Toolkit Pro is totally free for contributors, so just let me know your email once you've put something together and I'll create you an account.

shirshak55 commented 3 years ago

@pimterry coming from proxyman I certainly find many features lacking (I don't use macos anymore and fiddler everywhere is not good in a sense it doesn't have various features like copying curl commands etc). I will probably work on those. Especially ability to create mock from view tab so that it will be easy to modify response quickly :)

One problem I am facing is mocks are not persisted. ( I tried to flip that isPaidUser global vars tho) is there any solutions?

pimterry commented 3 years ago

Both those features are already available (there's a button to create mocks at the bottom of the right View pane) they're just Pro features. No worries though - I've just added a month of Pro to shirshak55@pm.me (from your GH profile) so if you log in with that email then it should give you access to everything.

When you're running everything locally, you'll find that you can't log into a Pro account from localhost due to domain limitations. If you use http://local.httptoolkit.tech:8080/ instead, that'll work (that domain just resolves to localhost).