Unable to build in Mac Arm

[shirshak55]

npm install
npm WARN deprecated @types/classnames@2.3.1: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
npm WARN deprecated gulp-header@1.8.12: Removed event-stream from gulp-header
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated streamroller@0.7.0: 0.x is no longer supported. Please upgrade to 3.x or higher.
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 typescript-styled-plugin@0.15.0: Deprecated in favor of https://github.com/styled-components/typescript-styled-plugin
npm WARN deprecated workbox-google-analytics@7.0.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm WARN deprecated vscode-emmet-helper@1.2.11: This package has been renamed to @vscode/emmet-helper, please update to the new name
npm WARN deprecated log4js@3.0.6: 3.x is no longer supported. Please upgrade to 6.x or higher.
npm WARN deprecated highlight.js@9.18.5: Support has ended for 9.x series. Upgrade to @latest
npm WARN deprecated sinon@9.2.4: 16.1.1
npm WARN deprecated @types/yaml@1.9.7: This is a stub types definition. yaml provides its own type definitions, so you do not need this installed.
npm WARN deprecated puppeteer@5.5.0: < 21.5.0 is no longer supported
npm 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.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated date-format@1.2.0: 1.x is no longer supported. Please upgrade to 4.x or higher.
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 trim@0.0.1: Use String.prototype.trim() instead
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     '/Users/macbook/Desktop/projects/httptoolkit/httptoolkit-ui/node_modules/karma/node_modules/fsevents',
npm WARN cleanup     [Error: ENOTEMPTY: directory not empty, rmdir '/Users/macbook/Desktop/projects/httptoolkit/httptoolkit-ui/node_modules/karma/node_modules/fsevents'] {
npm WARN cleanup       errno: -66,
npm WARN cleanup       code: 'ENOTEMPTY',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: '/Users/macbook/Desktop/projects/httptoolkit/httptoolkit-ui/node_modules/karma/node_modules/fsevents'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path /Users/macbook/Desktop/projects/httptoolkit/httptoolkit-ui/node_modules/puppeteer
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! The chromium binary is not available for arm64:
npm ERR! If you are on Ubuntu, you can install with:
npm ERR!
npm ERR!  apt-get install chromium-browser
npm ERR!
npm ERR! /Users/macbook/Desktop/projects/httptoolkit/httptoolkit-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112
npm ERR!             throw new Error();
npm ERR!             ^
npm ERR!
npm ERR! Error
npm ERR!     at /Users/macbook/Desktop/projects/httptoolkit/httptoolkit-ui/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112:19
npm ERR!     at FSReqCallback.oncomplete (node:fs:199:21)
npm ERR!
npm ERR! Node.js v20.10.0

npm ERR! A complete log of this run can be found in: /Users/macbook/.npm/_logs/2024-02-18T23_31_10_897Z-debug-0.log

I think we can use playwright instead of puppeteer and seems to be well maintained.

[pimterry]

https://github.com/puppeteer/puppeteer/issues/7740 has some interesting background discussion about this.

I suspect if we switch to Playwright, it'll still have the same problem? Basically there needs to be some way to automatically download the browser and nobody really has that set up for arm64 yet seemingly. If not, I'm open to that I suppose. I'd rather keep things simple if we can, but it would be nice to have a setup that worked out of the box for everybody.

As an alternative, it looks like you can make this work by just setting PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true. If you do so, the integration tests probably won't run (unless you also install Chromium and correctly configure the path, however that works) but to be honest you don't need those locally, they're only really important as a final check in CI, to make sure we never accidentally release a UI that doesn't load at all.

[shirshak55]

@pimterry i am not getting it. I have used playwright countless time in macos m1 and it doesn't give any error. Playwright download browser and manages itself. I don't know about puppeteer.

[pimterry]

I don't know about their different approaches to be honest. They should both have similar constraints though, so if Playwright successfully downloads & installs Chrome then Puppeteer can probably do the same, it's just nobody has got around to adding specific support yet.

Does Playwright definitely install Chrome for you, or is it that it uses the existing Chrome you have locally?

In general puppeteer is the more widely used & more mature option I think... But not a big difference, both fairly similar overall popularity. My impression is it's more generic & flexible, for remote controlling browsers in general, while Playwright is a bit more focused & complex, providing in depth tools to handle browser integration testing specifically.

Have you tested the env var above? Does that work as a workaround?

[shirshak55]

@pimterry

Yes, playwright installs chrome for me and manages chrome automatically.

I think that environment variable works.