search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.61k stars 792 forks source link

bug: dist-custom-elements generated types missing some types when run in GitHub Actions #5907

Closed James-Wilkinson-git closed 3 months ago

James-Wilkinson-git commented 4 months ago

Prerequisites

Stencil Version

4.19.2

Current Behavior

We are missing two type files from the dist/types folder when running on GitHub Actions, these files are generated locally on our Windows machine, GitHub is running Ubuntu. 

Run npx stencil build --debug --no-cache
[34:10.1]  @stencil/core
[34:10.3]  v4.19.2 🏉
[34:10.3]  node 20.15.1  MEM: 122.3MB
[34:10.3]  linux, AMD EPYC [7]()763 64-Core Processor  MEM: 122.3MB
[34:10.3]  cpus: 2, freemem: 7210MB, totalmem: [8]()315MB  MEM: 122.3MB
[34:10.3]  compiler:
           /home/runner/work//lib/common/components/stencil-components/node_modules/@stencil/core/compiler/stencil.js
            MEM: 122.3MB
[34:10.3]  build: 171[9]()938890  MEM: 122.3MB
[34:10.6]  cache optimizations disabled
[34:[10]().6]  create workers, maxWorkers: 1  MEM: 143.8MB
[34:10.6]  Starting compilation in watch mode...  MEM: 143.8MB
[34:12.6]  build, stencil-components, prod mode, started ...
[34:12.6]  start build, 2024-07-25T13:34:12  MEM: 283.2MB
[34:12.6]  cleaning 6 dirs ...  MEM: 283.2MB
[34:12.6]  cleaning dirs finished in 3 ms  MEM: 283.2MB
[34:12.6]  transpile started ...
[34:17.0]  Transpiled modules: 
[34:17.0]  generated app types started ...  MEM: 373.7MB
[34:17.1]  generateAppTypes: src/components.d.ts has changed  MEM:
           373.8MB
[34:17.1]  generated app types finished: src/components.d.ts in 24 ms
            MEM: 373.8MB
[34:17.1]  transpile finished in 4.42 s
[34:17.1]  generate outputs started ...  MEM: 373.8MB
[34:17.1]  getComponentAssetsCopyTasks: 0  MEM: 374.0MB
[34:17.1]  getComponentAssetsCopyTasks: 0  MEM: 374.0MB
[34:17.1]  getComponentAssetsCopyTasks: 0  MEM: 374.0MB
[34:17.1]  copy started ...
[34:17.1]  generate collections + source maps started ...  MEM:
           374.2MB
[34:17.8]  generate custom elements + source maps started ...
[34:17.8]  generate lazy + source maps started ...
[34:17.8]  generateEntryModules, 7 entryModules  MEM: 392.2MB
[34:17.8]  generate collections + source maps finished in 707 ms 
           MEM: 392.2MB
[34:18.7]  copy finished (2 files) in 1.66 s
[34:21.6]  generate custom elements + source maps finished in 3.81 s
[34:22.6]  generate lazy + source maps finished in 4.81 s
[34:22.6]  generate www started ...  MEM: 531.3MB
[34:22.6]  generateIndexHtml, write: www/index.html  MEM: 531.4MB
[34:22.6]  generate www finished in 22 ms  MEM: 531.4MB
[34:22.6]  generate types started ...  MEM: 531.7MB
[34:22.6]  generated app types started ...  MEM: 531.7MB
[34:22.6]  generated app types started ...  MEM: 531.7MB
[34:22.6]  generated app types finished: dist/types/components.d.ts in 7
           ms  MEM: 531.7MB
[34:22.6]  generated app types finished: dist/types/components.d.ts in 4
           ms  MEM: 531.7MB
[34:22.6]  generate types finished in 10 ms  MEM: 531.7MB
[34:22.6]  generate outputs finished in 5.57 s  MEM: 531.7MB
[34:22.6]  writeBuildFiles started ...  MEM: 531.7MB
[34:22.7]  in-memory-fs: data length: 1466  MEM: 537.6MB
[34:22.7]  cache: data length: 1  MEM: 537.6MB
[34:22.7]  writeBuildFiles finished, files wrote: 273 in 59 ms 
           MEM: 537.6MB
[34:22.7]  finished build, 10100ms  MEM: 538.8MB
[34:22.7]  build finished in 10.[11](https://github.com/EnableInternational/edamame-design-system/actions/runs/10095135893/job/27914546389#step:8:12) s

Stencil Config

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config = {
    namespace: 'stencil-components',
    globalStyle: 'src/global/app.scss',
    enableCache: false,
    outputTargets: [
        {
          type: 'dist',
          esmLoaderPath: '../loader',
        },
        {
            type: 'dist-custom-elements',
            dir: 'dist/custom-elements',
            empty: true,
            generateTypeDeclarations: true
        }
    ],
    plugins: [
        sass()
    ],
};

When I ls the dist/types directory it is missing two component directories, these are not missing on local.

I've also tried running the CI on Windows instead of Ubuntu to match my local same issue. And checked both machines have 16GB or ram and this says it uses 500MB of memory :/

Any ideas?

Expected Behavior

Should generate all type files in CI

System Info

No response

Steps to Reproduce

Compile custom components in github CI

Code Reproduction URL

na

Additional Information

No response

christian-bromann commented 4 months ago

Hey @James-Wilkinson-git , thanks for reporting.

Unfortunately I can't really say why this happens. I wonder if it is possible to create a reproducible example, maybe via Docker to reproduce this problem, otherwise it seems difficult to investigate this issue. Wdyt?

ionitron-bot[bot] commented 4 months ago

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.

James-Wilkinson-git commented 4 months ago

Hey @James-Wilkinson-git , thanks for reporting.

Unfortunately I can't really say why this happens. I wonder if it is possible to create a reproducible example, maybe via Docker to reproduce this problem, otherwise it seems difficult to investigate this issue. Wdyt?

I know but I’m not good at docker. Can’t think of any other reasons it’s missing two files only when built in the cloud and not locally.

James-Wilkinson-git commented 4 months ago

I’m wondering if related to this and it’s generating before it’s ready?

https://github.com/ionic-team/stencil/issues/5592

christian-bromann commented 4 months ago

@James-Wilkinson-git mind checking using our nightly build 4.19.2-dev.1721883721.7ae36aa?

James-Wilkinson-git commented 4 months ago

No luck :(

James-Wilkinson-git commented 4 months ago

I just added a new component and it made it's type file and moved it over. So any ideas what could cause 2 components to not generate in a CI?

James-Wilkinson-git commented 4 months ago 
export declare class EdsMultiSelect {
    searchComponentRef: HTMLEdsSearchElement;
    popoverRef: HTMLEdsPopoverElement;

I think the issue may be something failing silently, in VSCode the HTMLEDSSearchElement is erroring these two components that are missing types are compound components 

@Component({
  tag: 'eds-multi-select',
  styleUrl: '../../../../../styles/eds-multi-select.scss',
  shadow: false,
})
export class EdsMultiSelect {
  searchComponentRef: HTMLEdsSearchElement;
  popoverRef: HTMLEdsPopoverElement;

In this file we aren't importing these definitions and VSCode is not erroring them. However appears to be reading it from component.d.ts

James-Wilkinson-git commented 4 months ago

Ok confirmed the problem is in the generating of types if ther compiler runs into another type that it can't resolve it is failing silently and not generating that type.

To Reproduce make a component define something to a type that doesnt exist compile and see that it won't generate a types file for that component.

Should error or warn in the console.

Not sure how to define the type here though either so that I don't have to use any.

export class EdsMultiSelect {
  searchComponentRef: any;
  popoverRef: any;
James-Wilkinson-git commented 4 months ago

This bug has been previous reported but was closed with no action https://github.com/ionic-team/stencil/issues/2769

christian-bromann commented 4 months ago

Thanks for investigating this issue @James-Wilkinson-git ! Do you think it is possible to provide a minimal reproducible example of this case?

James-Wilkinson-git commented 4 months ago

There is one in the linked bug.

christian-bromann commented 4 months ago

The linked bug has been resolved, if what you experience differs from that we need a new reproduction case that show cases that.

James-Wilkinson-git commented 4 months ago

That bug isn’t resolved it’s literally the same behaviour. The bug is closed not resolved.

ionitron-bot[bot] commented 3 months ago

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!