search

tamagui / tamagui

Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
https://tamagui.dev
MIT License
10.23k stars 415 forks source link

Tamagui throws error when using Expo 51 New Arch #2633

Closed erwanlpfr closed 2 weeks ago

erwanlpfr commented 3 weeks ago

Current Behavior

Hello !

Today, with the Expo 51 release, I tried the new arch. As you can see in the files, Tamagui is set as inspired by this : https://github.com/ivopr/tamagui-expo So by activating the new arch, I can this right after the JS bundle starting the following logs.

Maybe something changed or has to be changed with the new arch. If I am not the only one, maybe we could provide more demo ?

Thank you for your work !

Expected Behavior

No response

Tamagui Version

^1.97.1

Platform (Web, iOS, Android)

on iOS and Android

iOS Bundled 2132ms node_modules/expo-router/entry.js (3191 modules)
 (NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) ERROR  TypeError: Cannot read property 'add' of undefined

This error is located at:
    in PortalHostComponent (created by ToastViewport)
    in RCTView (created by ToastViewport)
    in ToastViewport (created by Slot)
    in Slot (created by ToastCollectionSlot)
    in ToastCollectionSlot (created by ToastViewport)
    in RCTView (created by ViewportWrapper)
    in ViewportWrapper (created by ToastViewport)
    in ToastViewport (created by ToastViewport)
    in ToastImperativeProvider (created by ToastProvider)
    in Provider (created by ToastProvider)
    in Provider (created by CollectionProvider)
    in CollectionProvider (created by ToastProvider)
    in ToastProvider (created by ToastProvider)
    in ToastProvider (created by Layout)
    in ThemeProvider (created by InternalThemeProvider)
    in Theme (created by InternalThemeProvider)
    in InternalThemeProvider (created by GlobalThemeProvider)
    in PortalProviderComponent (created by TamaguiProvider)
    in Theme (created by ThemeProvider)
    in ThemeProvider (created by TamaguiProvider)
    in Provider (created by TamaguiProvider)
    in TamaguiProvider (created by TamaguiProvider)
    in TamaguiProvider (created by GlobalThemeProvider)
    in GlobalThemeProvider (created by Layout)
    in Provider (created by Layout)
    in I18nProvider (created by Layout)
    in Layout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 (NOBRIDGE) ERROR  TypeError: Cannot read property 'add' of undefined

This error is located at:
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by TamaguiProvider)
    in Theme (created by ThemeProvider)
    in ThemeProvider (created by TamaguiProvider)
    in Provider (created by TamaguiProvider)
    in TamaguiProvider (created by TamaguiProvider)
    in TamaguiProvider (created by GlobalThemeProvider)
    in GlobalThemeProvider (created by Layout)
    in Provider (created by Layout)
    in I18nProvider (created by Layout)
    in Layout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 (NOBRIDGE) ERROR  TypeError: Cannot read property 'add' of undefined

This error is located at:
    in PortalHostComponent (created by ToastViewport)
    in RCTView (created by ToastViewport)
    in ToastViewport (created by Slot)
    in Slot (created by ToastCollectionSlot)
    in ToastCollectionSlot (created by ToastViewport)
    in RCTView (created by ViewportWrapper)
    in ViewportWrapper (created by ToastViewport)
    in ToastViewport (created by ToastViewport)
    in ToastImperativeProvider (created by ToastProvider)
    in Provider (created by ToastProvider)
    in Provider (created by CollectionProvider)
    in CollectionProvider (created by ToastProvider)
    in ToastProvider (created by ToastProvider)
    in ToastProvider (created by Layout)
    in ThemeProvider (created by InternalThemeProvider)
    in Theme (created by InternalThemeProvider)
    in InternalThemeProvider (created by GlobalThemeProvider)
    in PortalProviderComponent (created by TamaguiProvider)
    in Theme (created by ThemeProvider)
    in ThemeProvider (created by TamaguiProvider)
    in Provider (created by TamaguiProvider)
    in TamaguiProvider (created by TamaguiProvider)
    in TamaguiProvider (created by GlobalThemeProvider)
    in GlobalThemeProvider (created by Layout)
    in Provider (created by Layout)
    in I18nProvider (created by Layout)
    in Layout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Reproduction

Here the config : 

import { config as tamaguiConfig } from '@tamagui/config/v3';
import { createInterFont } from '@tamagui/font-inter';
import { createTamagui } from 'tamagui';

const config = createTamagui({
  ...tamaguiConfig,
  reactNative: true,
  defaultTheme: 'light',
  defaultFont: 'body',
  fonts: {
    heading: createInterFont({
      family: 'Poppins_700Bold',
    }),
    body: createInterFont({
      family: 'Popins_100Thin',
    }),
  },
});

export default config;

```json
{
  "name": "app",
  "version": "1.0.0",
  "license": "MIT",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "lint": "biome check .",
    "dev:android": "expo run:android",
    "dev:ios": "expo run:ios",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "prepare": "husky"
  },
  "dependencies": {
    "@lingui/react": "^4.10.1",
    "@reduxjs/toolkit": "^2.2.3",
    "@rnmapbox/maps": "^10.1.21",
    "@tamagui/animations-moti": "^1.97.1",
    "@tamagui/babel-plugin": "^1.97.1",
    "@tamagui/config": "^1.97.1",
    "@tamagui/font-inter": "^1.97.1",
    "@tamagui/lucide-icons": "^1.97.1",
    "@tamagui/sheet": "^1.97.1",
    "@tamagui/theme-base": "^1.97.1",
    "@tamagui/themes": "^1.97.1",
    "@tamagui/toast": "^1.97.1",
    "@turf/turf": "7.0.0-alpha.116",
    "burnt": "^0.12.2",
    "expo": "^51.0.0",
    "expo-build-properties": "~0.12.1",
    "expo-dev-client": "~4.0.11",
    "expo-font": "~12.0.4",
    "expo-localization": "~15.0.3",
    "expo-location": "~17.0.1",
    "expo-router": "~3.5.10",
    "expo-system-ui": "~3.0.4",
    "expo-task-manager": "~11.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-reanimated": "^3.11.0",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-redux": "^9.1.2",
    "redux-persist": "^6.0.0",
    "tamagui": "^1.97.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "babel-plugin-macros": "^3.1.0",
    "@biomejs/biome": "^1.7.3",
    "@commitlint/cli": "^19.3.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@lingui/cli": "^4.10.1",
    "@lingui/macro": "^4.10.1",
    "@types/react": "~18.2.45",
    "husky": "^9.0.11",
    "semantic-release": "^23.0.8",
    "typescript": "~5.3.3"
  }
}

With Expo Plugins : 

      'expo-localization',
      [
        'expo-build-properties',
        {
          ios: {
            newArchEnabled: true,
          },
          android: {
            newArchEnabled: true,
          },
        },
      ],

And with a layout file at the root that looks like that : 

import { ThemeProvider } from '@react-navigation/native';
import { useColorScheme } from 'react-native';
import { TamaguiProvider, Theme, useTheme } from 'tamagui';
import config from '../../../tamagui.config';

export const InternalThemeProvider = ({ children }: React.PropsWithChildren) => {
  const colorScheme = useColorScheme();
  const simplifiedColorScheme = colorScheme === 'dark' ? 'dark' : 'light';
  const theme = useTheme({
    name: simplifiedColorScheme,
  });

  const NavigationTheme: React.ComponentProps<typeof ThemeProvider>['value'] = {
    dark: simplifiedColorScheme === 'dark',
    colors: {
      primary: theme.color.val,
      background: theme.background.val,
      card: theme.background.val,
      text: theme.color.val,
      border: theme.borderColor.val,
      notification: theme.color.val,
    },
  };

  return (
    <Theme name={simplifiedColorScheme}>
      <ThemeProvider value={NavigationTheme}>{children}</ThemeProvider>
    </Theme>
  );
};

export function GlobalThemeProvider({ children }: React.PropsWithChildren) {
  return (
    <TamaguiProvider config={config}>
      <InternalThemeProvider>{children}</InternalThemeProvider>
    </TamaguiProvider>
  );
}


### System Info

_No response_
kvaster commented 3 weeks ago

We experiancing same problem with tamagui and 'PortalHostComponent' when trying to migrate to new architecture.

sync commented 3 weeks ago

you can temporarily fix it by patching this file:

node_modules/@tamagui/portal/dist/cjs/GorhomPortal.native.js

And change this method on line 182:

from

    var next = function(value) {
      (0, import_react.startTransition)(function() {
        dispatch(value);
      });
    };

to

    var next = function(value) {
        dispatch(value);
    };
sync commented 3 weeks ago

@tamagui+portal+1.97.1.patch.zip

you can use this patch with patch-package

nicolasartman commented 3 weeks ago

Amazing, thank you so much @sync! I yarn-patched those lines out and builds are working again for me.

kvaster commented 3 weeks ago

I've tried this patch, but it doesn't work for me :(

I'm having this error on Android build:

 (NOBRIDGE) ERROR  TypeError: Cannot read property 'add' of undefined

This error is located at:
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by TamaguiProvider)
    in Theme (created by ThemeProvider)
    in ThemeProvider (created by TamaguiProvider)
    in Provider (created by TamaguiProvider)
    in TamaguiProvider (created by TamaguiProvider)
    in TamaguiProvider (created by Application)
    in Application (created by _default)
    in _default
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
natew commented 2 weeks ago

Have a fix in main for this will get it out today. Wonder why transition would break it, weird?

sync commented 2 weeks ago

weird indeed

natew commented 2 weeks ago

Fixed in https://github.com/tamagui/tamagui/releases/tag/v1.98.0

kvaster commented 2 weeks ago

For me the problem is still there, but in another place:

 (NOBRIDGE) ERROR  TypeError: Cannot read property 'add' of undefined

This error is located at:
    in Unknown (created by Themed(Anonymous))
    in Theme (created by Themed(Anonymous))
    in Themed(Anonymous)
    in Unknown
    in Unknown (created by Screen)
    in Screen (created by _default)
    in AppLoader (created by _default)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by Application)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by Application)
    in PortalProviderComponent (created by TamaguiProvider)
    in Theme (created by ThemeProvider)
    in ThemeProvider (created by TamaguiProvider)
    in Provider (created by TamaguiProvider)
    in TamaguiProvider (created by TamaguiProvider)
    in TamaguiProvider (created by Application)
    in Application (created by _default)
    in _default
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
contactsimonwilson commented 2 weeks ago

@kvaster same here

For me it seems to be breaking on any use of the Switch component

sync commented 2 weeks ago

yes @kvaster, @natew it is once more startTransition messing things, can reproduce on touch if Switch component is enabled:

this code: 

      const [checked, setChecked] = useControllableState({
        prop: checkedProp,
        defaultProp: defaultChecked || false,
        onChange: onCheckedChange,
        transition: true,
      })

can be fixed if changed to: 

      const [checked, setChecked] = useControllableState({
        prop: checkedProp,
        defaultProp: defaultChecked || false,
        onChange: onCheckedChange,
        transition: false,
      });

There is really something funky with startTransition happening somewhere.

sync commented 2 weeks ago

Probably one of the .add in there https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js or the dev one: Libraries/Renderer/implementations/ReactFabric-dev.js

sync commented 2 weeks ago

crashing here inside the dev renderer

Screenshot 2024-05-15 at 8 37 18 PM
sync commented 2 weeks ago

Just a temp fix but you can patch the renderer

react-native+0.74.1.patch.zip

sync commented 2 weeks ago

Will look at upstreaming this inside rn if it makes sense and then we should be fine with startTransition

sync commented 2 weeks ago

pr here: https://github.com/facebook/react-native/pull/44586