Exported const or enum not available in library

[gtranter]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Exported const or enum definitions in a library cannot be imported by projects that use the library. An error occurs when trying to build the consuming project:

[ ERROR ]  Rollup: Missing Export: ./src/components/my-consumer/my-consumer.tsx:13:9
           'MyConst' is not exported by
           ../base-library/dist/index.js, imported by
           ./src/components/my-consumer/my-consumer.tsx

base-library/dist/index.js

export * from './esm-es5/index.js';

base-library/dist/esm-es5/index.js is empty

Expected behavior:

Should be able to export const and enum definitions and import/use them in projects that use the library.

Steps to reproduce:

1. Create a component library with a component.
2. Add a TS file containing a export const or export enum statement to the folder containing an component's TSX file.
3. Build and publish the library (or use npm link).
4. From another Stencil project, add the library as a dependency (or use npm link), and import the const or enum into a class (e.g. another component).
5. Build the consuming Stencil project.

Related code:

base-library my-component.tsx

import { Component, h } from '@stencil/core';
import { MyConst } from './my-const.ts'; // used by the component - works fine

@Component({
    tag: 'my-component',
    shadow: true
})
export class MyComponent {
...
}

my-const.ts

export const MyConst = {
    up: 'up',
    down: 'down'
};

consuming library my-consumer.tsx component that has the build error

import { Component, h } from '@stencil/core';
import { MyConst } from 'base-library/dist';

@Component({
    tag: 'my-consumer',
    shadow: true
})
export class MyConsumer {
...
}

Other information:

Note:

1. This is not a problem if exporting an interface definition in the same manner.
2. If the full path to the exported item is used e.g. 'base-library/dist/collection/components/my-component/my-const' the build will succeed but it causes the entire dependent library to be bundled into the consuming library which we can't have.

Using NodeJS 14.16.0

package config details (same for both projects):

  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
  "es2015": "dist/esm/index.js",
  "es2017": "dist/esm/index.js",
  "types": "dist/types/components.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "files": [
    "dist/",
    "loader/",
  ],

[tselvan2311]

In my case, This same issue happens for interface.

This is my interface export interface Contact { firstName: string; lastName: string; ... }

I am getting this below error. Error: projects/angular-library/src/lib/stencil-generated/components.ts:10:15 - error TS2459: Module '"my-stencil-lib"' declares 'Contact' locally, but it is not exported.

[klh]

Previously stencil did not add Event types to proxies, it does now - but since they are not exported in the root project (only in the local component) accessing them through from '[mylibrary]/components'; in the proxies.ts file fails.

4 options: 1: remove the export of events in proxies.ts 2: add the events as export in top level 3: import directly from the component instead '[mylibrary]/components'; -> '[mylibrary]/components/my-component/my-component(d.ts)'; 4: change the proxies generator code to import from : '[myLibrary]/components/lib/types/components'

[christian-bromann]

Hi @gtranter 👋

We apologize for the delay in addressing this issue. The StencilJS team has been hard at work, and we appreciate your patience.

As StencilJS has undergone significant updates and improvements since this issue was originally posted, we believe that this specific concern may no longer be relevant with the latest version. We've updated our docs on publishing Stencil components and hope this provides better guidance on how to set exports in your package.json. If you still encounter issues or have questions, don't hesitate to ask.

Thank you for your understanding and support of StencilJS!

[klh]

seriously?, did you even verify this?

[christian-bromann]

seriously?, did you even verify this?

Without a reproducible example this is hard to verify and given we have done improvements around our docs on publishing Stencil components we believe there is more clarity on properly exporting the modules of your design system project. That said, if you have a reproducible example, I am happy to look into this to better understand how this connects to a bug in Stencil.

Thank you!