stencil icon indicating copy to clipboard operation
stencil copied to clipboard

bug: re-open of issue #2769 / components.d.ts missing types

Open stanley85 opened this issue 3 years ago • 6 comments

Stencil version:

 @stencil/[email protected]

Current behavior: The behaviour is best documented in the closed ticket (by bot due to inactivity) the Issue remains un-solved - please have a look at https://github.com/ionic-team/stencil/issues/2769

Copycat: If there is no src/components.d.ts file present, and one component (A) references another's type (B)...

On first build, the types are not generated for (A) in the output directory dist/types/components. If (A) exports any types, this can also result in broken imports in dist/types/components.d.ts. No error is reported during build.

On second build (where there is now a src/components.d.ts present as a result of the first build), the types are generated for (A) in the output directory dist/types/components.

I do not like committing auto-generated files to source control, as they result in needless churn, hence why i do not have src/components.d.ts (this was a fresh clone of my repo).

Expected behavior: All Types are present in the first compile of components.d.ts, when no components.d.ts is present in the first place.

Copycat: Ideally it should Just Work(tm), and not rely on committing auto-generated files to source control. On both the first (broken) build and the second (successful) build, the src/components.d.ts file is exactly the same, so it may be a timing/ordering issue?

An alternative would simply be to raise an error in this case.

Steps to reproduce:

  1. create new stencil project with npm init stencil
  2. rm src/components.d.ts
  3. add the components from the Related code section below
  4. npm run build
  5. open dist/types/components.d.ts and see a broken import
  6. ls dist/types/components/ and notice there are no types for my-other-component

Related code: please have a look at https://github.com/ionic-team/stencil/issues/2769

stanley85 avatar Feb 11 '22 08:02 stanley85

We face this during a gitlab-ci pipeline.

$ cd frontend $ npm run build [email protected] build stencil build --docs-readme [08:24.8] @stencil/core [08:25.0] v2.13.0 🍣 [08:27.6] transpile started ... [08:32.3] copy started ... [08:32.3] generate custom elements started ... [08:32.3] generate lazy started ... [08:38.7] generate lazy finished ... [ ERROR ] Rollup: Missing Export: ./src/index.ts:1:9 'Components' is not exported by ./src/components.d.ts, imported by ./src/index.ts L1: export { Components, JSX } from './components'; [08:38.7] build failed in 11.15 s Cleaning up project directory and file based variables

stanley85 avatar Feb 11 '22 08:02 stanley85

Thanks! I'm going to label this to get ingested for the team to take a closer look.

I've also got a PR up to make sure that issues like #2769 that are labeled for the team to be looked at to not be accidentally closed by the bot. Sorry about that all!

rwaskiewicz avatar Feb 15 '22 13:02 rwaskiewicz

Oh I have been facing this issue for ages. I never understood why, so I am always just rebuilding until I can see my types. It's become a habit to check types before publishing too. I thought the problem was with my build, glad to see I'm not alone.

theo-staizen avatar May 27 '22 19:05 theo-staizen

Although not ideal, adding a prebuild NPM script can work around this issue:

"prebuild": "if [ ! -f ./src/components.d.ts ]; then touch ./src/components.d.ts; npm run build; fi",

benelan avatar Aug 22 '22 18:08 benelan

Although not ideal, adding a prebuild NPM script can work around this issue:

"prebuild": "if [ ! -f ./src/components.d.ts ]; then touch ./src/components.d.ts; npm run build; fi",

This solution doesn't seem to work anymore with StencilJS Version 4.6 (I didn't check earlier versions)

FabioGimmillaro avatar Oct 27 '23 08:10 FabioGimmillaro

Another solution: Call npm run build twice with the first returning "true". This however does only work on linux (and maybe Mac) based OS:

"two-build-steps": "echo 'Stencil Build Pass #1' && (npm run build || true) && echo 'Stencil Build Pass #2' && npm run build"

The first step generates the components.d.ts AFTER compiling the sources. The second step uses the generated components.d.ts from the first one.

FabioGimmillaro avatar Oct 27 '23 08:10 FabioGimmillaro