PiT 24.4: app does not compile in dev and prod mode when upgrading to 24.4 because css module cannot be imported

[manolo]

Description

When migrating the project to 24.4, './MainLayout.module.css' is not found even though the file is still there

ls -l1 frontend/views/Main*
frontend/views/MainLayout.module.css
frontend/views/MainLayout.tsx

grep MainLayout.module.css frontend/views/MainLayout.tsx
import css from './MainLayout.module.css';

Application still works in dev-mode but fails in prod-mode, thus the way to import styles needs to be updated somehow

How to reproduce

1. checkout the project

   git clone https://github.com/vaadin/skeleton-starter-hilla-react-gradle.git
   cd skeleton-starter-hilla-react-gradle

2. modify build files by upgrading version and using vaadin artifacts

   • build.gradle

     
     @@ -9,7 +9,7 @@ plugins {
     id 'java'
     id 'org.springframework.boot' version '3.1.5'
     id 'io.spring.dependency-management' version '1.1.0'

   • id 'dev.hilla' version "$hillaVersion"
   • id 'com.vaadin' version "$vaadinVersion" }

   repositories { @@ -22,7 +22,7 @@ repositories { }

   dependencies {

   • implementation 'dev.hilla:hilla-react-spring-boot-starter'
   • implementation 'com.vaadin:vaadin-spring-boot-starter' implementation 'org.parttio:line-awesome:1.1.0' developmentOnly 'org.springframework.boot:spring-boot-devtools' testImplementation 'org.springframework.boot:spring-boot-starter-test' @@ -30,6 +30,6 @@ dependencies {

   dependencyManagement { imports {

   • mavenBom "dev.hilla:hilla-bom:$hillaVersion"
   • mavenBom "com.vaadin:vaadin-bom:$vaadinVersion" } }

   • settings.gradle

     
     plugins {

   • id 'dev.hilla' version "${hillaVersion}"
   • id 'com.vaadin' version "${vaadinVersion}" } }

   • gradle.properties

     -hillaVersion=2.5.6
     +vaadinVersion=24.4.0.alpha3

3. Patch sources files to use new namespaces and package names

   
   diff --git a/src/main/java/com/example/application/endpoints/helloreact/HelloReactEndpoint.java b/src/main/java/com/example/application/endpoints/helloreact/HelloReactEndpoint.java
   index 99765f8..886e39c 100644
   --- a/src/main/java/com/example/application/endpoints/helloreact/HelloReactEndpoint.java
   +++ b/src/main/java/com/example/application/endpoints/helloreact/HelloReactEndpoint.java
   @@ -1,8 +1,8 @@
   package com.example.application.endpoints.helloreact;
   
   import com.vaadin.flow.server.auth.AnonymousAllowed;
   -import dev.hilla.Endpoint;
   -import dev.hilla.Nonnull;
   +import com.vaadin.hilla.Endpoint;
   +import com.vaadin.hilla.Nonnull;
   
   @Endpoint
   @AnonymousAllowed

diff --git a/frontend/components/placeholder/Placeholder.tsx b/frontend/components/placeholder/Placeholder.tsx index c9443d2..286038b 100644 --- a/frontend/components/placeholder/Placeholder.tsx +++ b/frontend/components/placeholder/Placeholder.tsx @@ -1,4 +1,4 @@ -import { ProgressBar } from '@hilla/react-components/ProgressBar.js'; +import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';

export default function Placeholder() { return ; diff --git a/frontend/views/MainLayout.tsx b/frontend/views/MainLayout.tsx index 688d6d3..5511c4c 100644 --- a/frontend/views/MainLayout.tsx +++ b/frontend/views/MainLayout.tsx @@ -1,7 +1,7 @@ -import { AppLayout } from '@hilla/react-components/AppLayout.js'; -import { DrawerToggle } from '@hilla/react-components/DrawerToggle.js'; -import { Item } from '@hilla/react-components/Item.js'; -import { Scroller } from '@hilla/react-components/Scroller.js'; +import { AppLayout } from '@vaadin/react-components/AppLayout.js'; +import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js'; +import { Item } from '@vaadin/react-components/Item.js'; +import { Scroller } from '@vaadin/react-components/Scroller.js'; import Placeholder from 'Frontend/components/placeholder/Placeholder.js'; import { MenuProps, routes, useViewMatches, ViewRouteObject } from 'Frontend/routes.js'; import { Suspense } from 'react'; diff --git a/frontend/views/helloreact/HelloReactView.tsx b/frontend/views/helloreact/HelloReactView.tsx index 9896016..3b7dfd4 100644 --- a/frontend/views/helloreact/HelloReactView.tsx +++ b/frontend/views/helloreact/HelloReactView.tsx @@ -1,6 +1,6 @@ -import { Button } from '@hilla/react-components/Button.js'; -import { Notification } from '@hilla/react-components/Notification.js'; -import { TextField } from '@hilla/react-components/TextField.js'; +import { Button } from '@vaadin/react-components/Button.js'; +import { Notification } from '@vaadin/react-components/Notification.js'; +import { TextField } from '@vaadin/react-components/TextField.js'; import { HelloReactEndpoint } from 'Frontend/generated/endpoints.js'; import { useState } from 'react';

5. run the project in dev-mode, see the error, but it still works fine in browser

gradlew bootRun ... ERROR(TypeScript) Cannot find module './MainLayout.module.css' or its corresponding type declarations. ... open http://localhost:8080

5. run the project and see the error

./gradlew clean build -Pvaadin.productionMode ...

Vite process exited with non-zero exit code. Stderr: 'vite v5.0.12 building for production... transforming... ✓ 257 modules transformed. rendering chunks... frontend/views/MainLayout.tsx(9,17): error TS2307: Cannot find module './MainLayout.module.css' or its corresponding type declarations. '

[manolo]

BTW, the skeleton-starter-hilla-react does not fail because it does not have the css import for the same view

[mcollovati]

I couldn't reproduce locally following the provided steps. I do not see errors neither in dev mode nor in production build.

[manolo]

Re-run the PiT script and still failing

https://github.com/vaadin/platform/actions/runs/7871340444/job/21474435316#step:10:1591

[tltv]

Tried to reproduce this locally and first run stops to this error:

com.vaadin.flow.server.ExecutionFailedException:
***************************************************************************
*  TypeScript type declaration file 'types.d.ts' has been updated to the  *
*  latest version by Vaadin. Previous content has been backed up on       *
*  'types.d.ts.flowBackup' file. Please verify that the updated           *
*  'types.d.ts' file contains configuration needed for your project, and  *
*  then delete the backup file.                                           *
***************************************************************************

After running with updated types.d.ts I don't get errors. Only these warnings.

[mcollovati]

I could reproduce by deleting the original types.d.ts and using the one generated by Flow. After adding the following snippet that was present in the original file, the build worked

declare module '*.module.css' {
  declare const styles: Record<string, string>;
  export default styles;
}

[tltv]

Yes, I can confirm that. So something removes original types.d.ts somehow. Is it something in the PiT test script that removes it? Instead of removing it, adding following in the end of the file would fix that then.

declare module '*.css?inline' {
  import { CSSResultGroup } from 'lit';
  const content: CSSResultGroup;
  export default content;
}

[mshabarov]

Instead of removing it, adding following in the end of the file would fix that then.

It needs type keyword:

declare module '*.css?inline' {
  import type { CSSResultGroup } from 'lit';
  const content: CSSResultGroup;
  export default content;
}

[mcollovati]

It needs type keyword:

The version with the type keyword in not yet released. 24.4.0.alpha3 still has the contents without the type keyword.

[manolo]

I updated PiT script to catch the exception and re-run the dev-mode after file was correctly updated by flow. Not an issue in flow. Closing it.