Rendering loop expo react native web

77 Views Asked by At

Why does npx expo start and then running web create a endless loop of compiling for web?

I cant understand why this happens

This is what i see in terminal:

Logs for your project will appear below. Press Ctrl+C to exit.
    Web node_modules/expo-router/entry.js ▓▓▓░░░░░░░░░░░░░ 24.4% ( 674/2454)
    Web node_modules/expo-router/node/render.js ▓▓▓▓░░░░░░░░░░░░ 25.8% ( 279/1995)
    Web node_modules/expo-router/entry.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/node/render.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/entry.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/node/render.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/entry.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/node/render.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/entry.js ░░░░░░░░░░░░░░░░  0.0% (0/1)
    Web node_modules/expo-router/node/render.js ░░░░░░░░░░░░░░░░  0.0% (0/1)

and after that:

Web Bundling complete 125912ms
Web Bundling complete 115721ms
Web Bundling complete 115803ms
Web Bundling complete 93894ms
Web Bundling complete 93936ms
Web Bundling complete 66106ms
Web Bundling complete 127441ms
Web Bundling complete 116727ms
Web Bundling complete 116781ms
Web Bundling complete 94849ms
Web Bundling complete 94846ms
Web Bundling complete 66980ms

then without using the web app automatically i get this rendered in console from time to time:

Web Bundling complete 255ms
Web Bundling complete 113ms
"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".
Web Bundling complete 233ms
Web Bundling complete 104ms
"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".
Web Bundling complete 220ms
Web Bundling complete 104ms
"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".

I tried with --clear, nothing seems to work or resolve this issue.

Im using tamagui and my _layout for root is like this:

 <SessionProvider>
  <TamaguiProvider config={config} defaultTheme="dark">
    <Theme name="purple">
      <ThemeProvider value={CustomDarkTheme}>
        <OfflineNotice />
        <Stack initialRouteName="(auth)/login">
          <Stack.Screen name="(auth)" options={{ headerShown: false }} />
          <Stack.Screen name="(app)" options={{ headerShown: false }} />
          <Stack.Screen
            name="checkLoginStatus"
            options={{ headerShown: false }}
          />
        </Stack>
      </ThemeProvider>
    </Theme>
  </TamaguiProvider>
</SessionProvider>

Eventually it crashes and i get something like this in console:

<--- Last few GCs --->

[27462:0x6393420]   661440 ms: Mark-Compact (reduce) 2038.5 (2069.6) -> 2036.4 (2069.4) MB, 120.53 / 0.01 ms  (+ 1287.8 ms in 108 steps since start of marking, biggest step 54.0 ms, walltime since start of marking 1643 ms) (average mu = 0.798, current mu [27462:0x6393420]   662368 ms: Mark-Compact (reduce) 2037.3 (2069.4) -> 2036.4 (2070.4) MB, 914.42 / 0.00 ms  (average mu = 0.683, current mu = 0.014) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xc99970 node::Abort() [node]
 2: 0xb6ffcb  [node]
 3: 0xebe9f0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [node]
 4: 0xebecd7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [node]
 5: 0x10d0785  [node]
 6: 0x10e8608 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 7: 0x10be721 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
 8: 0x10bf8b5 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
 9: 0x109bef6 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node]
10: 0x108d9f4 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawWithImmortalMap(int, v8::internal::AllocationType, v8::internal::Map, v8::internal::AllocationAlignment) [node]
11: 0x1090da7 v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString(int, v8::internal::AllocationType) [node]
12: 0x154e28c v8::internal::IncrementalStringBuilder::Extend() [node]
13: 0x120d7b1 v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [node]
14: 0x120ed51 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
15: 0x1212ca9 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
16: 0x1212237 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
17: 0x1213a96 v8::internal::JsonStringify(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [node]
18: 0xf50ba2 v8::internal::Builtin_JsonStringify(int, unsigned long*, v8::internal::Isolate*) [node]
19: 0x1931df6  [node]
Aborted

my package.json:

{
  "name": "app",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo-google-fonts/inter": "^0.2.3",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/netinfo": "9.3.10",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.0.2",
    "@tamagui/babel-plugin": "^1.76.0",
    "@tamagui/config": "^1.76.0",
    "@tamagui/shorthands": "^1.76.0",
    "@tamagui/themes": "^1.76.0",
    "apisauce": "^3.0.1",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "core-js": "^3.33.3",
    "expo": "~49.0.15",
    "expo-app-loading": "^2.1.1",
    "expo-constants": "~14.4.2",
    "expo-font": "~11.4.0",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.0",
    "expo-secure-store": "~12.3.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-system-ui": "~2.4.0",
    "expo-web-browser": "~12.3.2",
    "formik": "^2.4.5",
    "jwt-decode": "^4.0.0",
    "lucide-react-native": "^0.292.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "tamagui": "^1.76.0",
    "yup": "^1.3.2",
    "lottie-react-native": "5.1.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "jest": "^29.2.1",
    "jest-expo": "~49.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "overrides": {
    "react-refresh": "~0.14.0"
  },
  "resolutions": {
    "react-refresh": "~0.14.0"
  },
  "private": true
}
0

There are 0 best solutions below