twilio-video-app-react

twilio-video-app-react copied to clipboard

I'm trying to install this repo on my MacBook Pro M1 (macOS 12.3.1) and I'm getting the following error:

npm ERR! path /Users/tonymccallie/Sites/twilio-video-app-react/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/tonymccallie/Sites/twilio-video-app-react/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/tonymccallie/Sites/twilio-video-app-react/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112:19
npm ERR!     at FSReqCallback.oncomplete (node:fs:198:21)

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tonymccallie/.npm/_logs/2022-04-07T16_12_19_734Z-debug.log```

I found this article with a possible solution: https://linguinecode.com/post/how-to-fix-m1-mac-puppeteer-chromium-arm64-bug

But when I installed chromium with homebrew.. I can't open it because I get:
'“Chromium.app” is damaged and can’t be opened. You should move it to the Trash.'

Any recommendations on how I can make this work?

Hey @tonymccallie - thanks for the question!

Sorry this isn't working on an M1 Mac. My first thought is - if you don't need to run any of the E2E tests for this app, then you can run the following command to skip the installation of all of the testing libraries. Hopefully it can help you avoid the issue.

npm install --production

The --production flag skips over the devDependencies during the installation process, so it will skip Cypress and Puppeteer.

Let me know if this works out for you! If you do need to run the E2E tests with Cypress and Puppeteer, let me know and we can try and get something figured out for you!

@timmydoza this allowed to me to at least get started with an install, thanks. We'll see how far I get.

You might consider adding a note to the README for this. Super helpful, thanks.

@timmydoza Here's an alternate approach that makes puppeteer happy

Building the Video react app on M1 Mac

If you get an error like this:

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/cconnolly/Development/twilio-video-app-react/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112
npm ERR!             throw new Error();

Then run this brew install chromium

And if you then get an error “Chromium” is damaged and can’t be opened. You should move it to the Bin.

Run this xattr -cr /Applications/Chromium.app

Then edit ~/.zshrc add the following

export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
export PUPPETEER_EXECUTABLE_PATH=`which chromium`

and then run source ~/.zshrc

now try npm install again

Thank you @chaosloth! That's super helpful. I'll leave this issue open for a bit for visibility.

I'm running into a slightly different issue on M1. I can run npm install --production

But when I try and run npm run deploy:twilio-cli I get the following error:

Failed to compile.

TS2307: Cannot find module 'enzyme' or its corresponding type declarations.
    4 | import PreJoinScreens from './components/PreJoinScreens/PreJoinScreens';
    5 | import Room from './components/Room/Room';
  > 6 | import { shallow } from 'enzyme';
      |                         ^^^^^^^^
    7 | import useHeight from './hooks/useHeight/useHeight';
    8 | import useRoomState from './hooks/useRoomState/useRoomState';
    9 |

I've tried the above steps but to no avail - how do I remove these test files from the build process?

I was able to fix it by installing dev dependencies and following the advice above - seems like they are required for the deployment process

@fmhall What were the steps that you followed? Im unable to install this package on the M1

I'm running into a slightly different issue on M1. I can run npm install --production

But when I try and run npm run deploy:twilio-cli I get the following error:

Failed to compile.

TS2307: Cannot find module 'enzyme' or its corresponding type declarations. 4 | import PreJoinScreens from './components/PreJoinScreens/PreJoinScreens'; 5 | import Room from './components/Room/Room';

6 | import { shallow } from 'enzyme'; | ^^^^^^^^ 7 | import useHeight from './hooks/useHeight/useHeight'; 8 | import useRoomState from './hooks/useRoomState/useRoomState'; 9 |

@Chi-elife did u got any answer about this?

I ended up changing puppeteer in the package.json from

-    "puppeteer": "^5.3.1",
+    "puppeteer": "latest",

then npm update and the install worked.