expo: Expo web does not run on SDK 49

Minimal reproducible example

https://github.com/dooboolab-community/expo-router-starter/tree/migration/expo-49

Summary

Screenshot 2023-07-09 at 10 37 20 PM

I am not sure if this are issues with other packages but my boilerplate project started to fail running on web environment.

It started failing in branch migration/expo-49 while it works perfectly in main branch.

Logs here

"textShadow*" style props are deprecated. Use "textShadow".
warnOnce @ index.js:26
preprocess @ preprocess.js:126
compileAndInsertAtomic @ index.js:58
(anonymous) @ index.js:101
create @ index.js:89
(anonymous) @ ErrorToast.js:87
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ ErrorToastContainer.web.js:41
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.js:11
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ error-overlay.js:1
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ registerRootComponent.tsx:11
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ renderRootComponent.tsx:5
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ entry.js:1
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.js:1
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.tsx:26
index.js:1 "transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".
warnOnce @ index.js:26
preprocess @ preprocess.js:161
compileAndInsertAtomic @ index.js:58
(anonymous) @ index.js:101
create @ index.js:89
(anonymous) @ HeaderBackButton.js:123
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.js:7
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ NativeStackView.js:2
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ createNativeStackNavigator.js:4
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.js:9
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ Stack.tsx:8
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.tsx:3
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ _app.tsx:8
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ entry.js:2
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.js:1
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ index.tsx:26
getRoutes.ts:298 Error loading route "./_layout.tsx" TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:542:24)
    at emotion-element-c39617d8.browser.esm.js:22:11
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at emotion-react.browser.esm.js:4:1
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at ThemeProvider.tsx:12:1
(anonymous) @ getRoutes.ts:298
contextModuleToFileNodes @ getRoutes.ts:274
contextModuleToTree @ getRoutes.ts:419
getExactRoutes @ getRoutes.ts:408
getRoutes @ getRoutes.ts:363
initialize @ router-store.tsx:70
(anonymous) @ router-store.tsx:254
mountMemo @ react-dom.development.js:17227
useMemo @ react-dom.development.js:17672
useMemo @ react.development.js:1652
useInitializeExpoRouter @ router-store.tsx:252
ContextNavigator @ ExpoRoot.tsx:90
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performConcurrentWorkOnRoot @ react-dom.development.js:25741
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
getRoutes.ts:298 Error loading route "./details.tsx" TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:542:24)
    at emotion-element-c39617d8.browser.esm.js:22:11
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at emotion-react.browser.esm.js:4:1
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at ThemeProvider.tsx:12:1
(anonymous) @ getRoutes.ts:298
contextModuleToFileNodes @ getRoutes.ts:274
contextModuleToTree @ getRoutes.ts:419
getExactRoutes @ getRoutes.ts:408
getRoutes @ getRoutes.ts:363
initialize @ router-store.tsx:70
(anonymous) @ router-store.tsx:254
mountMemo @ react-dom.development.js:17227
useMemo @ react-dom.development.js:17672
useMemo @ react.development.js:1652
useInitializeExpoRouter @ router-store.tsx:252
ContextNavigator @ ExpoRoot.tsx:90
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performConcurrentWorkOnRoot @ react-dom.development.js:25741
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
getRoutes.ts:298 Error loading route "./index.tsx" TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:542:24)
    at emotion-element-c39617d8.browser.esm.js:22:11
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at emotion-react.browser.esm.js:4:1
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at ThemeProvider.tsx:12:1
(anonymous) @ getRoutes.ts:298
contextModuleToFileNodes @ getRoutes.ts:274
contextModuleToTree @ getRoutes.ts:419
getExactRoutes @ getRoutes.ts:408
getRoutes @ getRoutes.ts:363
initialize @ router-store.tsx:70
(anonymous) @ router-store.tsx:254
mountMemo @ react-dom.development.js:17227
useMemo @ react-dom.development.js:17672
useMemo @ react.development.js:1652
useInitializeExpoRouter @ router-store.tsx:252
ContextNavigator @ ExpoRoot.tsx:90
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performConcurrentWorkOnRoot @ react-dom.development.js:25741
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
SafeAreaContext.js:74 Uncaught Error: No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.
    at useSafeAreaInsets (SafeAreaContext.js:74:10)
    at SafeAreaView.web.js:28:116
    at renderWithHooks (react-dom.development.js:16307:7)
    at updateForwardRef (react-dom.development.js:19229:10)
    at beginWork (react-dom.development.js:21639:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4166:9)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4216:16)
    at invokeGuardedCallback (react-dom.development.js:4279:1)
    at beginWork$1 (react-dom.development.js:27453:29)
    at performUnitOfWork (react-dom.development.js:26559:10)
useSafeAreaInsets @ SafeAreaContext.js:74
(anonymous) @ SafeAreaView.web.js:28
renderWithHooks @ react-dom.development.js:16307
updateForwardRef @ react-dom.development.js:19229
beginWork @ react-dom.development.js:21639
callCallback @ react-dom.development.js:4166
invokeGuardedCallbackDev @ react-dom.development.js:4216
invokeGuardedCallback @ react-dom.development.js:4279
beginWork$1 @ react-dom.development.js:27453
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performConcurrentWorkOnRoot @ react-dom.development.js:25741
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
getRoutes.ts:298 Error loading route "./_layout.tsx" TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:542:24)
    at emotion-element-c39617d8.browser.esm.js:22:11
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at emotion-react.browser.esm.js:4:1
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at ThemeProvider.tsx:12:1
(anonymous) @ getRoutes.ts:298
contextModuleToFileNodes @ getRoutes.ts:274
contextModuleToTree @ getRoutes.ts:419
getExactRoutes @ getRoutes.ts:408
getRoutes @ getRoutes.ts:363
initialize @ router-store.tsx:70
(anonymous) @ router-store.tsx:254
mountMemo @ react-dom.development.js:17227
useMemo @ react-dom.development.js:17672
useMemo @ react.development.js:1652
useInitializeExpoRouter @ router-store.tsx:252
ContextNavigator @ ExpoRoot.tsx:90
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
recoverFromConcurrentError @ react-dom.development.js:25853
performConcurrentWorkOnRoot @ react-dom.development.js:25752
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
getRoutes.ts:298 Error loading route "./details.tsx" TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:542:24)
    at emotion-element-c39617d8.browser.esm.js:22:11
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at emotion-react.browser.esm.js:4:1
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at ThemeProvider.tsx:12:1
(anonymous) @ getRoutes.ts:298
contextModuleToFileNodes @ getRoutes.ts:274
contextModuleToTree @ getRoutes.ts:419
getExactRoutes @ getRoutes.ts:408
getRoutes @ getRoutes.ts:363
initialize @ router-store.tsx:70
(anonymous) @ router-store.tsx:254
mountMemo @ react-dom.development.js:17227
useMemo @ react-dom.development.js:17672
useMemo @ react.development.js:1652
useInitializeExpoRouter @ router-store.tsx:252
ContextNavigator @ ExpoRoot.tsx:90
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
recoverFromConcurrentError @ react-dom.development.js:25853
performConcurrentWorkOnRoot @ react-dom.development.js:25752
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
getRoutes.ts:298 Error loading route "./index.tsx" TypeError: (0 , _stylis.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:542:24)
    at emotion-element-c39617d8.browser.esm.js:22:11
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at emotion-react.browser.esm.js:4:1
    at loadModuleImplementation (require.js:352:5)
    at guardedLoadModule (require.js:242:1)
    at metroRequire (require.js:128:1)
    at ThemeProvider.tsx:12:1
(anonymous) @ getRoutes.ts:298
contextModuleToFileNodes @ getRoutes.ts:274
contextModuleToTree @ getRoutes.ts:419
getExactRoutes @ getRoutes.ts:408
getRoutes @ getRoutes.ts:363
initialize @ router-store.tsx:70
(anonymous) @ router-store.tsx:254
mountMemo @ react-dom.development.js:17227
useMemo @ react-dom.development.js:17672
useMemo @ react.development.js:1652
useInitializeExpoRouter @ router-store.tsx:252
ContextNavigator @ ExpoRoot.tsx:90
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
recoverFromConcurrentError @ react-dom.development.js:25853
performConcurrentWorkOnRoot @ react-dom.development.js:25752
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
SafeAreaContext.js:74 Uncaught Error: No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.
    at useSafeAreaInsets (SafeAreaContext.js:74:10)
    at SafeAreaView.web.js:28:116
    at renderWithHooks (react-dom.development.js:16307:7)
    at updateForwardRef (react-dom.development.js:19229:10)
    at beginWork (react-dom.development.js:21639:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4166:9)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4216:16)
    at invokeGuardedCallback (react-dom.development.js:4279:1)
    at beginWork$1 (react-dom.development.js:27453:29)
    at performUnitOfWork (react-dom.development.js:26559:10)
useSafeAreaInsets @ SafeAreaContext.js:74
(anonymous) @ SafeAreaView.web.js:28
renderWithHooks @ react-dom.development.js:16307
updateForwardRef @ react-dom.development.js:19229
beginWork @ react-dom.development.js:21639
callCallback @ react-dom.development.js:4166
invokeGuardedCallbackDev @ react-dom.development.js:4216
invokeGuardedCallback @ react-dom.development.js:4279
beginWork$1 @ react-dom.development.js:27453
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
recoverFromConcurrentError @ react-dom.development.js:25853
performConcurrentWorkOnRoot @ react-dom.development.js:25752
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
LogBox.web.js:99 The above error occurred in the <ForwardRef> component:

    at http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:86978:27
    at div
    at http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:45925:27
    at View (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:68715:17)
    at createPsuedoClassView (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:68460:22)
    at Tutorial (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:133584:20)
    at ContextNavigator (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:97351:25)
    at ExpoRoot (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:97322:31)
    at r (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:134471:23)
    at App
    at withDevTools(App)
    at LogBoxStateSubscription (http://localhost:8081/index.bundle//&platform=web&dev=true&hot=false&lazy=true:68032:9)
    at ErrorOverlay

React will try to recreate this component tree from scratch using the error boundary you provided, LogBoxStateSubscription.
registerError @ LogBox.web.js:99
console.error @ LogBox.web.js:38
logCapturedError @ react-dom.development.js:18689
callback @ react-dom.development.js:18757
callCallback @ react-dom.development.js:13926
commitUpdateQueue @ react-dom.development.js:13946
commitLayoutEffectOnFiber @ react-dom.development.js:23367
commitLayoutMountEffects_complete @ react-dom.development.js:24690
commitLayoutEffects_begin @ react-dom.development.js:24676
commitLayoutEffects @ react-dom.development.js:24614
commitRootImpl @ react-dom.development.js:26825
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25894
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
index.js:26 "shadow*" style props are deprecated. Use "boxShadow".
warnOnce @ index.js:26
preprocess @ preprocess.js:115
compileAndInsertAtomic @ index.js:58
(anonymous) @ index.js:101
create @ index.js:89
(anonymous) @ LogBoxInspectorFooter.js:89
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
(anonymous) @ ErrorOverlay.js:43
loadModuleImplementation @ require.js:352
guardedLoadModule @ require.js:242
metroRequire @ require.js:128
show @ index.js:16
(anonymous) @ LogBoxData.js:235
setTimeout (async)
setSelectedLog @ LogBoxData.js:231
addPendingLog @ LogBoxData.js:125
(anonymous) @ LogBoxData.js:140
flushCallbacks @ LogBoxLog.js:91
updateStatus @ LogBoxLog.js:180
(anonymous) @ LogBoxLog.js:145
Promise.then (async)
handleSymbolicate @ LogBoxLog.js:144
_symbolicate @ LogBoxLog.js:124
symbolicate @ LogBoxLog.js:107
appendNewLog @ LogBoxData.js:138
(anonymous) @ LogBoxData.js:186
setTimeout (async)
global.setImmediate @ index.js:15
addException @ LogBoxData.js:182
addException @ LogBox.web.js:77
handleException @ index.js:73
reportLogBoxError @ LogBoxData.js:64
componentDidCatch @ LogBoxData.js:359
callback @ react-dom.development.js:18770
callCallback @ react-dom.development.js:13926
commitUpdateQueue @ react-dom.development.js:13946
commitLayoutEffectOnFiber @ react-dom.development.js:23367
commitLayoutMountEffects_complete @ react-dom.development.js:24690
commitLayoutEffects_begin @ react-dom.development.js:24676
commitLayoutEffects @ react-dom.development.js:24614
commitRootImpl @ react-dom.development.js:26825
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25894
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
3index.js:121 StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].
compose @ index.js:121
LogBoxButton @ LogBoxButton.js:50
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performSyncWorkOnRoot @ react-dom.development.js:26088
flushSyncCallbacks @ react-dom.development.js:12044
commitRootImpl @ react-dom.development.js:26961
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25983
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
index.js:26 TouchableWithoutFeedback is deprecated. Please use Pressable.
warnOnce @ index.js:26
TouchableWithoutFeedback @ index.js:39
renderWithHooks @ react-dom.development.js:16307
updateForwardRef @ react-dom.development.js:19229
beginWork @ react-dom.development.js:21639
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performSyncWorkOnRoot @ react-dom.development.js:26088
flushSyncCallbacks @ react-dom.development.js:12044
commitRootImpl @ react-dom.development.js:26961
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25983
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
index.js:26 focusable is deprecated.
warnOnce @ index.js:26
createDOMProps @ index.js:506
createElement @ index.js:22
(anonymous) @ index.js:111
renderWithHooks @ react-dom.development.js:16307
updateForwardRef @ react-dom.development.js:19229
beginWork @ react-dom.development.js:21639
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performSyncWorkOnRoot @ react-dom.development.js:26088
flushSyncCallbacks @ react-dom.development.js:12044
commitRootImpl @ react-dom.development.js:26961
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25983
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
index.js:26 selectable prop is deprecated. Use styles.userSelect.
warnOnce @ index.js:26
(anonymous) @ index.js:59
renderWithHooks @ react-dom.development.js:16307
updateForwardRef @ react-dom.development.js:19229
beginWork @ react-dom.development.js:21639
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performSyncWorkOnRoot @ react-dom.development.js:26088
flushSyncCallbacks @ react-dom.development.js:12044
commitRootImpl @ react-dom.development.js:26961
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25983
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
12index.js:121 StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].
compose @ index.js:121
LogBoxButton @ LogBoxButton.js:50
renderWithHooks @ react-dom.development.js:16307
mountIndeterminateComponent @ react-dom.development.js:20076
beginWork @ react-dom.development.js:21590
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performSyncWorkOnRoot @ react-dom.development.js:26088
flushSyncCallbacks @ react-dom.development.js:12044
commitRootImpl @ react-dom.development.js:26961
commitRoot @ react-dom.development.js:26684
finishConcurrentRender @ react-dom.development.js:25983
performConcurrentWorkOnRoot @ react-dom.development.js:25811
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
15index.js:121 StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].
compose @ index.js:121
LogBoxButton @ LogBoxButton.js:50
renderWithHooks @ react-dom.development.js:16307
updateFunctionComponent @ react-dom.development.js:19591
beginWork @ react-dom.development.js:21604
beginWork$1 @ react-dom.development.js:27428
performUnitOfWork @ react-dom.development.js:26559
workLoopSync @ react-dom.development.js:26468
renderRootSync @ react-dom.development.js:26436
performConcurrentWorkOnRoot @ react-dom.development.js:25741
workLoop @ scheduler.development.js:269
flushWork @ scheduler.development.js:241
performWorkUntilDeadline @ scheduler.development.js:535
Show 13 more frames
HMRClient.js:227 Disconnected from Metro (1006: "").

To reconnect:
- Ensure that Metro is running and available on the same network
- Reload this app (will trigger further help if Metro cannot be connected to)

Environment

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
      Yarn: 3.6.0 - ~/.nvm/versions/node/v18.15.0/bin/yarn
      npm: 9.7.2 - ~/.nvm/versions/node/v18.15.0/bin/npm
      Watchman: 2023.04.03.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    IDEs:
      Android Studio: 2021.2 AI-212.5712.43.2112.8815526
      Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
    npmPackages:
      @expo/webpack-config: ^18.1.0 => 18.1.0 
      expo: ^49.0.0 => 49.0.1 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.72.1 => 0.72.1 
      react-native-web: ~0.19.6 => 0.19.6 
    npmGlobalPackages:
      eas-cli: 3.15.0
    Expo Workflow: managed

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 43 (17 by maintainers)

Commits related to this issue

build: migrate to expo sdk 49 (#451) ## Description https://blog.expo.dev/expo-sdk-49-c6d398cdf740 ### Issue When upgrading project to expo SDK 49, we can't run the project on `web` because... — committed to dooboolab-community/dooboo-ui by hyochan a year ago
chore(deps): update pkgs https://github.com/expo/expo/issues/23412 — committed to dooboolab-community/expo-router-starter by hyochan a year ago
chore(deps): update pkgs https://github.com/expo/expo/issues/23412 — committed to dooboolab-community/expo-router-starter by hyochan a year ago
chore(deps): update pkgs https://github.com/expo/expo/issues/23412 — committed to dooboolab-community/expo-router-starter by hyochan a year ago
chore(deps): update pkgs https://github.com/expo/expo/issues/23412 — committed to dooboolab-community/expo-router-starter by hyochan a year ago
chore(deps): update pkgs https://github.com/expo/expo/issues/23412 — committed to dooboolab-community/expo-router-starter by hyochan a year ago
Migrate expo to SDK 49 (#5) https://blog.expo.dev/expo-sdk-49-c6d398cdf740 Having issue in web - https://github.com/expo/expo/issues/23412 - https://github.com/software-mansion/react-native-rean... — committed to dooboolab-community/expo-router-starter by hyochan 8 months ago

Most upvoted comments

It appears to be connected with this issue: https://github.com/facebook/metro/issues/535.

For me, adding the following to the metro.config.js config worked:

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('cjs', 'mjs');

module.exports = config;

A little warning for TS users, sourceExts property is typed as ReadonlyArray 😌, so you might need to add @ts-expect-error on top of the line to allow push.

Also, I’m currently in the middle of migrating my project to SDK 49, there might be other issues to deal with while bundling for the web, but this could help others to move forward too.

rozsival on Jul 13, 2023

It appears to be connected with this issue: facebook/metro#535.

For me, adding the following to the metro.config.js config worked:
const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('cjs', 'mjs');

module.exports = config;
A little warning for TS users, sourceExts property is typed as ReadonlyArray 😌, so you might need to add @ts-expect-error on top of the line to allow push.

Also, I’m currently in the middle of migrating my project to SDK 49, there might be other issues to deal with while bundling for the web, but this could help others to move forward too.

This worked for me as well 🥳

BoavistaLudwig on Jul 14, 2023

I also have multiple issues with SDK49 on the web:

Web Bundling failed 3108ms Unable to resolve “@fortawesome/free-solid-svg-icons” from “app/(var)/start.tsx”
Web Bundling failed 7704ms Unable to resolve “@koale/useworker” from “node_modules/expo-camera/build/useWebQRScanner.js”

pretty annoying … I have no issues with SDK48

BoavistaLudwig on Jul 13, 2023

BackHandler has also been removed from “react-native-web”, causing no end of problems with dependencies…

events-jonas-chrisw on Jul 26, 2023

We are investigating, the issue appears to be a module resolution conflict between Metro and stylis (a dependency of emotion)

marklawlor on Jul 12, 2023

they have deprecated loads of stuff in react-native-web which makes it impossible to move to expo 49. They are warnings for now but imagine they will get removed. I’m going to have to bin it or patch it.

events-jonas-chrisw on Oct 6, 2023

If you still having issues can you either create a new issue or reply with a repo that reproduces the issue for us. Screenshots provide very little value in helping us troubleshoot issues

@marklawlor I’ve created a minimal repo that reproduces the error:

The exact commands I ran to set up the repro can be seen in the commit messages. The linked repo fails on npm run web with the following error:

Web Bundling failed 1005ms
Unable to resolve "@fortawesome/fontawesome-svg-core" from "node_modules/@fortawesome/react-native-fontawesome/dist/components/FontAwesomeIcon.js"

I confirmed that the issue resolves itself when downgrading to SDK 48. I was also able to fix the issue by creating a metro.config.js with the following contents:

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('cjs', 'mjs');

module.exports = config;

(taken from this comment by @rozsival)

As previously mentioned by @rozsival, both issues relating to this error have been closed. Now that a minimal repro exists, could one of the issues be re-opened? (alternatively I can file a new issue)

nanyaDev on Aug 19, 2023

Original issue is fixed in expo-router@2.0.1

EvanBacon on Jul 26, 2023

issue

@alielhusseini , nope, I decided to move back to Flutter. Gd luck

jstdk on Sep 18, 2023

@awilson9 Are you concerned about

warning: "transform" style array value is deprecated.

It is simply a warning that will only occur in development and will resolved in time. React Native Web deprecated a number of APIs with no announcement and it will take time for the ecosystem to adjust. or

Error loading route "./(sidebar)/_layout.tsx" ReferenceError: requestAnimationFrame is not defined

The error will be resolved by https://github.com/software-mansion/react-native-reanimated/pull/4665

marklawlor on Aug 17, 2023

I don’t understand if google is just serving me completely irrelevant links or someones answer changed but I received an exact webpage hit based on my query of

"transform" style array value is deprecated. use space-separated string functions, e.g., "scalex(2) rotatex(15deg)".

Looking at this page now i see zero reference of the query that google would have forwarded me to this page for, but figured it’s maybe still worth commenting?

I created a minimum reproducible example over at https://github.com/awilson9/shady-pines-radio-mobile/pull/1

On pnpm web, navigate to localhost web page, observe:

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".
Error loading route "./(sidebar)/_layout.tsx" ReferenceError: requestAnimationFrame is not defined
    at JSReanimated.scheduleOnUI (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:65675:9)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:66799:33
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:68292:5
    at loadModuleImplementation (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:328:7)
    at guardedLoadModule (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:227:14)
    at metroRequire (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:123:75)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:67810:46
    at loadModuleImplementation (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:328:7)
    at guardedLoadModule (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:227:14)
    at metroRequire (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:123:75)

awilson9 on Aug 16, 2023

@marklawlor I’m sorry, but I’m really confused now.

There was another issue where others were mentioning troubles with importing mjs modules for web. But you closed that issue as duplicate of this one. Now, this issue is closed while mjs modules are still not supported.

I can, of course, create a new issue or send a PR. It really is just a tiny change in @expo/metro-config (as suggested in one of my previous comments).

rozsival on Jul 27, 2023

@hyochan Turns out cjs extension is already included in the @expo/metro-config, only mjs needs to be added.

About your error, that’s really strange. It almost seems like in your case metro is not able to resolve web.js modules, which it actually should by default. I tried it and it works for my project without any issues.

Not sure about the source maps parsing though. If I am able to reproduce the error, I’ll try to find some solution.

@rozsival I am really sorry!! I temporarily removed metro because of the issue in #23480. The real issue I faced was below which @EvanBacon is working on following https://twitter.com/Baconbrix/status/1679323911316545542 which is really thankful and impressive.

Web Bundling failed 15090ms
Unable to resolve "../Utilities/Platform" from "node_modules/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js"

hyochan on Jul 14, 2023

@marklawlor In my case only mjs modules cause the problem. I suppose mjs extension could be added here: https://github.com/expo/expo/blob/919bdd2921b64eb9399e35377d98d4ed6e07836f/packages/%40expo/metro-config/src/ExpoMetroConfig.ts#L96

rozsival on Jul 14, 2023

@hyochan Turns out cjs extension is already included in the @expo/metro-config, only mjs needs to be added.

About your error, that’s really strange. It almost seems like in your case metro is not able to resolve web.js modules, which it actually should by default. I tried it and it works for my project without any issues.

Not sure about the source maps parsing though. If I am able to reproduce the error, I’ll try to find some solution.

rozsival on Jul 14, 2023

@devoren Not changed anything. I’ve just updated to expo SDK 49 from 48. I hope expo team handles this.

I also posted issue on emotion side https://github.com/emotion-js/emotion/issues/3073.

hyochan on Jul 11, 2023

Yes you should try, if some code works on native and not in web then you can use .web.js / .native.js extension

devoren on Jul 9, 2023

I think I need to know why it is not working from in SDK49 and why it only happens in web?

hyochan on Jul 9, 2023