React with NX having Module parse failed error when runing nx serve <web-project-name>

[Charles-Dattel]

Description

When import gluestack-ui, error is throw with Module parse failed

CodeSandbox/Snack link

No response

Steps to reproduce

1. Setup the React monorepo as the NX instruction. Official doc
2. Create web app with command nx g @nx/react:application my-app at root level.
3. Install gluestack ui as official doc.
4. Import GluestackUIProvider at the main.tsx.

Sample code for main.tsx.

import { StrictMode } from 'react';
import App from './app/App';
import { GluestackUIProvider } from '@gluestack-ui/themed';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <StrictMode>
    <GluestackUIProvider>
      <App />
    </GluestackUIProvider>
  </StrictMode>
);

gluestack-ui Version

1.1.22

Platform

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

Other Platform

No response

Additional Information

Error message when run nx serve <project-name>

WARNING in ../../node_modules/@react-native-aria/interactions/lib/module/index.js
s
 2:0-92
export 'PressEvents' (reexported as 'PressEvents') was not found in './usePress' 
 (possible exports: usePress)

WARNING in ../../node_modules/@react-native-aria/interactions/lib/module/index.js
s
 2:0-92
export 'PressHookProps' (reexported as 'PressHookProps') was not found in './useP
Press' (possible exports: usePress)

WARNING in ../../node_modules/@react-native-aria/interactions/lib/module/index.js
s
 2:0-92
export 'PressProps' (reexported as 'PressProps') was not found in './usePress' (p
possible exports: usePress)

WARNING in ../../node_modules/@react-native-aria/interactions/lib/module/index.js
s
 2:0-92
export 'PressResult' (reexported as 'PressResult') was not found in './usePress' 
 (possible exports: usePress)

ERROR in ../../node_modules/@expo/html-elements/build/elements/Anchor.js 23:11   
Module parse failed: Unexpected token (23:11)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|         },
|     });
>     return <Text role="link" {...props} {...nativeProps} ref={ref}/>;
| });
| 

ERROR in ../../node_modules/@expo/html-elements/build/elements/Headings.js 16:16 
Module parse failed: Unexpected token (16:16)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|     });
|     return forwardRef((props, ref) => {
>         return (<Text {...nativeProps} {...props} style={[styles[`h${level}`], 
 props.style]} ref={ref}/>);
|     });
| }

ERROR in ../../node_modules/@expo/html-elements/build/elements/Layout.js 6:15    
Module parse failed: Unexpected token (6:15)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| function createView(nativeProps = {}) {
|     return forwardRef((props, ref) => {
>         return <View {...nativeProps} {...props} ref={ref}/>;
|     });
| }

ERROR in ../../node_modules/@expo/html-elements/build/elements/Lists.js 7:15     
Module parse failed: Unexpected token (7:15)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| function createView(nativeProps = {}) {
|     return forwardRef((props, ref) => {
>         return <View {...nativeProps} {...props} ref={ref}/>;
|     });
| }

ERROR in ../../node_modules/@expo/html-elements/build/elements/Rules.js 5:11     
Module parse failed: Unexpected token (5:11)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import View from '../primitives/View';
| export const HR = forwardRef((props, ref) => {
>     return <View {...props} style={[styles.hr, props.style]} ref={ref}/>;      
| });
| const styles = StyleSheet.create({

ERROR in ../../node_modules/@expo/html-elements/build/elements/Table.js 8:11     
Module parse failed: Unexpected token (8:11)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import View from '../primitives/View';
| export const Table = forwardRef((props, ref) => {
>     return <View {...props} ref={ref}/>;
| });
| export const THead = forwardRef((props, ref) => {

ERROR in ../../node_modules/@expo/html-elements/build/elements/Text.js 7:11      
Module parse failed: Unexpected token (7:11)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import View from '../primitives/View';
| export const P = forwardRef(({ style, ...props }, ref) => {
>     return <Text {...props} style={[styles.p, style]} ref={ref}/>;
| });
| export const B = forwardRef(({ style, ...props }, ref) => {

ERROR in ../../node_modules/react-native/index.js 14:7
Module parse failed: Unexpected token (14:7)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
| // Components
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo//AccessibilityInfo'; 
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator//ActivityIndicator'; 
| import typeof Button from './Libraries/Components/Button';

[surajahmed]

@Charles-Dattel Thanks for reporting. We'll look into this.

[lucas-amberg]

Has any progress been made on this or are there any workarounds? I've run into this issue a few times in the last week trying to use Gluestack with Next.js and Nx.