Why is my stencil components library failing to generate a symbol that seems to be required when running a build with angular-devkit/build-angular

Question

At Big Give we have a library of web components built using stencil and build-angular.

Last week we were trying to upgrade from stencil v2 to stencil v3, but we started getting errors as shown below when trying to generate a build to publish for use in angular:

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> [email protected] build
> ng build

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@biggive/components-angular'
------------------------------------------------------------------------------
- Compiling with Angular sources in Ivy partial compilation mode.
✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/components/src/lib/stencil-generated/components.ts:7:15 - error TS2305: Module '"@biggive/components/dist/components"' has no exported member 'Components'.

7 import type { Components } from '@biggive/components/dist/components';
                ~~~~~~~~~~


Exited with code exit status 1

I have since found that this error can happen on the v2 version of stencil as well as the v3, so I don't know why we're only now starting to see it.

Our code is public, errors can be seen in CircleCI:

on upgrading to Stencil V3 for the first time: https://app.circleci.com/pipelines/github/thebiggive/components/1204/workflows/0600a5ee-2a6d-456f-8f8f-4edf319c928a/jobs/1828
Reproducing today on a temporary branch: https://app.circleci.com/pipelines/github/thebiggive/components/1228/workflows/13948c16-acf8-4d9f-946b-03a434f60fa9/jobs/1830
On another branch with Stencil V2: https://app.circleci.com/pipelines/github/thebiggive/components/1229/workflows/9492a515-4cc3-4c83-9a8e-e5c5c4bf64de/jobs/1833

I'm receiving the same issue as I'm setting up a PoC for Stencil, building to Angular/React/Vue. The generated code from Stencil is including this 'Components' import, and I cannot figure out why or how its wrong. Any updates? — AndrewF
– AndrewF, Commented Sep 1, 2023 at 14:04

NoelLH · Accepted Answer · 2024-01-02 14:56:28Z

I seem to have got the Big Give library to build. I'm not 100% sure yet if both changes were necessary, but I tweaked two config things related to import resolution:

fixing our paths entry in angular/tsconfig.json: the left side now matches our npm package name: "@biggive/components": ["./dist/components"]
Changing componentCorePackage to '@biggive/components/dist/components' – inspired by the suggestion here. This is not what the current docs recommend, so I'm unclear if there are two distinct ways that work.

I also had to make the Angular output target register components the documented way before our consuming Angular app worked again (or hack the consumer to do the equivalent). I'm not sure whether it's the config changes above or the Stencil upgrade which made this necessary.

I also went directly to Stencil v4 as this seemed to have no additional, relevant-to-us breaking changes.

Collectives™ on Stack Overflow

Why is my stencil components library failing to generate a symbol that seems to be required when running a build with angular-devkit/build-angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related