Cannot run expo web in clean git client

[brandonpearcy]

Describe the bug I'm having trouble using react-native-reanimated-carousel in a react-native-web project, so I decided to try and debug further by running expo web locally. The documentation for contributing may be missing steps, or perhaps the build is really broken, as it is not possible to run yarn web successfully from a clean git client.

To Reproduce Steps to reproduce the behavior:

1. git clone https://github.com/dohooo/react-native-reanimated-carousel.git
2. cd react-native-reanimated-carousel
3. yarn
4. yarn web

Error output:

$ yarn --cwd exampleExpo web
$ expo start --web
Starting project at /Users/brandon/src/react-native-reanimated-carousel/exampleExpo
Unable to find expo in this project - have you run yarn / npm install yet?
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To make some progress, I tried:

1. cd exampleExpo
2. yarn
3. yarn build:web <== success!
4. yarn web <== fails!

yarn run v1.22.19
$ yarn --cwd exampleExpo web
$ expo start --web
┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (6.0.6).                 │
│   You are currently using expo-cli 6.0.1                                │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
Starting project at /Users/brandon/src/react-native-reanimated-carousel/exampleExpo
Some dependencies are incompatible with the installed expo package version:
 - expo-constants - expected version: ~13.2.4 - actual version installed: 13.2.3
 - expo-updates - expected version: ~0.14.6 - actual version installed: 0.14.4
 - react-native - expected version: 0.69.6 - actual version installed: 0.69.5
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo doctor --fix-dependencies,
or install individual packages by running expo install [package-name ...]
Starting Metro Bundler
Starting Webpack on port 19006 in development mode.
⚠ ｢wds｣: transportMode is an experimental option, meaning its usage could potentially change without warning
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀█ █▄▀▄▀██ ▄▄▄▄▄ █
█ █   █ █▀▀▀█ ▀▄█▄█ █   █ █
█ █▄▄▄█ █▀ █▀▀█▄▀██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀ ▀▄█▄█ █▄▄▄▄▄▄▄█
█▄  ▄▄▀▄▄▄▄▀▄▀ ▀▄▄▄█▄█ █ ██
█ ▀▄▀ █▄█ █▄█▀▄█ █▄██▄ █▄ █
█ ▀█▀██▄▀▀ ▄█▄▄▀█▄▀▄▄▄▀ ▀██
█ █ ▀█▄▄ ▄▄▄ ▄█▀▄▀▀ ▄▀ ▄  █
█▄█▄██▄▄▄ █▄▄  ▀▀ ▄▄▄ ▄ ▄▄█
█ ▄▄▄▄▄ █▄▄██ █▀▀ █▄█ ▀▄  █
█ █   █ █ █ ▀▀▄▀ ▄▄   ▄ ▀▀█
█ █▄▄▄█ █  ██ ██▄  ▀▀█▀▄█ █
█▄▄▄▄▄▄▄█▄████▄█▄██████▄▄▄█

› Metro waiting on exp://192.168.86.30:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Webpack waiting on http://192.168.86.30:19006
› Expo Webpack (web) is in beta, and subject to breaking changes!

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Started Metro Bundler
Web Bundling JavaScript [=============================================================   ] 95%› Favicon: No template image found, skipping auto generation...
Web Bundling complete 10237ms
./src/advanced-parallax/index.tsx:8
Module not found: Can't resolve 'react-native-reanimated-carousel'
   6 |     useAnimatedStyle,
   7 | } from 'react-native-reanimated';
>  8 | import Carousel from 'react-native-reanimated-carousel';
   9 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  10 | import { SBItem } from '../components/SBItem';
  11 | import SButton from '../components/SButton';
./src/anim-tab-bar/index.tsx:11
Module not found: Can't resolve 'react-native-reanimated-carousel'
   9 |     withTiming,
  10 | } from 'react-native-reanimated';
> 11 | import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
  12 | import SButton from '../components/SButton';
  13 | import { ElementsText, window } from '../constants';
  14 | import { useToggleButton } from '../hooks/useToggleButton';
./src/blur-parallax/index.tsx:7
Module not found: Can't resolve 'react-native-reanimated-carousel'
   5 |     useAnimatedStyle,
   6 | } from 'react-native-reanimated';
>  7 | import Carousel from 'react-native-reanimated-carousel';
   8 | import SButton from '../components/SButton';
   9 | import { ElementsText, window } from '../constants';
  10 | import { BlurView as _BlurView } from 'expo-blur';
./src/circular/index.tsx:2
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
> 2 | import Carousel from 'react-native-reanimated-carousel';
  3 | import SButton from '../components/SButton';
  4 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  5 | import { ElementsText, window } from '../constants';
./src/complex/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { ScrollView, Text, View } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import type { ICarouselInstance } from '../../../src/types';
  5 | import SButton from '../components/SButton';
  6 | import { window } from '../constants';
./src/cube-3d/index.tsx:9
Module not found: Can't resolve 'react-native-reanimated-carousel'
   7 |     useAnimatedStyle,
   8 | } from 'react-native-reanimated';
>  9 | import Carousel from 'react-native-reanimated-carousel';
  10 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  11 | import { SBItem } from '../components/SBItem';
  12 | import { window } from '../constants';
./src/curve/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import Animated, {
  5 |     Extrapolate,
  6 |     interpolate,
./src/flow/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { interpolate } from 'react-native-reanimated';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  5 | import { window } from '../constants';
  6 | import { useHeaderHeight } from '@react-navigation/elements';
./src/fold/index.tsx:2
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
> 2 | import Carousel from 'react-native-reanimated-carousel';
  3 | import SButton from '../components/SButton';
  4 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  5 | import { ElementsText, window } from '../constants';
./src/left-align/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View } from 'react-native';
> 3 | import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
  4 | import { SBItem } from '../components/SBItem';
  5 | import SButton from '../components/SButton';
  6 | import { ElementsText, window } from '../constants';
./src/marquee/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View, Text } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import { window } from '../constants';
  5 | import Animated, { Easing } from 'react-native-reanimated';
  6 |
./src/multiple/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import { SBItem } from '../components/SBItem';
  5 | import SButton from '../components/SButton';
  6 | import { ElementsText, window } from '../constants';
./src/normal/index.tsx:5
Module not found: Can't resolve 'react-native-reanimated-carousel'
  3 | import { View } from "react-native";
  4 | import type { ICarouselInstance } from "react-native-reanimated-carousel";
> 5 | import Carousel from "react-native-reanimated-carousel";
  6 |
  7 | import { SBItem } from "../components/SBItem";
  8 | import SButton from "../components/SButton";
./src/parallax/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import Animated, {
  5 |     Extrapolate,
  6 |     interpolate,
./src/parallax-layers/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import SButton from '../components/SButton';
  5 | import { ElementsText, window } from '../constants';
  6 | import Animated, {
./src/pause-advanced-parallax/index.tsx:8
Module not found: Can't resolve 'react-native-reanimated-carousel'
   6 |     useAnimatedStyle,
   7 | } from 'react-native-reanimated';
>  8 | import Carousel from 'react-native-reanimated-carousel';
   9 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  10 | import { SBItem } from '../components/SBItem';
  11 | import SButton from '../components/SButton';
./src/press-swipe/index.tsx:9
Module not found: Can't resolve 'react-native-reanimated-carousel'
   7 |     withTiming,
   8 | } from 'react-native-reanimated';
>  9 | import Carousel from 'react-native-reanimated-carousel';
  10 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  11 | import SButton from '../components/SButton';
  12 | import { ElementsText, window } from '../constants';
./src/rotate-in-out/index.tsx:4
Module not found: Can't resolve 'react-native-reanimated-carousel'
  2 | import { View } from 'react-native';
  3 | import { interpolate } from 'react-native-reanimated';
> 4 | import Carousel from 'react-native-reanimated-carousel';
  5 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  6 | import { SBItem } from '../components/SBItem';
  7 | import { ElementsText, window } from '../constants';
./src/rotate-scale-fade-in-out/index.tsx:4
Module not found: Can't resolve 'react-native-reanimated-carousel'
  2 | import { View } from 'react-native';
  3 | import { interpolate } from 'react-native-reanimated';
> 4 | import Carousel from 'react-native-reanimated-carousel';
  5 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  6 | import { SBItem } from '../components/SBItem';
  7 | import { ElementsText, window } from '../constants';
./src/scale-fade-in-out/index.tsx:4
Module not found: Can't resolve 'react-native-reanimated-carousel'
  2 | import { View } from 'react-native';
  3 | import { interpolate } from 'react-native-reanimated';
> 4 | import Carousel from 'react-native-reanimated-carousel';
  5 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  6 | import { SBItem } from '../components/SBItem';
  7 | import { window } from '../constants';
./src/stack/index.tsx:3
Module not found: Can't resolve 'react-native-reanimated-carousel'
  1 | import * as React from 'react';
  2 | import { View } from 'react-native';
> 3 | import Carousel from 'react-native-reanimated-carousel';
  4 | import { SBItem } from '../components/SBItem';
  5 | import SButton from '../components/SButton';
  6 | import { ElementsText } from '../constants';
./src/stack-cards/index.tsx:12
Module not found: Can't resolve 'react-native-reanimated-carousel'
  10 |     useSharedValue,
  11 | } from 'react-native-reanimated';
> 12 | import Carousel from 'react-native-reanimated-carousel';
  13 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  14 | import Animated from 'react-native-reanimated';
  15 | import { window } from '../constants';
./src/tear/index.tsx:8
Module not found: Can't resolve 'react-native-reanimated-carousel'
   6 |     useAnimatedStyle,
   7 | } from 'react-native-reanimated';
>  8 | import Carousel from 'react-native-reanimated-carousel';
   9 | import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
  10 | import SButton from '../components/SButton';
  11 | import { ElementsText, window } from '../constants';

Versions (please complete the following information):

• react: 16.13.1
• react-native: 0.63.4
• react-native-reanimated: 2.11.0
• react-native-reanimated-carousel: 3.1.1
• react-native-gesture-handler: 2.8.0

[dohooo]

Okay, thanks for your reminder, I'll check it.

[brandonpearcy]

Hi @dohooo ! Were you able to reproduce this issue? If not, I'm happy to provide any additional information that might be helpful. Just let me know! Huge thanks in advance for your help on this.