[Question]: Is anyone else having issues getting the developer environment set up on silicon Mac processors?

[imp-dance]

Question for Carbon

I'm a fairly active user of carbon components, and intermittently I've thought about contributing, but every time I'm blocked by some kind of setup/installation error when trying to set up the repository on my Mac.

I'm using a M1 Max, on Ventura 13.0. Node 18.1.0.

Here's the output log for when I run yarn install:

➤ YN0000: ┌ Resolution step
➤ YN0002: │ @carbon/cli@workspace:packages/cli doesn't provide @octokit/core (p17eb1), requested by @octokit/plugin-throttling
➤ YN0002: │ @carbon/react@workspace:packages/react doesn't provide @storybook/addons (p7e10c), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react doesn't provide @storybook/api (p84d04), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react doesn't provide @storybook/components (pe55db), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react doesn't provide @storybook/core-events (p9a68c), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react doesn't provide require-from-string (pd2749), requested by @storybook/react
➤ YN0002: │ @carbon/react@workspace:packages/react [4a750] doesn't provide @storybook/addons (p1d025), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react [4a750] doesn't provide @storybook/api (p6c3e7), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react [4a750] doesn't provide @storybook/components (pb4d12), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react [4a750] doesn't provide @storybook/core-events (pcec61), requested by @storybook/addon-knobs
➤ YN0002: │ @carbon/react@workspace:packages/react [4a750] doesn't provide require-from-string (p3fd8d), requested by @storybook/react
➤ YN0002: │ @carbon/themes@workspace:packages/themes doesn't provide @babel/core (pb5392), requested by @babel/node
➤ YN0002: │ @carbon/themes@workspace:packages/themes doesn't provide @babel/core (p3b7e3), requested by @babel/preset-env
➤ YN0002: │ @carbon/upgrade@workspace:packages/upgrade doesn't provide @babel/preset-env (p56f67), requested by jscodeshift
➤ YN0002: │ @lerna/version@npm:6.4.0 doesn't provide nx (pc8ac1), requested by @nrwl/devkit
➤ YN0002: │ @nrwl/devkit@npm:15.4.5 [5b16f] doesn't provide typescript (pad8db), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nrwl/devkit@npm:15.4.5 [e609a] doesn't provide typescript (pe49c0), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @octokit/rest@npm:16.43.1 doesn't provide @octokit/core (pdb8a3), requested by @octokit/plugin-request-log
➤ YN0002: │ @skpm/babel-preset@npm:0.2.3 doesn't provide @babel/core (pec9b3), requested by @babel/preset-env
➤ YN0002: │ @skpm/babel-preset@npm:0.2.3 doesn't provide @babel/core (pa25f8), requested by @babel/plugin-transform-runtime
➤ YN0002: │ @skpm/babel-preset@npm:0.2.3 doesn't provide @babel/core (p811a8), requested by @babel/preset-react
➤ YN0002: │ @storybook/addon-docs@npm:6.5.6 [1c439] doesn't provide @babel/core (p56e37), requested by @babel/preset-env
➤ YN0002: │ @storybook/addon-docs@npm:6.5.6 [1c439] doesn't provide @babel/core (p5836a), requested by @babel/plugin-transform-react-jsx
➤ YN0002: │ @storybook/addon-docs@npm:6.5.6 [1c439] doesn't provide @babel/core (p1cd00), requested by babel-loader
➤ YN0002: │ @storybook/addon-docs@npm:6.5.6 [1c439] doesn't provide webpack (p14338), requested by babel-loader
➤ YN0002: │ @storybook/addon-notes@npm:5.3.21 [1c439] doesn't provide react-dom (p6c002), requested by @storybook/router
➤ YN0002: │ @storybook/addon-notes@npm:5.3.21 [1c439] doesn't provide react-dom (p93f3e), requested by @storybook/theming
➤ YN0002: │ @storybook/addon-notes@npm:5.3.21 [1c439] doesn't provide regenerator-runtime (p6c222), requested by @storybook/api
➤ YN0002: │ @storybook/addons@npm:5.3.21 doesn't provide regenerator-runtime (p23d0c), requested by @storybook/api
➤ YN0060: │ @storybook/api@npm:5.3.21 [95e28] provides react (p47f32) with version 18.2.0, which doesn't satisfy what @reach/router and some of its descendants request
➤ YN0002: │ @storybook/api@npm:5.3.21 [95e28] doesn't provide react-dom (p708bc), requested by @reach/router
➤ YN0002: │ @storybook/api@npm:5.3.21 [95e28] doesn't provide react-dom (pcdcf3), requested by @storybook/router
➤ YN0002: │ @storybook/api@npm:5.3.21 [95e28] doesn't provide react-dom (pd04d4), requested by @storybook/theming
➤ YN0060: │ @storybook/components@npm:5.3.21 [b5de7] provides react-dom (pbcc67) with version 18.2.0, which doesn't satisfy what react-helmet-async requests
➤ YN0060: │ @storybook/components@npm:5.3.21 [b5de7] provides react-dom (pdb9d6) with version 18.2.0, which doesn't satisfy what react-popper-tooltip requests
➤ YN0060: │ @storybook/components@npm:5.3.21 [b5de7] provides react-dom (p2e213) with version 18.2.0, which doesn't satisfy what simplebar-react requests
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react (pd5235) with version 18.2.0, which doesn't satisfy what react-focus-lock and some of its descendants request
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react (p0c2e0) with version 18.2.0, which doesn't satisfy what react-helmet-async requests
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react (p89faa) with version 18.2.0, which doesn't satisfy what react-popper-tooltip and some of its descendants request
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react (p428bd) with version 18.2.0, which doesn't satisfy what react-textarea-autosize requests
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react (pdbada) with version 18.2.0, which doesn't satisfy what simplebar-react requests
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react-dom (p150b4) with version 18.2.0, which doesn't satisfy what react-helmet-async requests
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react-dom (p45483) with version 18.2.0, which doesn't satisfy what react-popper-tooltip requests
➤ YN0060: │ @storybook/components@npm:5.3.22 [39ecd] provides react-dom (pd85b9) with version 18.2.0, which doesn't satisfy what simplebar-react requests
➤ YN0002: │ @storybook/docs-tools@npm:6.5.6 doesn't provide react (p240ce), requested by @storybook/store
➤ YN0002: │ @storybook/docs-tools@npm:6.5.6 doesn't provide react-dom (p183b2), requested by @storybook/store
➤ YN0002: │ @storybook/mdx1-csf@npm:0.0.1 doesn't provide @babel/core (p557dc), requested by @babel/preset-env
➤ YN0002: │ @storybook/telemetry@npm:6.5.6 doesn't provide react (p1b80e), requested by @storybook/core-common
➤ YN0002: │ @storybook/telemetry@npm:6.5.6 doesn't provide react-dom (p81d68), requested by @storybook/core-common
➤ YN0002: │ carbon@workspace:. doesn't provide @testing-library/dom (pc8e59), requested by @testing-library/user-event
➤ YN0002: │ carbon@workspace:. doesn't provide playwright-core (pcf785), requested by @percy/playwright
➤ YN0060: │ class-prefix@workspace:examples/class-prefix provides react (p00a67) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ class-prefix@workspace:examples/class-prefix provides react-dom (pffaa0) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ codesandbox-with-sass-compilation@workspace:examples/codesandbox-with-sass-compilation provides react (p56d32) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ codesandbox-with-sass-compilation@workspace:examples/codesandbox-with-sass-compilation provides react-dom (p1921d) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ codesandbox@workspace:examples/codesandbox provides react (pce94c) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ codesandbox@workspace:examples/codesandbox provides react-dom (peabe9) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ custom-theme@workspace:examples/custom-theme provides react (p3a98b) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ custom-theme@workspace:examples/custom-theme provides react-dom (p76ce9) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0002: │ eslint-config-carbon@workspace:config/eslint-config-carbon doesn't provide @babel/core (p34bf0), requested by @babel/eslint-parser
➤ YN0002: │ eslint-config-react-app@npm:7.0.0 [a4369] doesn't provide @babel/plugin-syntax-flow (pf4f95), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.0 [a4369] doesn't provide @babel/plugin-transform-react-jsx (p05309), requested by eslint-plugin-flowtype
➤ YN0060: │ examples-light-dark@workspace:examples/light-dark-mode provides react (p0f661) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ examples-light-dark@workspace:examples/light-dark-mode provides react-dom (p18982) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ examples-nextjs@workspace:examples/nextjs provides react (p9844a) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ examples-nextjs@workspace:examples/nextjs provides react-dom (p0527d) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ id-prefix@workspace:examples/id-prefix provides react (p12832) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ id-prefix@workspace:examples/id-prefix provides react-dom (pe0730) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ incremental-migration@workspace:examples/incremental-migration provides react (p55e45) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ incremental-migration@workspace:examples/incremental-migration provides react (p4b447) with version 18.2.0, which doesn't satisfy what carbon-components-react requests
➤ YN0060: │ incremental-migration@workspace:examples/incremental-migration provides react-dom (p4a8dd) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ incremental-migration@workspace:examples/incremental-migration provides react-dom (pf90c6) with version 18.2.0, which doesn't satisfy what carbon-components-react requests
➤ YN0002: │ jest-config-carbon@workspace:config/jest-config-carbon doesn't provide jest (p497ca), requested by jest-watch-typeahead
➤ YN0002: │ react-scripts@npm:5.0.0 [b70e6] doesn't provide autoprefixer (pa3bff), requested by tailwindcss
➤ YN0002: │ storybook-readme@npm:5.0.9 doesn't provide react (p26018), requested by react-element-to-jsx-string
➤ YN0002: │ storybook-readme@npm:5.0.9 doesn't provide react-dom (p3b3ef), requested by react-element-to-jsx-string
➤ YN0002: │ storybook-readme@npm:5.0.9 doesn't provide vue (pf5b06), requested by vuex
➤ YN0002: │ stylelint-config-recommended-scss@npm:5.0.2 [f6f75] doesn't provide postcss (p154d8), requested by postcss-scss
➤ YN0060: │ v10-token-compat-in-v11@workspace:examples/v10-token-compat-in-v11 provides react (p3cf25) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ v10-token-compat-in-v11@workspace:examples/v10-token-compat-in-v11 provides react-dom (pffa52) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ vite@workspace:examples/vite provides react (pdf648) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ vite@workspace:examples/vite provides react-dom (p6c011) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ www@workspace:www provides react (pf1f4d) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0060: │ www@workspace:www provides react-dom (pff4e7) with version 18.2.0, which doesn't satisfy what @carbon/react and some of its descendants request
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 307ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 331ms
➤ YN0000: ┌ Link step
➤ YN0007: │ canvas@npm:2.11.2 must be built because it never has been before or the last one failed
➤ YN0009: │ canvas@npm:2.11.2 couldn't be built successfully (exit code 1, logs can be found here: /private/var/folders/0b/f49sy67j09d9l5g1tvywp8th0000gn/T/xfs-38253d9c/build.log)
➤ YN0000: └ Completed in 2s 244ms
➤ YN0000: Failed with errors in 3s 211ms

And the log file mentioned in the previous log:

# This file contains the result of Yarn building a package (canvas@npm:2.11.2)
# Script name: install

node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.10
node-pre-gyp info using node@18.1.0 | darwin | arm64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@18.1.0 (node-v108 ABI, unknown) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@18.1.0 | darwin | arm64
gyp info ok 
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@18.1.0 | darwin | arm64
gyp info find Python using Python version 3.10.8 found at "/Library/Frameworks/Python.framework/Versions/3.10/bin/python3"
(node:83856) [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 /Library/Frameworks/Python.framework/Versions/3.10/bin/python3
gyp info spawn args [
gyp info spawn args   '/Users/my-user-name/Documents/Projects/carbon-new/carbon/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/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/my-user-name/Library/Caches/node-gyp/18.1.0/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/my-user-name/Library/Caches/node-gyp/18.1.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/my-user-name/Library/Caches/node-gyp/18.1.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas',
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 pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `pixman-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pixman-1' found
gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 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 (/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 22.1.0
gyp ERR! command "/Users/my-user-name/.nvm/versions/node/v18.1.0/bin/node" "/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
gyp ERR! cwd /Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas
gyp ERR! node -v v18.1.0
gyp ERR! node-gyp -v v7.1.2
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/Users/my-user-name/.nvm/versions/node/v18.1.0/bin/node /Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)
node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
node-pre-gyp ERR! System Darwin 22.1.0
node-pre-gyp ERR! command "/Users/my-user-name/.nvm/versions/node/v18.1.0/bin/node" "/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/@mapbox/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd /Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas
node-pre-gyp ERR! node -v v18.1.0
node-pre-gyp ERR! node-pre-gyp -v v1.0.10
node-pre-gyp ERR! not ok 
Failed to execute '/Users/my-user-name/.nvm/versions/node/v18.1.0/bin/node /Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/my-user-name/Documents/Projects/carbon-new/carbon/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)

I've had other issues as well in the past that were not related to the canvas package, so I'm really just wondering if anyone else successfully has set up the environment on a M1 Mac, or if we're not sure if it's even possible with the current versions of dependencies?

Code of Conduct

• I agree to follow this project's Code of Conduct

[alisonjoseph]

Yes we're also seeing this and looking into a fix.

[imp-dance]

Yes we're also seeing this and looking into a fix.

Great to know, would love an update if you manage to resolve it.

[tay1orjones]

I think it's due to this Automattic/node-canvas#2036

[tay1orjones]

@tw15egan @francinelucca is there an alternative package that could be used in place of canvas? It sounds like the dependency must be built from source and prebuilds aren't available for arm64, Automattic/node-canvas#1511

Prebuilds aren't available for ARM. Please see the wiki for guides on building from source. See also node-gfx/node-canvas-prebuilt#69.

[tay1orjones]

Or maybe we could move the tests for the datatable canvas-based measurement of cells to be in an e2e test in the actual browser so we could remove the canvas dependency?