bug: generated filename is too long

[Tallyb]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.16.0 but spotted on earlier versions as well

Current Behavior

• Building stencil with enableImportInjection: true in dev mode
• Serving angular project with @nx/angular:browser-esbuild

Throws the error:
No loader is configured for ".map" files: design-system/stencil/dist/esm/.js.map

The error points to the last line here:

/* @vite-ignore /
/ webpackInclude: /.entry.js$/ /
/ webpackExclude: /.system.entry.js$/ /
/ webpackMode: "lazy" */
./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}).then((importedModule) => {

This occurs for all component files.

Building in prod mode returns that it cannot find a file which is called /dist/esm/-.js

This happens in one of the component entry file which is 28 components and its first line is:
export { Y as yoo_animated_illustration, a as yoo_audio_player, b as yoo_avatars, c as yoo_banner, d as yoo_card_file, e as yoo_collapsible, f as yoo_context_menu, h as yoo_form_checkbox, i as yoo_form_document, j as yoo_form_document_dialog, k as yoo_header, l as yoo_illustration, m as yoo_ion_content, o as yoo_ion_scroll, p as yoo_ion_slide, q as yoo_ion_slides, r as yoo_items, s as yoo_links_preview, t as yoo_loader, u as yoo_mention_tag, v as yoo_navbar, w as yoo_photo_editor, x as yoo_progress_bar, y as yoo_range, z as yoo_swipe_container, A as yoo_tabs, B as yoo_truncated_line, C as yoo_videoplayer_core } from './yoo-animated-illustration.yoo-audio-player.yoo-avatars.yoo-banner.yoo-card-file.yoo-collapsible.yoo-context-menu.yoo-form-checkbox.yoo-form-document.yoo-form-document-dialog.yoo-header.yoo-illustration.yoo-ion-content.yoo-ion-scroll.yoo-ion-slide.yoo-ion-slides.yoo-items.yoo-links-preview.yoo-loader.yoo-mention-tag.yoo-navbar.yoo-photo-editor.yoo-progress-bar.yoo-range.yoo-swipe-container.yoo-tabs.yoo-truncated-line.yoo-videoplayer-core-5ae2fd71.js';

other components that have multiple components do not contain a similar line.

Expected Behavior

Make it work will be nice.
My guess is that the problem is that the generated filename is too long hence the file is not created. Need to add a check that the concatenation of component name does not exceed the size of a potential filename

System Info

System: node 20.11.1
    Platform: darwin (23.4.0)
   CPU Model: Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz (16 cpus)
    Compiler: /Users/tally/yoobic/yng/node_modules/@stencil/core/compiler/stencil.js
       Build: 1713191202
     Stencil: 4.16.0 🚛
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.30.3

Angular 17.3.5 
nx 18.3.1

Steps to Reproduce

will be complex to replicate

Code Reproduction URL

N/A

Additional Information

No response

[rwaskiewicz]

Thanks!

My guess is that the problem is that the generated filename is too long hence the file is not created. Need to add a check that the concatenation of component name does not exceed the size of a potential filename

That's definitely possible. If you could get us a minimal reproduction case that confirms this, it'd be a big help!

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.