[Bug]: Unable to install headlessui deps on M1

[colinking]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.1

What browser are you using?

n/a

Reproduction repository

n/a

Describe your issue

I noticed that yarn fails to install the deps for this repo when run on an M1 mac:

❯ yarn
yarn install v1.22.11
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @headlessui/[email protected]" has unmet peer dependency "react@^16 || ^17 || ^18".
warning " > @headlessui/[email protected]" has unmet peer dependency "react-dom@^16 || ^17 || ^18".
warning " > @headlessui/[email protected]" has unmet peer dependency "vue@^3.0.0".
warning "workspace-aggregator-f4346740-c65a-4bf9-9508-ce309615b4d4 > @headlessui/react > [email protected]" has unmet peer dependency "jest@>=16".
warning "workspace-aggregator-f4346740-c65a-4bf9-9508-ce309615b4d4 > @headlessui/vue > @testing-library/[email protected]" has incorrect peer dependency "vue@^2.6.10".
warning "workspace-aggregator-f4346740-c65a-4bf9-9508-ce309615b4d4 > @headlessui/vue > @testing-library/[email protected]" has unmet peer dependency "vue-template-compiler@^2.6.10".
warning "workspace-aggregator-f4346740-c65a-4bf9-9508-ce309615b4d4 > @headlessui/vue > @vue/[email protected]" has incorrect peer dependency "[email protected]".
warning "workspace-aggregator-f4346740-c65a-4bf9-9508-ce309615b4d4 > @headlessui/vue > @testing-library/vue > @vue/[email protected]" has incorrect peer dependency "[email protected]".
warning "workspace-aggregator-f4346740-c65a-4bf9-9508-ce309615b4d4 > @headlessui/vue > @testing-library/vue > @vue/[email protected]" has unmet peer dependency "vue-template-compiler@^2.x".
[4/4] 🔨  Building fresh packages...
[6/6] ⠠ esbuild
[2/6] ⠠ husky
[3/6] ⠠ @ampproject/toolbox-optimizer
[4/6] ⠠ fsevents
error /Users/colin/dev/colinking/headlessui/node_modules/esbuild: Command failed.
Exit code: 1
Command: node install.js
Arguments:




warning Error running install script for optional dependency: "/Users/colin/dev/colinking/headlessui/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: /Users/colin/dev/colinking/headlessui/node_modules/sharp
Output:
info sharp Detected globally-installed libvips v8.11.3
info sharp Building from source via node-gyp
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info find Python using Python version 2.7.16 found at \"/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python\"
(node:20258) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
(Use `node --trace-deprecation ...` to show where the warning was created)
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/opt/homebrew/Cellar/node/16.9.1/libexec/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/colin/dev/colinking/headlessui/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/opt/homebrew/Cellar/node/16.9.1/libexec/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/colin/Library/Caches/node-gyp/16.9.1/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/colin/Library/Caches/node-gyp/16.9.1',
gyp info spawn args   '-Dnode_gyp_dir=/opt/homebrew/Cellar/node/16.9.1/libexec/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/colin/Library/Caches/node-gyp/16.9.1/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/colin/dev/colinking/headlessui/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
Package OpenEXR was not found in the pkg-config search path.
Perhaps you should add the directory containing `OpenEXR.pc'
to the PKG_CONFIG_PATH environment variable
Package 'OpenEXR', required by 'vips', not found
gyp: Call to 'PKG_CONFIG_PATH=\"/usr/lib/pkgconfig:/opt/homebrew/Library/Homebrew/os/mac/pkgconfig/11:/usr/local/lib/pkgconfig:/usr/lib/pkgconfig\" pkg-config --cflags-only-I vips-cpp vips glib-2.0 | sed s\\/-I//g' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/opt/homebrew/Cellar/node/16.9.1/libexec/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command \"/opt/homebrew/Cellar/node/16.9.1/bin/node\" \"/opt/homebrew/Cellar/node/16.9.1/libexec/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/colin/dev/colinking/headlessui/node_modules/sharp
gyp ERR! node -v v16.9.1
gyp ERR! node-gyp -v v7.1.2
gyp ERR! not ok"
info This module is OPTIONAL, you can safely ignore this error

The important bit being:

warning Error running install script for optional dependency: "/Users/colin/dev/colinking/headlessui/node_modules/sharp: Command failed.
Exit code: 1

This appears to be an issue with sharp which was resolved in v0.28.0: lovell/sharp#2460 (comment)

The dependency on sharp comes from next:

❯ yarn why sharp
yarn why v1.22.11
[1/4] 🤔  Why do we have the module "sharp"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#@headlessui#react#next" depends on it
   - Hoisted from "_project_#@headlessui#react#next#sharp"
✨  Done in 0.44s.

The version of next in use by headlessui, 10.0.5, depends on sharp v0.26.3.

It looks like next removed the sharp dep in 10.0.8, so should be sufficient to upgrade to >=10.0.8.

There's another warning in there for esbuild, which comes from vite. Upgrading to the latest 1.x (1.0.0-rc.13) seems to fix.

[ChrisGV04]

That's strange. I also have a Macbook with M1 but I use NPM instead of YARN and I was able to install it without any issues. I'm also building a project with Vite but using Vue instead of React, I don't know if the issue is only with React.

[arda-e]

I've been using headless ui with react on m1 for a while without any problems. You could try to downgrade node version or start the terminal in rosetta compatibility mode.

[colinking]

This is an issue with working on the headlessui repo, not when installing the headlessui package in another project (which, for the record, works just fine on my M1).

[rgossiaux]

Not M1 specific, but I also had to downgrade my node version to 16.8 using fnm in order for the react playground to work, thanks to this bug: facebook/create-react-app#11565

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Most people on the Tailwind Labs team, including myself are on an m1 and we don't seem to have this issue. Because of this, I'm closing it since I can't reproduce this.