npm run build error - Githubissues

npm run build

prebuild rimraf dist

build run-script-os

build:windows env-cmd -f ./automation/ts-node.env.js node --max_old_space_size=8192 node_modules/webpack/bin/webpack.js --config ./automation/webpack.prod.ts

Sentry source map upload disabled - no token set Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\monaco.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\vendors-node_modules_ethersproject_abi_lib_esm_abi-coder_js-node_modules_fortawesome_free-bra-cda2f5.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\apis.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\zstd.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\main.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\vendors-node_modules_crypto-browserify_index_js.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\vendors-node_modules_ajv_dist_ajv_js-node_modules_base64-js_index_js-node_modules_http-encodi-0d88b4.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\vendors-node_modules_buffer_index_js-node_modules_js-beautify_js_lib_beautifier_js-node_modul-ce59fd.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\mockttp.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\src_services_ui-worker_ts.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\vendors-node_modules_bn_js_lib_bn_js-node_modules_path-browserify_index_js.js": no such file
Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\node_modules_brotli-wasm_pkg_bundler_brotli_wasm_js.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\node_modules_css-loader_dist_runtime_getUrl_js-data_image_png_base64_iVBORw0KGgoAAAANSUhEUgAA-2b41e20.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\node_modules_css-loader_dist_runtime_getUrl_js-data_image_png_base64_iVBORw0KGgoAAAANSUhEUgAA-2b41e21.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist_d546-_8131-_3fc0-_cad2-_593c-_4068-_e7e4-_7bec-_802b-_1e44-_0aec-_fbf1-_b4cc.bundle.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\ui-update-worker.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\editor.worker.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\css.worker.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\html.worker.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\json.worker.js": no such file Error parsing bundle asset "F:\GoProject\httptoolkit-ui-main\dist\ts.worker.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to F:\GoProject\httptoolkit-ui-main\dist\report.html ERROR in Cannot read properties of undefined (reading 'source')

webpack 5.89.0 compiled with 1 error in 106556 ms

Not sure I'm afraid! The same script does work in our automated builds on GitHub (on Linux, but it shouldn't make a difference) and on my local machines (Linux & Mac). There's certainly other contributors using Windows though, so I would have expected it to work (unless some very recent change has broken something).

It seems that this is due to bundle analyzer not finding your built assets when it runs. Do those files exist in the dist directory mentioned here? Do the paths look correct for your setup? It'd be interesting to know if it's searching wrong, or if the files aren't being created as expected for some reason.

If there's no easy fix I think it should be possible to work around this, but of course I'd like to know what's wrong so we can solve this properly. Is there anything else unusual about your setup?

+1 I am also getting this error continuously and i have no idea why. There is only a report.html and tsconfig.tsbuildinfo in the dist directory. I have tried restarting everything from scratch, cloning the repository and running npm install, and running npm run build after that.

@DevBoiAgru if you disable bundle analyzer (just comment out these lines) does that work correctly for you? It looks like this might be an issue with that one plugin, but you really don't need that for most use cases anyway.

@DevBoiAgru if you disable bundle analyzer (just comment out these lines) does that work correctly for you? It looks like this might be an issue with that one plugin, but you really don't need that for most use cases anyway.

I tried it, it didn't result the same error as before. There's an error ERROR in Cannot read properties of undefined (reading 'source') though.

Here's the full output:

npm run build

> prebuild
> rimraf dist

> build
> run-script-os

> build:windows
> env-cmd -f ./automation/ts-node.env.js node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config ./automation/webpack.prod.ts

Sentry source map upload disabled - no token set
ERROR in Cannot read properties of undefined (reading 'source')

webpack 5.89.0 compiled with 1 error in 67930 ms

There's just a tsconfig.tsbuildinfo file in the /dist folder

@pimterry Ok so I looked around on the web for potential fixes and ran into this stackoverflow thread. I deleted the node_modules folder and the package-lock.json, ran npm install, and then npm run build, now there are even more errors

npm run build

> prebuild
> rimraf dist

> build
> run-script-os

> build:windows
> env-cmd -f ./automation/ts-node.env.js node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config ./automation/webpack.prod.ts

Sentry source map upload disabled - no token set
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\monaco.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\vendors-node_modules_ethersproject_abi_lib_esm_abi-coder_js-node_modules_fortawesome_free-bra-a4513c.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\apis.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\zstd.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\main.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\vendors-node_modules_crypto-browserify_index_js.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\vendors-node_modules_ajv_dist_ajv_js-node_modules_base64-js_index_js-node_modules_http-encodi-513874.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\vendors-node_modules_buffer_index_js-node_modules_js-beautify_js_lib_beautifier_js-node_modul-ce59fd.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\mockttp.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\vendors-node_modules_bn_js_lib_bn_js-node_modules_path-browserify_index_js-node_modules_reada-355198.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\src_services_ui-worker_ts.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\node_modules_brotli-wasm_pkg_bundler_brotli_wasm_js.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\node_modules_css-loader_dist_runtime_getUrl_js-data_image_png_base64_iVBORw0KGgoAAAANSUhEUgAA-2b41e20.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\node_modules_css-loader_dist_runtime_getUrl_js-data_image_png_base64_iVBORw0KGgoAAAANSUhEUgAA-2b41e21.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\_d546-_8131-_3fc0-_8bcc-_4068-_e7e4-_7bec-_0aec-_fbf1-_ed1b-_d17e-_b4cc.bundle.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\ui-update-worker.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\editor.worker.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\css.worker.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\html.worker.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\json.worker.js": no such file
Error parsing bundle asset "C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\ts.worker.js": no such file

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\dist\report.html
WARNING in ./node_modules/asn1.js/lib/asn1/api.js 21:12-42
Module not found: Error: Can't resolve 'vm' in 'C:\Users\User\Desktop\Playground\Misc\httptoolkit-ui\node_modules\asn1.js\lib\asn1'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "vm": require.resolve("vm-browserify") }'
        - install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "vm": false }
 @ ./node_modules/asn1.js/lib/asn1.js 5:14-42
 @ ./node_modules/parse-asn1/asn1.js 6:11-29
 @ ./node_modules/parse-asn1/index.js 3:11-28
 @ ./node_modules/public-encrypt/privateDecrypt.js 1:16-37
 @ ./node_modules/public-encrypt/browser.js 2:0-52
 @ ./node_modules/crypto-browserify/index.js 48:20-45
 @ ./node_modules/zstd-codec/lib/zstd-codec-binding-wasm.js 8:892735-892752
 @ ./node_modules/zstd-codec/lib/module.js 22:8-47
 @ ./node_modules/zstd-codec/lib/zstd-codec.js 359:11-37
 @ ./node_modules/zstd-codec/index.js 1:18-48
 @ ./node_modules/http-encoding/zstd-codec-browser.js 4:17-46
 @ ./node_modules/http-encoding/dist/index.js 53:69-90
 @ ./src/services/ui-worker.ts 13:0-104 23:29-41 35:52-64 49:29-43 50:31-43 51:31-35 52:34-41
 @ ./src/services/ui-worker-api.ts
 @ ./src/model/api/api-store.ts 24:0-69 150:22-43
 @ ./src/index.tsx 33:0-49 49:21-29

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in Cannot read properties of undefined (reading 'source')

ERROR in src/components/sidebar.tsx:177:25
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<...> | null | undefined; ... 273 more ...; innerRef?: Ref<...> | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<(<TState>(props: Omit<LinkProps<TState>, "ref"> & RefAttributes<HTMLAnchorElement>) => ReactNode), ... 4 more ..., <TState>(props: Omit<...> & RefAttributes<...>) => ReactNode>): ReactElement<...>', gave the following error.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.
    175 |                 >{({ match }) =>
    176 |                     <SidebarSelectableItem
  > 177 |                         to={item.url}
        |                         ^^
    178 |                         title={item.title}
    179 |                         selected={!!match}
    180 |                     >

ERROR in src/components/view/filters/filter-input.tsx:290:9
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: AutosuggestProps<SuggestionType, any>): Autosuggest<SuggestionType, any>', gave the following error.
    Type '{ type: string; value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; placeholder: string; ref: React.Ref<HTMLInputElement> | undefined; }' is not assignable to type 'InputProps<SuggestionType>'.
      Types of property 'onChange' are incompatible.
        Type '(e: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: FormEvent<HTMLElement>, params: ChangeEvent) => void'.    
          Types of parameters 'e' and 'event' are incompatible.
            Type 'FormEvent<HTMLElement>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
              Types of property 'target' are incompatible.
                Type 'EventTarget' is not assignable to type 'EventTarget & HTMLInputElement'.
                  Type 'EventTarget' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 348 more.       
  Overload 2 of 2, '(props: AutosuggestProps<SuggestionType, any>, context: any): Autosuggest<SuggestionType, any>', gave the following error.
    Type '{ type: string; value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; placeholder: string; ref: React.Ref<HTMLInputElement> | undefined; }' is not assignable to type 'InputProps<SuggestionType>'.
    288 |         renderInputComponent={renderInputField}
    289 |         renderSuggestionsContainer={renderSuggestionsBox}
  > 290 |         inputProps={inputProps}
        |         ^^^^^^^^^^
    291 |     />;
    292 | };

ERROR in src/model/api/jsonrpc.ts:186:9
TS2322: Type '{ name: string; description: Html; in: "body"; required: boolean; deprecated: boolean; type: Type | undefined; value: any; defaultValue: any; enum: any[] | undefined; warnings: string[]; }[]' is not assignable to type 'ApiParameter[]'.
  Type '{ name: string; description: Html; in: "body"; required: boolean; deprecated: boolean; type: Type | undefined; value: any; defaultValue: any; enum: any[] | undefined; warnings: string[]; }' is not assignable to type 'ApiParameter'.
    Types of property 'type' are incompatible.
      Type 'Type | undefined' is not assignable to type 'string | undefined'.
        Type 'ArrayOfSimpleTypes' is not assignable to type 'string'.
    184 |         const { methodSpec, parsedBody } = rpcMethod;
    185 |
  > 186 |         this.parameters = (methodSpec.params as ContentDescriptorObject[])
        |         ^^^^^^^^^^^^^^^
    187 |             .map((param: ContentDescriptorObject, i: number) => {
    188 |                 const schema = param.schema as JSONSchemaObject | undefined;
    189 |

ERROR in src/model/http/sources.ts:22:32
TS2833: Cannot find namespace 'IUAParser'. Did you mean 'UAParser'?
    20 | }
    21 |
  > 22 | const getSummary = (useragent: IUAParser.IResult) => {
       |                                ^^^^^^^^^
    23 |     const hasOS = _(useragent.os).values().some();
    24 |     const hasBrowser = _(useragent.browser).values().some();
    25 |

ERROR in src/model/http/sources.ts:55:36
TS2833: Cannot find namespace 'IUAParser'. Did you mean 'UAParser'?
    53 | }
    54 |
  > 55 | const getDescription = (useragent: IUAParser.IResult): string | undefined => {
       |                                    ^^^^^^^^^
    56 |     if (
    57 |         !useragent.browser.name &&
    58 |         !useragent.os.name &&

ERROR in src/model/http/sources.ts:115:29
TS2833: Cannot find namespace 'IUAParser'. Did you mean 'UAParser'?
    113 | }
    114 |
  > 115 | const getIcon = (useragent: IUAParser.IResult) => {
        |                             ^^^^^^^^^
    116 |     const browserName = get(useragent, 'browser', 'name');
    117 |     if (isValidIconName(browserName)) return SourceIcons[browserName];
    118 |

ERROR in src/model/http/sources.ts:122:24
TS7006: Parameter 's' implicitly has an 'any' type.
    120 |
    121 |     const recognizedUaPart = _.find(
  > 122 |         uaStrings.map((s) => _.upperFirst(s.toLowerCase())),
        |                        ^
    123 |         (s) => isValidIconName(s)
    124 |     ) as SourceIconName;
    125 |

ERROR in src/model/http/sources.ts:133:38
TS2833: Cannot find namespace 'IUAParser'. Did you mean 'UAParser'?
    131 | };
    132 |
  > 133 | function checkForElectron(userAgent: IUAParser.IResult) {
        |                                      ^^^^^^^^^
    134 |     const electronVersion = userAgent.ua.match(/Electron\/(\S+)/);
    135 |
    136 |     if (electronVersion) {

ERROR in src/routing.tsx:65:1
TS2322: Type '(to: string, options?: NavigateOptions<{}>) => Promise<void>' is not assignable to type 'NavigateFn'.
  Types of parameters 'to' and 'to' are incompatible.
    Type 'number' is not assignable to type 'string'.
    63 | // Wrap navigate(), to always preserve our query params:
    64 | const navigate = appHistory.navigate.bind(appHistory);
  > 65 | appHistory.navigate = function (to: string, options: NavigateOptions<{}> = {}) {
       | ^^^^^^^^^^^^^^^^^^^
    66 |     const [pathString, searchString] = to.split("?");
    67 |     const params = querystring.parse(searchString);
    68 |

webpack 5.92.1 compiled with 10 errors and 1 warning in 97724 ms

I have not changed any code, i cloned the repository into a new folder and ran the commands

Yes - deleting your package-lock.json will break lots of things. That lock specifies exactly which versions of dependencies to use (unlike package.json, which just gives a general range) and so deleting it effectively swaps all dependencies for the latest possible versions. There are clearly some changes there that aren't compatible. This is effectively ignoring the versions that the project is normally built & tested against, which (as you've discovered) will break lots of things.

PRs for those updates are welcome if you're interested, but that is definitely not expected to work automatically (here or in any other non-trivial JS project). Unless you want to do the work to make that happen, you'll need to use the committed package-lock.json so that you build with the expected dependency versions.

ERROR in Cannot read properties of undefined (reading 'source')

That seems to be the remaining problem here after the bundle analyzer was disabled. It's not totally clear, but I'd bet that that comes from here. What happens if you comment out both the bundle analyzer and that entire manifest transforms config?

Neither of those are really important outside real production environments (bundle analyzer just reports the size & source of bundled JS, while those manifest transforms make pre-caching for offline use more reliable) so you can live without them if they're causing issues. I still don't know why those would cause issues on your machine (they work fine everywhere else seemingly) but it's worth trying to get things working and check whether that's the issue you're facing.

Yup that did the trick! I have basically no experience with how js environments work so thanks a lot for educating me about the package-lock as well. I'll definitely try my best to contribute to this awesome project as soon as i gather some decent js skills. Thanks a lot!

Great! Glad that's working for you now. I'll keep this issue open until we've resolved the underlying problem here - if you have any ideas why those two steps might not work for you, that would be helpful, I'll see if I can find the issue myself later too when I have some time.

Contributions of all kinds welcome, feel free to open issues for any specific ideas you have if you want to discuss them first.

It turns out this was an issue with the font plugin on windows, which broke the manifest generation plugin, which already triggered warnings in that bundle analyzer plugin.

The font issue is now resolved, the build should now work out Windows out of the box, and there's a new job in CI that runs on every commit to double check that (and spot any other similar issues). I'll close this, thanks for your helping reporting & debugging this issue @DevBoiAgru & @pxhy! Great to be able to get things like this fixed :+1:

httptoolkit / httptoolkit-ui

npm run build error #117