TypeError: Cannot read property 'useEffect' of null

[AftabUfaq]

Description

I have installed this in the mono repo for react and react native but I am getting this error

CodeSandbox/Snack link

https://github.com/AftabUfaq/my-monorepo

Steps to reproduce

ERROR TypeError: Cannot read property 'useEffect' of null

This error is located at: in GluestackUIStyledProvider in GluestackUIProvider in SharedButton (created by App) in RCTView (created by View) in View (created by App) in RCTScrollContentView (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by App) in RCTSafeAreaView (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MyApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'useEffect' of null

This error is located at: in GluestackUIStyledProvider in GluestackUIProvider in SharedButton (created by App) in RCTView (created by View) in View (created by App) in RCTScrollContentView (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by App) in RCTSafeAreaView (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MyApp(RootComponent), js engine: hermes

gluestack-ui Version

3.3.1.

Platform

• [ ] Expo
• [X] React Native CLI
• [X] Next
• [ ] Web
• [ ] Android
• [X] iOS

Other Platform

No response

Additional Information

I want to installed this as a shared package for my react and react-native apps that are in the same work space. I have installed this in the shared folder but it has this issue. ERROR TypeError: Cannot read property 'useEffect' of null

This error is located at: in GluestackUIStyledProvider in GluestackUIProvider in SharedButton (created by App) in RCTView (created by View) in View (created by App) in RCTScrollContentView (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by App) in RCTSafeAreaView (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MyApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'useEffect' of null

This error is located at: in GluestackUIStyledProvider in GluestackUIProvider in SharedButton (created by App) in RCTView (created by View) in View (created by App) in RCTScrollContentView (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by App) in RCTSafeAreaView (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MyApp(RootComponent), js engine: hermes

[surajahmed]

@AftabUfaq Thanks for reporting this. We'll have a look.

[AftabUfaq]

@surajahmed i was using this in a mono repos for react and react native. this issue haopen on react native side and on react side it has some babel plugin issue. adter i downgrade the @expo/html-elements to version 0.5.1 this issue was gone. i have to change it in the gluestack theme config folder package.json file

[surajahmed]

@AftabUfaq Thanks for the reply. We'll downgrade @expo/html-elements to version 0.5.1 in our package.json file if it doesn't work with the latest verison.

[Charles-Dattel]

@AftabUfaq can you share what is your current workaround? I am trying to setup monorepo, facing the the same issue now.

[AftabUfaq]

i have managed to make it working. please check my github it has the working mono repo.

[AftabUfaq]

the work around was that i have to downgrade the expo-html-modules pakge to 5.0.1 or somwthng likw this.

[Charles-Dattel]

@AftabUfaq I tried to run your code in workspace with npm run web-start, but there is error raised.

WARNING in ../../node_modules/@legendapp/tools/react.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/workspaces/my-monorepo/node_modules/@legendapp/react.ts' file: Error: ENOENT: no such file or directory, open '/workspaces/my-monorepo/node_modules/@legendapp/react.ts'

ERROR in ../../node_modules/@gluestack-ui/themed/node_modules/@expo/html-elements/build/elements/Anchor.js
Module build failed (from ../../node_modules/babel-loader/lib/index.js):
SyntaxError: /workspaces/my-monorepo/node_modules/@gluestack-ui/themed/node_modules/@expo/html-elements/build/elements/Anchor.js: Support for the experimental syntax 'jsx' isn't currently enabled (23:12):

  21 |         },
  22 |     });
> 23 |     return <Text role="link" {...props} {...nativeProps} ref={ref}/>;
     |            ^
  24 | });

There is a lot similar error like this.

[AftabUfaq]

okay..you need to download grade the expo-html-elements