reflex icon indicating copy to clipboard operation
reflex copied to clipboard

CSS files in custom components are deleted during build in Reflex >= 0.7.4, breaking style import

Open lcastiglione opened this issue 10 months ago β€’ 2 comments

Describe the bug
Since Reflex version 0.7.4, when compiling the app, .css files (such as styles.module.css) inside the custom component folder are deleted from the .web folder, causing import errors in the JavaScript files that depend on them. This behavior didn’t occur in version 0.7.3.

To Reproduce
Steps to reproduce the behavior:

  1. Create a custom component using a .js file and a corresponding styles.module.css file.
  2. Place them in the assets/custom/components/ComponentName/ folder.
  3. Use the component in your app.
  4. Compile the app using Reflex version 0.7.4 or 0.7.5.
  5. Observe that the CSS file is briefly copied to .web, then deleted.
  6. The browser console shows an error due to the missing CSS import.
  • Code/Link to Repo:
from typing import Union
import reflex as rx

class DragDrop(rx.Component):
    library = "/public/custom/components/DragDrop/DragDrop.js"
    tag = "DragDrop"

    # This parameter must be named onFileDrop in the JavaScript code
    on_file_drop: rx.EventHandler[lambda files: [files]]

    background_color: rx.Var[Union[str, rx.constants.colors.Color]]

drag_drop = DragDrop.create

And the folder structure where the component is located is as follows:

project/
β”œβ”€ assets/
β”‚  β”œβ”€ custom/
β”‚  β”‚  β”œβ”€ components/
β”‚  β”‚  β”‚  β”œβ”€ DragDrop/
β”‚  β”‚  β”‚  β”‚  β”œβ”€ DragDrop.js
β”‚  β”‚  β”‚  β”‚  β”œβ”€ styles.module.css

Expected behavior
The CSS file should be preserved and properly copied to the .web folder during the build process, so the JavaScript component can import and apply the styles without error.

Screenshots
N/A (CSS file disappears silently, causing module not found errors)

Specifics (please complete the following information):

  • Python Version: 3.11.8
  • Reflex Version: Working in 0.7.3, broken in 0.7.4 and 0.7.5
  • OS: Windows 11 using WSL2 with Debian
  • Browser (Optional): Any modern browser (error occurs during build)

Additional context
Tried using add_imports() in the custom component to manually include the CSS file, but it didn’t solve the issue. The file is still deleted after appearing momentarily in .web.

I’m also leaving the Discord link with the answers Ask Inkeep gave me, although none of them worked for me. Discord query link.

lcastiglione avatar Apr 06 '25 00:04 lcastiglione

I had a similar issue with using rx.asset with the css file appearing and then disappearing:

https://discord.com/channels/1029853095527727165/1355930435393159368

bertbarabas avatar Apr 07 '25 13:04 bertbarabas