vaadin / hilla

Build better business applications, faster. No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development.
https://hilla.dev
Apache License 2.0
922 stars 58 forks source link

CSS files are not resolved from external node modules #2475

Closed abdullahtellioglu closed 5 months ago

abdullahtellioglu commented 5 months ago

Describe the bug

I was trying to import an external react component into my project. https://react-slick.neostack.com/docs/get-started I was following the introductions and importing CSS files failed to resolve imports in Hilla project. It works for React starter projects though https://stackblitz.com/edit/vitejs-vite-emnznh?file=src%2FApp.tsx

failure

Expected-behavior

It should resolve the external CSS files.

Reproduction

Follow the introductions in the component page and you will end up a file look like this

import { ViewConfig } from '@vaadin/hilla-file-router/types.js';
import { useSignal } from '@vaadin/hilla-react-signals';
import {Button} from "@vaadin/react-components";

import React from "react";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

export const config: ViewConfig = {
  menu: { order: 0, icon: 'line-awesome/svg/globe-solid.svg' },
  title: 'User dashboard',

};

export default function UserdashboardView() {
  const name = useSignal('');
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
      <Slider {...settings}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
  );
}

System Info

    <properties>
        <java.version>21</java.version>
        <vaadin.version>24.4.0.beta4</vaadin.version>
    </properties>
Lodin commented 5 months ago

Hi @abdullahtellioglu! Thanks for filing the issue! I have created a repro for your case: https://github.com/Lodin/test-hilla-css-issue However, for me it works as expected, all CSS files are loading.

Could you take a look at the repro code? Does your code have any differences?

abdullahtellioglu commented 5 months ago

You are right @Lodin. There might be some HMR, vite or npm kind of issue that happened at that time randomly I guess. Closing the issue. Thanks 🙇