Monorepo issue with nativewind

[ahmed-rezk-dev]

Hello everyone. Hope you all having a good day.

I'm workin on a monorepo with shared components. Using rn-primitives

I created a new input package.

import * as React from 'react';
import { TextInput, type TextInputProps } from 'react-native';
import { cn } from '@shared/utils';

const Input = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
  ({ className, placeholderClassName, ...props }, ref) => {
    return (
      <TextInput
        ref={ref}
        className={cn(
          'web:flex h-12 native:h-14 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
          props.editable === false && 'opacity-50 web:cursor-not-allowed',
          className
        )}
        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
        {...props}
      />
    );
  }
);

Input.displayName = 'Input';

export { Input };

After building the package I use it as a dependencies within the same monorepo for apps/nextjs "@components/input": "workspace:*"

Which is sounds like is building fine

var Input = React.forwardRef(
  ({ className, placeholderClassName, ...props }, ref) => {
    return <import_react_native.TextInput
      ref={ref}
      className={(0, import_utils.cn)(
        "web:flex h-12 native:h-14 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
        props.editable === false && "opacity-50 web:cursor-not-allowed",
        className
      )}
      placeholderClassName={(0, import_utils.cn)("text-muted-foreground", placeholderClassName)}
      {...props}
    />;
  }
);
Input.displayName = "Input";

The problem is the classes is not showing up in the storybook when using it from the monorepo

<input placeholder="Write some stuff..." autocapitalize='sentences* autocomplete="on" autocorrect="on" dir="auto" rows="1" spellcheck="true" virtualkeyboardpolicy="auto" class="css-textinput-11aywtz r-placeholderTextColor-6taxm2">

But what is crazy that's is working fine if I used the any package after publishing it and install it from the npm registry.

Any idea how I can fix the issue?

Thank you

[dannyhw]

it could help to list your local monorepo package in the modules to transpile list in options

[ahmed-rezk-dev]

I tried that. But I didn't work. I feel like to have something to do with projectRoot. I tired to play around with it but no result.

[dannyhw]

Can you create a repro, not sure how to recreate this.

[ahmed-rezk-dev]

Can you create a repro, not sure how to recreate this.

1. Sure I just created this one. same as what I'm trying to fix. :) You will found the storybook config with apps/nextjs-nativewind/.storybook
2. The component I'm using for this example in packages/components/src/input.

Thank you for helping. Let me know if I need to do anything else :)

The Repo

[dannyhw]

@ahmed-rezk-dev ahmed-rezk-dev/everything-shared#1

its actually kinda difficult because the repo is quite complex but I was able to get something working with the vite framework however there were some issues with the way the package exports are defined

[ahmed-rezk-dev]

@dannyhw First thank you so much for working on that.

I did the same before and I ended with the problem with Label. I created a serrate story only for label & Separator. To check if the problem really Label but it's the same with any of the packages.

I just pushed label & Separator if you wanna give it a look. I'm so excited about my setup. And your plugin is playing a big part Can't wait to fix this problem

Thanks again.