Getting many "Require cycles are allowed but..." errors when running Expo project on web

[resticker]

Description

Getting many "Require cycles are allowed but..." errors when running Expo project on web

CodeSandbox/Snack link

https://github.com/resticker/gluetest1

Steps to reproduce

1. git clone https://github.com/resticker/gluetest1
2. yarn to install dependencies (I'm using Yarn v1.22.19)
3. yarn web
4. See console output with warnings

gluestack-ui Version

v2 (not sure which package version goes here)

Platform

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

Other Platform

No response

Additional Information

To create this project, all I did was:

1. yarn create expo-app
2. npx gluestack-ui init
3. yarn web

Expo version: 51.0.24 Yarn version: 1.22.19

Maybe related to: https://github.com/adobe/react-spectrum/issues/6394

Warnings look like:

Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓░░░░░░ 66.2% (502/617)
λ Bundled 18685ms node_modules/expo-router/node/render.js (1093 modules)
Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 99.6% (1077/1079)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/conversion.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/manipulation.main.js:1:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/conversion.main.js:2:33)
  factory (node_modules/@internationalized/date/dist/manipulation.main.js:1:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/GregorianCalendar.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/GregorianCalendar.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/conversion.main.js:3:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/GregorianCalendar.main.js -> node_modules/@internationalized/date/dist/utils.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/utils.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/GregorianCalendar.main.js:2:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/queries.main.js -> node_modules/@internationalized/date/dist/conversion.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/queries.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/conversion.main.js:4:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/string.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/string.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/CalendarDate.main.js:3:33)
λ  WARN  props.pointerEvents is deprecated. Use style.pointerEvents 
Web Bundled 21329ms node_modules/expo-router/entry.js (1079 modules)
Web Bundled 1832ms node_modules/expo-router/entry.js (1075 modules)
 LOG  [web] Logs will appear in the browser console
λ Bundled 61ms node_modules/expo-router/node/render.js (1 module)
Web node_modules/expo-router/entry.js ░░░░░░░░░░░░░░░░  0.0% (0/1)λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/conversion.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/manipulation.main.js:1:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/conversion.main.js:2:33)
  factory (node_modules/@internationalized/date/dist/manipulation.main.js:1:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/GregorianCalendar.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/GregorianCalendar.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/conversion.main.js:3:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/manipulation.main.js -> node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/GregorianCalendar.main.js -> node_modules/@internationalized/date/dist/utils.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/utils.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/GregorianCalendar.main.js:2:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/conversion.main.js -> node_modules/@internationalized/date/dist/queries.main.js -> node_modules/@internationalized/date/dist/conversion.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/queries.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/conversion.main.js:4:33)
λ  WARN  Require cycle: node_modules/@internationalized/date/dist/CalendarDate.main.js -> node_modules/@internationalized/date/dist/string.main.js -> node_modules/@internationalized/date/dist/CalendarDate.main.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/@internationalized/date/dist/string.main.js:1:33)
  factory (node_modules/@internationalized/date/dist/CalendarDate.main.js:3:33)
λ  WARN  props.pointerEvents is deprecated. Use style.pointerEvents 
λ  WARN  accessibilityRole is deprecated. Use role. 
Web Bundled 1157ms node_modules/expo-router/entry.js (1 module)
Web Bundled 75ms node_modules/expo-router/entry.js (1 module)
 LOG  [web] Logs will appear in the browser console

[rajat693]

Hi @resticker ,

Thank you for reporting the issue. I created a new Expo project, initialized gluestack-ui, and ran it on the web. I didn’t encounter the warnings you’re seeing. You can check out the repository here: expo-gluestack-v2-setup.

The issue might be related to cyclic imports that could have occurred inadvertently. For further details on circular dependencies and how to handle them, you might find this Stack Overflow link helpful.

If you continue to experience issues or have any additional questions, please let us know, and We’ll be happy to assist!

[resticker]

@rajat693 it looks like you didn't use yarn

[wayofka]

I have the same problem as @resticker. Following the instructions in docs I installed expo -> nativewind -> gluestack v2. Thank you @rajat693 for posting your setup. I was looking for differences and I found a way to break your repo (setup).

Add dependencies to package.json

   "react-native-safe-area-context": "4.10.5",
   "expo-router": "~3.5.23",
   "expo-linking": "~6.3.1",

Enable static rendering in app.json

    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/favicon.png"
    }

Add these two file

/app/index.tsx

import React from 'react';
import { Text, View } from 'react-native';

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}>
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

/app/_layout.tsx

import React from 'react';
import { Stack } from 'expo-router';
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';

// Import your global CSS file
import "../global.css"

export default function RootLayout() {
  return (
    <GluestackUIProvider>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </GluestackUIProvider>
  );
}

I don't know what we're doing wrong, I'll be happy for any advice