3

I'm trying to use a stencil web-component in a system that requires a single js file. To be more precise, this is because the target system will take all javascript files and bundle them regardless. When i add the ES6 javascript files, this throws errors, which i think is because they are supposed to be lazy-loaded.

How can i generate a single bundle.js file, that can simply be added using the script tag?

nipoma3298
  • 43
  • 4

2 Answers2

3

You can use the Custom Elements Bundle output target.

The dist-custom-elements-bundle output target is used to generate custom elements as a single bundle.

To use this file without a bundler you also need to disable the externalRuntime config:

export const config: Config = {
  outputTargets: [
    {
      type: 'dist-custom-elements-bundle',
      externalRuntime: false,
    },
    // ...
};

Note that you will still need to register (or "define") your components (and set the asset path if applicable) after you include the script.

Thomas
  • 8,426
  • 1
  • 25
  • 49
  • Right. I tried to use the javascript in the custom-elements folder, but this would just return errors. I will give it a try after disabling externalRuntime. – nipoma3298 Aug 27 '21 at 16:46
  • 1
    Yes, without `externalRuntime: false` it will throw import errors since it's trying to import the Stencil runtime (meant for use with a bundler and with `@stencil/core` installed). This tells the compiler to include the runtime as well. – Thomas Aug 27 '21 at 18:19
  • I didn't get around to try this yet, but as i remember, it was trying to import stencil/core from the node modules, so this sounds like it will work. Thanks for help :) – nipoma3298 Aug 29 '21 at 11:37
-2

Your question will get only a handful of views here on StackOverflow, because it is specific to an OpenSource tool.

OpenSource tools (nearly) always have a GitHub repo.

You can file issues there: https://github.com/ionic-team/stencil/issues

or the Slack channel: https://stencil-worldwide.herokuapp.com/

If you are learning Web Components, consider learning the core JavaScript technology first.

If you learn a Tool (like Stencil) before learning the Technology you will forever be asking questions you could have solved yourself... IMHO

If you use core Web Components technology you will not have any bundling issues.

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • I'm not sure this answer actually helps since the question is about the capabilities (and configurability) of a tool. And I'd say SO is a better platform for those types of questions than GitHub issues. Just mentioning it because it's a new contributer.. – Thomas Aug 29 '21 at 21:40
  • The [StencilJS Repo Issue List](https://github.com/ionic-team/stencil/issues) is one of the best around. – Danny '365CSI' Engelman Aug 30 '21 at 07:02
  • Yeah, they recently hired new people which helped. But for questions I would recommend the very active [Slack channel](https://stencil-worldwide.herokuapp.com/). I added it to the [Stencil tag wiki](https://stackoverflow.com/tags/stenciljs/info) but that change has to be peer reviewed before it's live. – Thomas Aug 30 '21 at 10:21