Chunk generation problem

[oliveryasuna]

Description of the bug

After upgrading from 24.1.7 to 24.1.8, we get weird chunks like the following:

 const tpl = document.createElement('template');
 document.head.appendChild(tpl.content);
 tpl.innerHTML = block;
addCssBlock(`<style include="lumo-badge">${$css_0}</style>`);
const $css_0 = typeof $cssFromFile_0  === 'string' ? unsafeCSS($cssFromFile_0) : $cssFromFile_0;
function addCssBlock(block) {
import $cssFromFile_0 from 'Frontend/generated/jar-resources/styles/badge.css?inline';
import $cssFromFile_1 from 'Frontend/styles/manifest-editor.scss?inline';
import '@vaadin/app-layout/theme/lumo/vaadin-drawer-toggle.js';
import '@vaadin/button/theme/lumo/vaadin-button.js';
import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
import '@vaadin/combo-box/theme/lumo/vaadin-combo-box.js';
import '@vaadin/context-menu/theme/lumo/vaadin-context-menu.js';
import '@vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
import '@vaadin/dialog/theme/lumo/vaadin-dialog.js';
import '@vaadin/email-field/theme/lumo/vaadin-email-field.js';
import '@vaadin/form-layout/theme/lumo/vaadin-form-item.js';
import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-column-group.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-column.js';
import '@vaadin/grid/theme/lumo/vaadin-grid-sorter.js';
import '@vaadin/grid/theme/lumo/vaadin-grid.js';
import '@vaadin/horizontal-layout/theme/lumo/vaadin-horizontal-layout.js';
import '@vaadin/icon/theme/lumo/vaadin-icon.js';
import '@vaadin/icons/vaadin-iconset.js';
import '@vaadin/item/theme/lumo/vaadin-item.js';
import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
import '@vaadin/notification/theme/lumo/vaadin-notification.js';
import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
import '@vaadin/polymer-legacy-adapter/style-modules.js';
import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
import '@vaadin/vaadin-lumo-styles/badge.js';
import '@vaadin/vertical-layout/theme/lumo/vaadin-vertical-layout.js';
import 'Frontend/generated/jar-resources/buttonFunctions.js';
import 'Frontend/generated/jar-resources/comboBoxConnector.js';
import 'Frontend/generated/jar-resources/contextMenuConnector.js';
import 'Frontend/generated/jar-resources/contextMenuTargetConnector.js';
import 'Frontend/generated/jar-resources/datepickerConnector.js';
import 'Frontend/generated/jar-resources/dndConnector.js';
import 'Frontend/generated/jar-resources/flow-component-renderer.js';
import 'Frontend/generated/jar-resources/gridConnector.js';
import 'Frontend/generated/jar-resources/lit-renderer.ts';
import 'Frontend/generated/jar-resources/vaadin-big-decimal-field.js';
import 'Frontend/generated/jar-resources/vaadin-grid-flow-selection-column.js';
import 'Frontend/src/responsive-app-layout/responsive-app-layout.ts';
import 'Frontend/src/responsive-app-layout/responsive-nav-item.ts';
import 'Frontend/src/vcf-masked-text-field/vcf-masked-text-field.js';
import { css, unsafeCSS, registerStyles } from '@vaadin/vaadin-themable-mixin';
import { injectGlobalCss } from 'Frontend/generated/jar-resources/theme-util.js';

injectGlobalCss($cssFromFile_1.toString(), 'CSSImport end', document);
}

import statements should be at the top level, thus we get Vite errors such as the following:

> Vite process exited with non-zero exit code.
  Stderr: 'vite v4.3.9 building for production...
  transforming...
  ✓ 95 modules transformed.
  ✓ built in 527ms
  'import' and 'export' may only appear at the top level
  file: /Users/oliver/Desktop/temp/my-project/webapp/frontend/generated/flow/chunks/chunk-1346eb852bbd0b39ff83320d261244ab73bf455d2e46d5135c021e3040087eb5.js:8:0
   6: const $css_0 = typeof $cssFromFile_0  === 'string' ? unsafeCSS($cssFromFile_0) : $cssFromFile_0;
   7: function addCssBlock(block) {
   8: import $cssFromFile_0 from 'Frontend/generated/jar-resources/styles/badge.css?inline';
      ^
   9: import $cssFromFile_1 from 'Frontend/styles/manifest-editor.scss?inline';
  10: import '@vaadin/app-layout/theme/lumo/vaadin-drawer-toggle.js';
  error during build:
  RollupError: 'import' and 'export' may only appear at the top level
      at error (file:///Users/oliver/Desktop/temp/my-project/webapp/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
      at Module.error (file:///Users/oliver/Desktop/temp/my-project/webapp/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:13726:16)
      at Module.tryParse (file:///Users/oliver/Desktop/temp/my-project/webapp/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:14457:25)
      at Module.setSource (file:///Users/oliver/Desktop/temp/my-project/webapp/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:14058:39)
      at ModuleLoader.addModuleSource (file:///Users/oliver/Desktop/temp/my-project/webapp/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24623:20)
  '

I looked at AbstractUpdateImports, and don't see how it's even possible for chunks to look like the above.

Note: We use the Gradle plugin.

Expected behavior

Chunks generate properly.

Minimal reproducible example

Could not reproduce in a small project. Cannot share code from proprietary project here, but open to a call.

Versions

• Vaadin / Flow version: 24.1.8
• Java version: 17
• OS version: macOS