Webpack build fails because of source maps

[oliverschuerch]

I've tryed to install and import the @swisspost/internet-header package to a vuejs 3 project, which is setup with webpack and a source-map-loader plugin installed.
If I use the suggested import in the documentation (which loads the esm-es5 module):

import { defineCustomElements } from '@swisspost/internet-header';
defineCustomElements();

I unfortunately get the following error:

With the main module (defined in the package.json) it works:

import { defineCustomElements } from '@swisspost/internet-header/loader/index.cjs.js';
defineCustomElements();

[gfellerph]

Also investigate

[imagoiq]

Here is my analysis so far, so we have a base for discussion if needed.

First of all, I've found this readme particularly useful to better understand the meaning behind the output files.

How to use a component according to the doc

Some places in the documentation report wrong paths to import (see https://stenciljs.com/docs/v3/distribution#distribution-options and ionic-team/stencil-site#933).

Other parts are talking about those ways:

From CDN:

<script type="module">      
	import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@ionic/core/loader/index.es2017.mjs';  

	defineCustomElements();    
</script>

https://stenciljs.com/docs/v3/javascript

.mjs extension is not used anymore, but at this one exception, it's working. Example with the internet-header: https://glitch.com/edit/#!/amethyst-teal-buffer

From package:

import { defineCustomElements } from 'stencil-library/loader';

Working example with the internet-header: https://codesandbox.io/s/elated-rgb-jyny9t?file=/src/App.vue

What is this loader folder, and when should it be used?

It was not clear from the start as from the following old PR and our own documentation, loader is presented as piece to make it work with bundler like Webpack: ionic-team/stencil@99add67

But if we look at https://github.com/ionic-team/stencil/blob/main/src/compiler/output-targets/readme.md, it clearly defines that it contains the lazy-loaded build.

The other variant (socalled custom-element) without lazy-loading is actually described here in our doc: https://next.design-system.post.ch/?path=/story/internet-header-getting-started--page#jsdelivr

Why stencil warns use to use dist index in main property of the package.json

So the validation can be controlled with the validatePrimaryPackageOutputTarget, more info: https://stenciljs.com/docs/output-targets#primary-package-output-target-validation
I couldn't find a lot of information about that, but I think it's link to the conclusion of my analysis in #1721.

Questions

• Do we use the "www" build actually?

From that, I can make a draft PR to update our doc, I think.