Styles not being applied on a clean install #2559

Viraj-10 · 2024-11-04T09:55:21Z

Discussed in #2526

^{Originally posted by Wolvinny October 23, 2024}
Hi all.
First of all, i am very new to web development. I do have experience in typescript and node, but this is my first time touching web development, other than fooling around a little with React, so this might be a very simple fix but i've been stuck at this for over 6 hours at this point.
Currently, i am stuck on an issue, where i can import buttons and other components just fine, but they just wont be styled.

Following the guide, i first created an expo project (i am using, or well, trying to use react native)
After that, i ran the gluestack-ui init command and added a button (yes, i also added it using the npx command). I also tried the manual installation but this only caused more issues.
Upon running the npm start command, and opening the web version, i am greeted with this error: Unable to resolve module '@/global.css' from C:\Users\<>\app\app\_layout.tsx: '@/global.css' could not be found within the project or in these directories: node_modules.
This points to the lines

import "'@/global.css'";
import { GluestackUIProvider } from "@/'components/ui'/gluestack-ui-provider";

which for some reason have additional ' in them (again, clean install, i did not change any code)

After removing those; and restarting the web server, and running the following code.

import { Button, ButtonText } from "@/components/ui/button";
import React from "react";
import { View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
    
      <Button size="md" variant="solid" action="primary" >
          <ButtonText>Hello World!</ButtonText>
        </Button>
      
    </View>
  );
}

i get the following result:

None of the other components also render.
I am using Node v22.9.0; react v18.2.0 and expo SDK 51.0.38

I cannot make a snack (it freezes when i upload my code) or a sandbox (it does not allow me to upload any files),
but i feel this is a very simple issue that i cannot wrap my head around, nor have i seen someone with the same issue

Full npm ls output:

├── @babel/[email protected]
├── @expo/[email protected]
├── @gluestack-ui/[email protected]
├── @gluestack-ui/[email protected]
├── @gluestack-ui/[email protected]
├── @gluestack-ui/[email protected]
├── @react-navigation/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
```</div>

The text was updated successfully, but these errors were encountered:

gaofc · 2024-11-04T12:15:13Z

I also followed the guide and the button didn't display. Has this problem been resolved?

JackGrantham · 2024-11-05T05:50:36Z

Seeing the same issue. Fresh expo react native app with no changes and follow the gluestack-ui guide both using CLI and manually and styles don't display.

mithun-si · 2024-11-05T06:17:32Z

I am experiencing the same issue in my Next.js project and also try to applying Tailwind utility classes to the button, there is no effect on its style.

Viraj-10 · 2024-11-05T06:29:58Z

Hey @mithun-si , @JackGrantham @gaofc, Can you please share repo? and also which OS you are using windows or mac?

mithun-si · 2024-11-05T07:38:13Z

I'm using Windows

gaofc · 2024-11-05T07:52:55Z

I'm using Windows too.

mithun-si · 2024-11-05T08:22:23Z

https://codesandbox.io/p/devbox/playaround-hpfszq

this is the my code sandbox link I think that you can get idea from there and also for your information I am using
next.js and
npx gluestack-ui@latest init
npx gluestack-ui@latest add --all
command to install gluestack-ui and it's components

ryanmitchell · 2024-11-05T10:01:52Z

I'm seeing the same issue in an Expo project. The components work but no styling is applied.

vaibhk20 · 2024-11-05T13:22:23Z

Hey everyone! We've released an updated version of the CLI with bug fixes to address the reported issues. Let us know if you face any issues while using it.

mithun-si · 2024-11-05T13:58:07Z

Hi @vaibhk20, I am created fresh Next.js project and then install the latest gluestack-ui with this command "npx gluestack-ui@latest init" and try to used Button component but still the style is not applied

Next.js version: 14.2.16

Viraj-10 · 2024-11-05T14:25:11Z

Hey @mithun-si, Please add "jsxImportSource": "nativewind" to your tsconfig file.

JackGrantham · 2024-11-05T14:38:41Z

I am still seeing the same issue.

Here are the steps I am taking:

run 'npx create-expo-app@latest --template' using the Blank Typescript template
run 'npm start' to make sure the application runs as expected
stop application and follow the gluestack-ui guide and start by running 'npx gluestack-ui init'
run 'npm start'
see issues with import of global.css and GluestackUIProvider
Remove extra single quotes from both import statements
run 'npm start' ... application starts fine
stop application and run 'npx gluestack-ui add button'
add Button with ButtonText in App.tsx file making sure to import from './components/ui/button'
run 'npm start' ... see button text rendering but no styling

I also have tried adding "jsxImportSource": "nativewind" to my tsconfig file and this did not change anything for me.

I am using Windows 11

Here is my code:
https://github.com/JackGrantham/gluestackv2-test

Viraj-10 · 2024-11-05T14:55:38Z

Hey @JackGrantham, I have created a PR with all the fixes. Seems like cli is not working properly on windows.

Viraj-10 · 2024-11-05T14:58:13Z

I'm seeing the same issue in an Expo project. The components work but no styling is applied.

Hey @ryanmitchell, Can you checkout this PR and try to make same changes to it for more detailed guide please have look at nativewind docs.

ryanmitchell · 2024-11-05T15:08:18Z

Yeah thanks. I got it working by copying over the configs from the starter kit app.

JackGrantham · 2024-11-05T15:21:55Z

Thanks @Viraj-10 your changes worked. However, I did need to downgrade to Node v20 from v22 since I was running into issues with 'require' not being defined in some imports in tailwind.config.js and metro.config.js

mathis-kdio · 2024-11-05T18:25:17Z

Does this also work with nativewind 4.1.23?

mithun-si · 2024-11-06T05:01:11Z

Hey @Viraj-10 , After adding this "jsxImportSource": "nativewind" to mytsconfig file now I can use tailwindcss it's work thanks but the default behavior still not working for example

  <Button size="md" variant="outline" action="primary" >
      <ButtonText>Hello World!</ButtonText>
    </Button>

it should show a button with some outline right? but my case I only see the Hello World! text nothing else

Next.js: 14.2.16
windows: 11 pro

Viraj-10 · 2024-11-06T06:10:36Z

Does this also work with nativewind 4.1.23?

@mathis-kdio, We are releasing support for v4.1 this week.
#2475 you can checkout all the changes here.

Viraj-10 · 2024-11-06T06:12:58Z

Hey @Viraj-10 , After adding this "jsxImportSource": "nativewind" to mytsconfig file now I can use tailwindcss it's work thanks but the default behavior still not working for example
  <Button size="md" variant="outline" action="primary" >
      <ButtonText>Hello World!</ButtonText>
    </Button>
it should show a button with some outline right? but my case I only see the Hello World! text nothing else

Next.js: 14.2.16 windows: 11 pro

@mithun-si please check your content property in tailwind.config.js file. give proper path to all the components and pages. checkout guide from tailwind here

mithun-si · 2024-11-06T07:37:59Z

Hey @Viraj-10 , After adding this "jsxImportSource": "nativewind" to mytsconfig file now I can use tailwindcss it's work thanks but the default behavior still not working for example
  <Button size="md" variant="outline" action="primary" >
      <ButtonText>Hello World!</ButtonText>
    </Button>
it should show a button with some outline right? but my case I only see the Hello World! text nothing else
Next.js: 14.2.16 windows: 11 pro
@mithun-si please check your content property in tailwind.config.js file. give proper path to all the components and pages. checkout guide from tailwind here

Thanks @Viraj-10 it's working now but for action="primary"/"secondary" the color is not shown why? is there anything else need to add to show color I am using gluestack-ui CLI also when I am building my Next.js application there is a lot's of type related warning and error and that's why application build is failed please solve this ASAP and If I use
//@ts-ignore for where need type I can successfully build application so if I use //@ts-ignore is there any problem arise in future?

miguel93041 · 2024-11-19T23:56:37Z

@Viraj-10 Any updates on when #2475 will be released? Nativewind 4.1 supposedly addresses nativewind/nativewind#924, which has been a major hassle for both production and development.

Viraj-10 · 2024-11-20T01:35:44Z

@miguel93041 you can install v4.1 with --alpha flag in CLI.
we announced it yesterday on discord and twitter.

flyingL123 · 2024-11-22T23:43:58Z

Seeing the same issue. Fresh expo react native app with no changes and follow the gluestack-ui guide both using CLI and manually and styles don't display.

@ryanmitchell did you ever get this working? I followed the instructions to try and start using gluestack in an existing expo project, but I can't get any styles to be applied to the components. Literally just trying to display a box from the documentation, but none of the styles are working. The component is rendered, but no styles.

I also followed all of these instructions, with no luck: https://www.nativewind.dev/getting-started/expo-router

Viraj-10 · 2024-11-23T03:01:53Z

Hey @flyingL123, Please try this repo. Let me know if it works for you.
Also Please provide your repo as well.

flyingL123 · 2024-11-25T14:11:20Z

@Viraj-10 yes the repo you provided does work for me. I copied all of the config files from your project to mine, but still no styles are applied. The only difference I notice is that both of our projects are using expo52, but your project uses the new architecture and mine does not. Is there any way that could possibly be causing the problem?

Unfortunately I can not share my repo because it's private, but I can try to make a minimal example to reproduce the problem if necessary.

Viraj-10 · 2024-11-26T06:13:17Z

Hey @flyingL123, Even after disabling new arch it's working for me. Can you please try to reproduce this in similar repo?

ryanmitchell · 2024-11-26T10:54:33Z

@Viraj-10 I've just updated to Expo 52 and everything is broken again, no styles are being generated. I tried rolling back my changes but still no styles are generated. I cant figure out why.

I've tried different node versions (22, 21, 20) and lots of different configurations of tailwinds.config.js and metro.config.js and tsconfig.js.

Can I share the repo with you to see if you can see the issue?

Viraj-10 · 2024-11-26T12:04:03Z

Hey @ryanmitchell, Please try this documentation otherwise please provide a repo so that we will be able to see the issue.

ryanmitchell · 2024-11-26T12:13:48Z

@Viraj-10 thanks for that, the changes to the metro.config.js file made the difference

flyingL123 · 2024-11-26T14:32:21Z

@Viraj-10 - I noticed that the repo I am using, after following the instructions to install gluestack-ui, a patches directory was created with a patch file inside of it. I didn't create this myself and I see it does not exist in the working repo you created. Maybe that's the issue? The created file is patches/react-native-css-interop+0.0.36.patch.

Also, while troubleshooting this, after making changes to configuration files, I have been running npx expo start --clear. I was assuming that would create the javascript bundles so I would see the updates. I just wanted to double check that is correct. Or maybe there is something else I'm supposed to be doing to see the updates and that's why I am having issues?

flyingL123 · 2024-11-26T16:41:23Z

@Viraj-10 here is reproduction of my repo showing gluestack not working. I'm really not sure what else to do. Hope I'm missing something obvious you can point out. Thanks very much for you help.

https://github.com/flyingL123/gluestack-not-working

Viraj-10 · 2024-11-27T06:36:45Z

Hey @flyingL123, I have created a PR for your repo. Fixing issue with init. I have also updated all the components to latest version.

flyingL123 · 2024-11-27T19:37:37Z

@Viraj-10 thank you. I still don't understand what I was doing wrong, but I'll take it. Appreciate the assistance.

Viraj-10 · 2024-11-28T07:46:48Z

@flyingL123, There was a issue with version of nativewind and react-native-css-interop. Also metro.config.js was not correctly configured.

franmarvega · 2024-11-30T18:58:22Z

I have a similar issue. I am working in a React Native Expo project. I have installed gluestack/ui following all the steps from the official installation guide, I am able to add components but no styling is applied to them. I have tried some of the modifications suggested in previous coments, but the issue persists. This is my Repo.

This is the output of npm list:

JavanPoirier · 2024-12-01T01:55:38Z

For anyone who may have a similar issue with styles not being applied, make sure to check your content array in tailwind.config.js. I have a monorepo setup which differs and made it easy to forget this. See:

#2612 (comment)

Under-Warz · 2024-12-30T08:31:49Z

Same issue here. I've double check tailwind configuration and it's working fine with react-native composant (Pressable, View...) but when I'm using the Button from gluestack, all the tailwind classes disappear. Only the nativewind classes remain.

I also try to use the storybook projects from exemple directory, they are not working...

PS : I have to use the [email protected] to be able to make tailwind working, with the last version, all my tailwind classes disappear on render

EDIT : I finally make it working on storybook through react-native-web & on device on a monorepo. I don't know if it's because I use a separate app directory to carry on storybook app but it's working now.

I still have to downgrade the nativewind version to 4.0.36 and make some resolutions on pnpm to fix version of [email protected].

arv07 · 2025-01-05T03:29:16Z

I have the same problem only in this case: I created this folder /src/login/ComponentName.tsx. so when I import this file from app/(login) styles are not apply, but if I moved ComponentName.tsx to /app folder, all styles are applied correctly.

ziquanc · 2025-01-06T16:40:26Z

I am having issue on my new RN Expo project, i refer this https://www.nativewind.dev/getting-started/expo-router and the last step import "../global.css"; then it works for me.

fraction01 · 2025-01-08T10:33:21Z

I tried #2559 (comment) and was able to fix this by removing "react-native-css-interop": "^0.0.36", from package.json and patches/react-native-css-interop+0.0.36.patch file from the patches folder, then npm i and npx expo start --clear.

You can check the changes made by @Viraj-10 in this PR for other possible solutions.

Thanks @Viraj-10

github-project-automation bot added this to gluestack-ui project management. Nov 4, 2024

gluestackadmin assigned Viraj-10 Nov 4, 2024

Viraj-10 assigned rajat693 and unassigned Viraj-10 Dec 13, 2024

Styles not being applied on a clean install #2559

Styles not being applied on a clean install #2559

Comments

Viraj-10 commented Nov 4, 2024

Discussed in #2526

gaofc commented Nov 4, 2024

JackGrantham commented Nov 5, 2024

mithun-si commented Nov 5, 2024

Viraj-10 commented Nov 5, 2024

mithun-si commented Nov 5, 2024

gaofc commented Nov 5, 2024

mithun-si commented Nov 5, 2024 • edited Loading

ryanmitchell commented Nov 5, 2024

vaibhk20 commented Nov 5, 2024

mithun-si commented Nov 5, 2024

Viraj-10 commented Nov 5, 2024

JackGrantham commented Nov 5, 2024 • edited Loading

Viraj-10 commented Nov 5, 2024

Viraj-10 commented Nov 5, 2024

ryanmitchell commented Nov 5, 2024

JackGrantham commented Nov 5, 2024

mathis-kdio commented Nov 5, 2024

mithun-si commented Nov 6, 2024 • edited Loading

Viraj-10 commented Nov 6, 2024

Viraj-10 commented Nov 6, 2024

mithun-si commented Nov 6, 2024 • edited Loading

miguel93041 commented Nov 19, 2024

Viraj-10 commented Nov 20, 2024

flyingL123 commented Nov 22, 2024 • edited Loading

Viraj-10 commented Nov 23, 2024

flyingL123 commented Nov 25, 2024

Viraj-10 commented Nov 26, 2024

ryanmitchell commented Nov 26, 2024

Viraj-10 commented Nov 26, 2024

ryanmitchell commented Nov 26, 2024

flyingL123 commented Nov 26, 2024 • edited Loading

flyingL123 commented Nov 26, 2024

Viraj-10 commented Nov 27, 2024 • edited Loading

flyingL123 commented Nov 27, 2024

Viraj-10 commented Nov 28, 2024

franmarvega commented Nov 30, 2024

JavanPoirier commented Dec 1, 2024

Under-Warz commented Dec 30, 2024 • edited Loading

arv07 commented Jan 5, 2025

ziquanc commented Jan 6, 2025

fraction01 commented Jan 8, 2025

mithun-si commented Nov 5, 2024 •

edited

Loading

JackGrantham commented Nov 5, 2024 •

edited

Loading

mithun-si commented Nov 6, 2024 •

edited

Loading

mithun-si commented Nov 6, 2024 •

edited

Loading

flyingL123 commented Nov 22, 2024 •

edited

Loading

flyingL123 commented Nov 26, 2024 •

edited

Loading

Viraj-10 commented Nov 27, 2024 •

edited

Loading

Under-Warz commented Dec 30, 2024 •

edited

Loading