Prop style did not match server

[richardr1126]

I am using the Expo App Router with Gluestack UI. iOS and android aren't having many problems. But when launching my app on web, at first everything works fine, but if I try to refresh the page it crashes and I get the error Prop 'style' did not match. Server: "max-width:-88px" Client: "max-width:1186px".

When launched, by design, my app gets immediately redirected to "localhost:8081/one" which is a signup modal, this is where the error occurs if I refresh. The only way to get rid of the error is go to the base URL localhost:8081/ which then redirects to "/one". When I create a production build for web I don't get this crashing error, but after refreshing the page if I was in dark mode, it goes back to light mode, indicating the styling is not carrying across routes when refreshed.

When I initially launch on web through Expo I get the following warning about non-hydrated UI and the intended UI, which definitely is causing the problem:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at StyledProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:134546:23)
    at ProviderImpl (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:186586:28)
    at GluestackUIProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:186543:25)
    at Layout (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:186868:49)
    at Route (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:94636:25)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:94942:25
    at div
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:44335:27
    at NativeSafeAreaProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:93030:25)
    at SafeAreaProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:92866:25)
    at div
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:44335:27
    at GestureHandlerRootView
    at GestureHandlerRootView
    at div
    at body
    at html
    at Html (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:214251:25)
    at wrapper (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:851:33)
    at wrapper (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:104623:28)
    at EnsureSingleNavigator (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:66396:25)
    at BaseNavigationContainer (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:64773:29)
    at ThemeProvider (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:72834:22)
    at NavigationContainerInner (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:72678:27)
    at ContextNavigator (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:104643:25)
    at ExpoRoot (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:104614:31)
    at ExpoRouterRoot
    at ServerContainer (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:73850:25)
    at e (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:197348:23)

This must either be a problem with gluestack-style or Expo App Router. I am new to using React Native so any tips would be very helpful.

I also get these warning when launching on web, but I am not sure how relevant they are to my problem:

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".
Require cycle: node_modules/@gluestack-style/react/lib/commonjs/styled.js -> node_modules/@gluestack-style/react/lib/commonjs/StyledProvider.js -> node_modules/@gluestack-style/react/lib/commonjs/createGlobalStyles.js -> node_modules/@gluestack-style/react/lib/commonjs/styled.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Require cycle: node_modules/@gluestack-style/react/lib/commonjs/style-sheet/index.js -> node_modules/@gluestack-style/react/lib/commonjs/resolver/index.js -> node_modules/@gluestack-style/react/lib/commonjs/resolver/injectComponentAndDescendantStyles.js -> node_modules/@gluestack-style/react/lib/commonjs/style-sheet/index.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Require cycle: node_modules/@gluestack-style/react/lib/commonjs/styled.js -> node_modules/@gluestack-style/react/lib/commonjs/createConfig.js -> node_modules/@gluestack-style/react/lib/commonjs/styled.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Require cycle: node_modules/@react-aria/i18n/dist/main.js -> node_modules/@react-aria/i18n/dist/useMessageFormatter.js -> node_modules/@react-aria/i18n/dist/main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[surajahmed]

@richardr1126 Thanks for reporting this. We'll try to reproduce this issue and update you on this.

[richardr1126]

@surajahmed Thanks. I also ended up posting an issue to the Expo GitHub as well and they needed a minimal reproducible example. They ultimately said it was a problem with glue-stack and closed it. Here it is if this helps, https://github.com/richardr1126/expo-router-error-example

[surajahmed]

Thanks @richardr1126. I'll have a look.

[Viraj-10]

Hey @richardr1126, This issue is from expo. We have commented on the same issue you have raised with expo. you can find our reply here.

[richardr1126]

@Viraj-10 Thank you so much for finding the problem with the Expo router. After adding back in the font loading code to the _layout everything is working, getting no problems refreshing the page. I had no idea that would be the problem. Thanks again.