bug: ESM build imports from invalid file

[janarvaez]

Prerequisites

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

Stencil Version

2.17.0

Current Behavior

I have a Stencil library (call it A) that imports another Stencil UI library (call it B), both coded by me. When building A, the ESM build for one specific component (which comes from B) gets an invalid import:

// File: dist/esm/kwc-check-circle-icon_23.entry.js

export { C as kwc_check_circle_icon, a as kwc_check_icon, b as kwc_contacts_icon, c as kwc_copy_button, d as kwc_copy_icon, E as kwc_exclamation_circle_icon, M as kwc_modal, Q as kwc_question_circle_icon, S as kwc_sync_icon, T as kwc_tab, e as kwc_tabs, f as kwc_tooltip_container, U as kwc_user_icon, A as usp_autocomplete, B as usp_base_population_select, I as usp_is_user_in_segment, K as usp_kql_editor, g as usp_kql_help, P as usp_population_counter, h as usp_population_drilldown, i as usp_population_insights, j as usp_population_sampling, k as usp_text_input } from './kwc-check-circle-icon.kwc-check-icon.kwc-contacts-icon.kwc-copy-button.kwc-copy-icon.kwc-exclamation-circle-icon.kwc-modal.kwc-question-circle-icon.kwc-sync-icon.kwc-tab.kwc-tabs.kwc-tooltip-container.kwc-user-icon.usp-autocomplete.usp-base-population-select.usp-is-user-in-segment.usp-kql-editor.usp-kql-help.usp-population-counter.usp-population-drilldown.usp-population-insights.usp-population-sampling.usp-text-input-d462045e.js';

Expected Behavior

The import references a valid file path

Steps to Reproduce

I'm not sure how to reproduce this outside my repo, maybe you can help me with what could be causing it

Code Reproduction URL

Additional Information

No response

[janarvaez]

Could it be that the file name generated is too long?

[rwaskiewicz]

@janarvaez

I don't think the generated filename being too long would do it.

We do need a reproduction case to look into this further. Can you do me a favor and use the create-stencil CLI to generate the minimal amount of libraries & code necessary to reproduce the problem as you see in your repository?

Thanks!

[ionitron-bot[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.

[janarvaez]

@janarvaez

I don't think the generated filename being too long would do it.

We do need a reproduction case to look into this further. Can you do me a favor and use the create-stencil CLI to generate the minimal amount of libraries & code necessary to reproduce the problem as you see in your repository?

Thanks!

Hey @rwaskiewicz ! thanks for the quick reply. So apparently, it was that. I got the hint when I tried to open the file with VS Code, and it errored with "filename too long". So what I did is use the bundles config in stencil.config.ts and split a few of the components in chunks of 5, and now the problem is gone.

For some reason Stencil was trying to bundle 23 files together, and concatenating all of their names + appending the hash. This created a 432 character long filename (the one in the description above) while OSX limit is apparently 255.

Maybe this could be looked at in the compiler?

[rwaskiewicz]

So what I did is use the bundles config in stencil.config.ts and split a few of the components in chunks of 5, and now the problem is gone.

Hmm interesting!

A reproduction case would really help us in that event, as the compiler is a pretty large piece of software. Having something that guarantees us the ability to reproduce the issue is the best way to move forward and look into this further

[janarvaez]

right, I will try to get this asap. It might be a bit hard since I need to remove a lot of company owned code, and might not be able to reproduce after that (guessing the bundling will dynamically analyse the content and smart-split the chunks). please bear with me 😅

[rwaskiewicz]

Thank you so much!

[rwaskiewicz]

@janarvaez any luck getting a reproduction case together?

[janarvaez]

Hey @rwaskiewicz ! really sorry, been swamped finalising a few things in the library. I'll try to get it sorted this week, early next week tops.

[janarvaez]

Hi @rwaskiewicz So I have good/bad news 😅 I managed a partial reproduction, in which it bundles 23 files together, but because of the removal of all the actual code, it doesn't try to generate the separate hashed file with the long name which is the one failing to be generated.

I also had a few other findings, which I added to the readme

Please let me know what you think

[rwaskiewicz]

@janarvaez

Thanks! Making sure that I understand correctly from the repo README:

I think this can be solved just by configuring it the right way (an official guide on how to bundle a Stencil library inside another would be awesome) but this doesn't take away the fact that it could happen in any other setup.

Is the issue here a lack of guide on working with multiple Stencil libraries at once?

[janarvaez]

@rwaskiewicz Well, the issue is there, maybe properly configuring it allows the bundler to do the correct bundle split and is less likely to happen. But it could just be the case that this still happens in other scenarios. I think that for this specific issue, what could be done is when bundling files together, check that the file name won't exceed the max allowed by linux/macos/windows. This is independent from any setup issues or misconfiguration I might have in the repo which reproduce the anomaly.

[guilhermegia]

I'm facing this problem in my project.

We are not using lazy loading for all components.

We are using bundles in stencil.config to put all components in a single file.

That's get me a file name in bundle with more than 2000 length. This file concatenates all my components names (127 in total).

[rwaskiewicz]

@eusougz 👋

If you'd be willing/able to create a minimal reproduction case, that'd be super helpful for us!

[pathi-yugandhar]

@rwaskiewicz I see this issue in stencil 4.x as well. In my case it happened in below use case .( I did not use bundles in stencil.config).

• I have a stencil component say wizard-plugin, this was consuming several primitive stencil components like stencil-button, stencil-text etc (each of this is an independent stencil component library)

• wizard-plugin also had few components like stencil-steps, stencil-wizard-footer & stencil-wizard-header (these components are not external libraries..but were components within wizard-plugin)

• When I run the build ..I got a filename something like this ... (both under dist/cjs and dist/esm) - stencil formed a file name appending all the components in wizard-plugin. stencil-steps.stencil-wizard-footer.stencil-wizard-header.stencil-wizard-6533ec53.js

Note: I think I started observing this issue when I enabled below flags in primitive components like stencil-button and stencil-text (but not exactly sure:)

  extras: {
    tagNameTransform: true,
    enableImportInjection: true,
  },

Update: Check below I have posted an use case where I see this issue. Looks like the culprit is <slot/>

[rwaskiewicz]

@pathi-yugandhar 👋

Would you be able to put together a minimal reproduction case for us? That'd be super helpful!

[pathi-yugandhar]

@rwaskiewicz here you go https://github.com/pathi-yugandhar/stencil-filename-issue .. Looks like the main culprit is slot

[pathi-yugandhar]

I'm facing this problem in my project.

We are not using lazy loading for all components.

We are using bundles in stencil.config to put all components in a single file.

That's get me a file name in bundle with more than 2000 length. This file concatenates all my components names (127 in total).

@eusougz does any of your components use <slot/> ? Looks like this issue is happening only when we use our components to fill slot of another component.

[guilhermegia]

I'm facing this problem in my project. We are not using lazy loading for all components. We are using bundles in stencil.config to put all components in a single file. That's get me a file name in bundle with more than 2000 length. This file concatenates all my components names (127 in total).

@eusougz does any of your components use <slot/> ? Looks like this issue is happening only when we use our components to fill slot of another component.

Yes

[pathi-yugandhar]

@rwaskiewicz is there any workaround for this problem? My team needs a fix a soon for upcoming release. Any help is really appreciated.

[rwaskiewicz]

Not that I'm aware of - the team hasn't had bandwidth to circle back to this issue yet unfortunately

[rwaskiewicz]

@pathi-yugandhar

I'm having some trouble understanding your minimal reproduction case. While I can follow the instructions in README, I'm not entirely sure what the actual failure is here. Can you update the README to help me understand how the bug manifests?

[pathi-yugandhar]

@rwaskiewicz actual issue is filenames are appended. I have updated README ( https://github.com/pathi-yugandhar/stencil-filename-issue/tree/main ). Once the filenames start appending they keep growing as even we keep adding new components!!