bug: Stencil is generating invalid ESM COde

[jogibear9988]

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

4.10.0

Current Behavior

Im having a tsx file with the following import:

  import { Component, Prop, h, State } from '@stencil/core';

and stencil when building a custom-element is creating this import:

  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

but this is invalid.

Expected Behavior

I try to use stencil s a ESM module with an importmap, so the importmap is created from the packages.json export directive, stencil has none, so the import should look like this:

  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';

or stay in this version:

  import { proxyCustomElement, HTMLElement, h } from '@stencil/core';

or the package.json should contain an export directive like this:

"exports": {
    ".": "./index.js",
    "./internal/client": {
      "default": "./internal/client/index.js"
    }
  }

System Info

No response

Steps to Reproduce

Build a library with stencil

Code Reproduction URL

--

Additional Information

No response

[alicewriteswrongs]

Hey @jogibear9988, I think I understand the problem here, but would you mind putting together a reproduction case, just so we can exactly replicate the issue? You could use the starter template and then modify it to showcase the issue. You can generate a starter project like so:

npm init stencil@latest component

this helps us a lot when trying to replicate and fix bugs!

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

[jogibear9988]

I look to do it, but maybe I can explain a little bit more:

I have a Designer (https://node-projects.github.io/web-component-designer-demo/index.html) wich uses ESM Modules and can import NPM Packages directly without using a bundler. To support this, I automaticly create importmas on the fly, but I only can generate them directly if the export statements are there. These are not set in stencil, but stecil itself generates code so they are need.

[jogibear9988]

Here is my sample:

https://github.com/jogibear9988/stencilSample

see in the HTML File:

If I use this importmap: https://github.com/jogibear9988/stencilSample/blob/368df6276a73cdb3df08efb2a9294c6007d6295a/src/index.html#L9

I can use the webcomponents ESM code directly in the browser, but I'm not able to create the importmap automaticaly cause your package.json misses the "exports". I only could create it by looking into the folders and see wich files are there (but this is not possible for a automatic tool).