hey @bronowsm You can refer this guide
https://techblog.geekyants.com/setting-up-universal-storybook-with-nativewind-a-step-by-step-guide

Hello @sravankumar101 thanks, but it doesn't cover the direct gluestack integration. I recreated all steps from the guide that you've send and it's working fine, but once I add any gluestack component, I'm getting the following errors:
Those error comes even with very minimal input from gluestack library. For example, this is my GluestackUIProvider implementation that is causing the error:

"use client";
import React, { useEffect } from "react";
import { config } from "./config";
import { ToastProvider } from "@gluestack-ui/toast";

export function GluestackUIProvider({
  mode = "light",
  ...props
}: {
  mode?: "light" | "dark";
  children?: React.ReactNode;
}) {
  return <ToastProvider>{props.children}</ToastProvider>;
}

Using this decorator in storybook results in error. The error is gone once I remove ToastProvider. The same error happens whenever importing config and using it to flush styles. And the error is gone once I stop using vars function from nativewind. I want to add, that when using gluestack v2 in expo app, it's working just fine. The problem is only with storybook. May I ask you for assistance here?

Hey @bronowsm You're gluestack provider is having the issue
export function GluestackUIProvider({ mode = "light", ...props }: { mode?: "light" | "dark"; children?: any; }) { const stringcssvars = Object.keys(config[mode]).reduce((acc, cur) => { acc +=${cur}:${config[mode][cur]};; return acc; }, ""); setFlushStyles(:root {${stringcssvars}} ); if (config[mode] && typeof document !== "undefined") { const element = document.documentElement; if (element) { const head = element.querySelector("head"); const style = document.createElement("style"); style.innerHTML =:root {${stringcssvars}} ; if (head) head.appendChild(style); } } return ( <OverlayProvider> <ToastProvider>{props.children}</ToastProvider> </OverlayProvider> ); }
Ideally it should be something like this.

Yes I know, but all of the above is generating errors.
For example:

  const stringcssvars = Object.keys(config[mode]).reduce((acc, cur) => {
    acc += ${cur}:${config[mode][cur]};;
    return acc;
  }, "");
  setFlushStyles(:root {${stringcssvars}} );

is causing an error while accessing config[mode]. The error is the following: 'exports is not defined'. And it comes from the config file. The error is gone, when I'm commenting out vars function from nativewind. Why is that? Why vars function is causing this error?

The OverlayProvider is also generating error on it's own

Object.defineProperty called on non-object

when I remove the OverlayProvider, everything goes back to normal

so both, gluestack components and nativewind function used in the config file are generating weird errors

Okay, Please give us sometime @bronowsm .We will revert back to you.

Thank you! And, what may be important: the same provider is working fine when I'm running it in expo. The problem is only when running components in storybook

Noted.

hey @bronowsm Could you please share your repo here ?

Hello @sravankumar101 , here it is: https://github.com/Wiszun/gluestack-v2-storybook

once you run npm run storybook:web, the storybook instance is building and loading, but with error "exports is not defined"

and once you go to .storybook/preview.js and remove GluestackUIProvider from decorator, everything works fine

hey @bronowsm ,
You've didn't setup babel config correctly & missed some required installs.
I've made the necessary changes required could you please give me access to raise a pr for the repo.I've sent you my github username.