Uncaught Invariant Violation: columnWrapperStyle not supported for single column lists

[oliviercperrier]

Description

Describe the bug
I get the following error only when running my react native expo app on web. Im not able to use the FlatList component on the web. Im getting this error no mather what.

AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:1123 Uncaught Invariant Violation: columnWrapperStyle not supported for single column lists
    at invariant (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:1123:17)
    at FlatList._checkProps (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:43245:34)
    at new FlatList (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:43089:13)
    at constructClassInstance (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:24370:24)
    at updateClassComponent (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:28981:11)
    at beginWork (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:30616:22)
    at beginWork$1 (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:35556:20)
    at performUnitOfWork (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34826:18)
    at workLoopSync (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34749:11)
    at renderRootSync (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34722:13)

I saw that for some reason, columnWrapperStyle is set with an empty array by default. same for other props, but i set none of these props with any value:

since columnWrapperStyle is set with an empty array, this part of the code raise the error: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/FlatList.js#L506

Steps to reproduce

1. Clone repository (https://github.com/oliviercperrier/repro-ColumnWrapperStyle)
2. npm i
3. npm run web

React Native Version

0.73.2

Affected Platforms

Runtime - Web

Output of npx react-native info

System:
  OS: macOS 14.0
  CPU: (10) arm64 Apple M1 Pro
  Memory: 3.29 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: ~/.nvm/versions/node/v18.19.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v16.16.0/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v18.19.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.11.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9014738
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: 0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

index.js:71 Running application "main" with appParams:
 {rootTag: '#root', hydrate: false} 
Development-level warnings: ON.
Performance optimizations: OFF.
invariant.js:42 Uncaught Invariant Violation: columnWrapperStyle not supported for single column lists
    at invariant (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:46885:17)
    at FlatList._checkProps (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44708:34)
    at new FlatList (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44552:13)
    at constructClassInstance (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:30296:24)
    at updateClassComponent (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:34907:11)
    at beginWork (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:36542:22)
    at HTMLUnknownElement.callCallback (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:21534:20)
    at Object.invokeGuardedCallbackDev (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:21578:22)
    at invokeGuardedCallback (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:21635:37)
    at beginWork$1 (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:41504:13)
invariant @ invariant.js:42
_checkProps @ index.js:377
FlatList @ index.js:339
constructClassInstance @ react-dom.development.js:14325
updateClassComponent @ react-dom.development.js:19690
beginWork @ react-dom.development.js:21614
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
Show 17 more frames
Show less
invariant.js:42 Uncaught Invariant Violation: columnWrapperStyle not supported for single column lists
    at invariant (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:46885:17)
    at FlatList._checkProps (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44708:34)
    at new FlatList (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44552:13)
    at constructClassInstance (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:30296:24)
    at updateClassComponent (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:34907:11)
    at beginWork (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:36542:22)
    at HTMLUnknownElement.callCallback (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:21534:20)
    at Object.invokeGuardedCallbackDev (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:21578:22)
    at invokeGuardedCallback (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:21635:37)
    at beginWork$1 (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:41504:13)
invariant @ invariant.js:42
_checkProps @ index.js:377
FlatList @ index.js:339
constructClassInstance @ react-dom.development.js:14325
updateClassComponent @ react-dom.development.js:19690
beginWork @ react-dom.development.js:21614
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
Show 18 more frames
Show less
LogBox.web.js:98 The above error occurred in the <FlatList> component:

    at FlatList (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44456:36)
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44892:27
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44892:27
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44892:27
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44892:27
    at Content
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44892:27
    at Page
    at Suspense
    at Route (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:76515:25)
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:76849:25
    at StaticContainer (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:92197:18)
    at EnsureSingleNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:89595:25)
    at SceneView (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:92106:23)
    at QualifiedSlot (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:84596:12)
    at PreventRemoveProvider (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:91138:26)
    at NavigationContent (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:91892:23)
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:91907:28
    at QualifiedNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:84528:34)
    at Navigator (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:84500:33)
    at Slot (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:84583:48)
    at Layout
    at Suspense
    at Route (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:76515:25)
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:76849:25
    at div
    at http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:44892:27
    at NativeSafeAreaProvider (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:94994:25)
    at SafeAreaProvider (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:94861:25)
    at wrapper (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:85027:28)
    at EnsureSingleNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:89595:25)
    at BaseNavigationContainer (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:88172:29)
    at ThemeProvider (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:93206:22)
    at NavigationContainerInner (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:93096:27)
    at ContextNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:85045:25)
    at ExpoRoot (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:85018:29)
    at r (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:97975:23)
    at App
    at LogBoxStateSubscription (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:69179:9)
    at ErrorOverlay
    at withDevTools(ErrorOverlay)
    at AppContainer (http://localhost:8081/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.routerRoot=src%2Fapp&resolver.environment=client&transform.environment=client:58895:25)

React will try to recreate this component tree from scratch using the error boundary you provided, LogBoxStateSubscription.
registerError @ LogBox.web.js:98
console.error @ LogBox.web.js:37
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
Show 17 more frames
Show less
console.js:213 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)
      
overrideMethod @ console.js:213
setHMRUnavailableReason @ HMRClient.js:227
(anonymous) @ HMRClient.js:199
emit @ eventemitter3.js:191
HMRClient._this._ws.onclose @ HMRClient.js:52
Show 5 more frames
Show less

Reproducer

https://github.com/oliviercperrier/repro-ColumnWrapperStyle

Screenshots and Videos

No response

[eschaefer]

Same issue here. I'm not setting columnWrapperStyle anywhere.