Open Issues Need Help
View All on GitHubAI Summary: Users are reporting a "l[f] is not a function" error when using IonModal in Ionic 7 React apps with Stencil versions newer than 4.39.0. This issue appears to be a regression introduced by a Stencil core update, breaking functionality on specific pages within the capacitor-testapp repository.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Stencil's hydrate runtime crashes during shadow component hydration when used with server-side DOM implementations like Domino (e.g., in Angular SSR). The issue stems from these external DOMs lacking a native `attachShadow` method, which Stencil's core hydration logic expects. This prevents successful server-side hydration of Stencil components in such environments.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This issue proposes upgrading the project's Node.js version from v22 to v24. The primary motivation is to leverage the extended LTS support for Node.js v24, which extends active support until October 2026.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This feature request proposes the creation of a StencilJS MCP (Model Communication Protocol) server. This server would enable AI agents in code editors to better understand StencilJS projects, leading to more accurate and context-aware code suggestions for developers.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This issue describes a bug where Prettier, when formatting CSS with long properties, introduces newline characters that break the CSS rendering. The expected behavior is for these properties to remain on a single line, ensuring correct CSS interpretation.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This issue describes a bug in Stencil.js where newer versions of jsdom (27.1.0+) cause a TypeError when importing @ionic/angular components. The error appears to stem from how Stencil handles AdoptedStyleSheets in the jsdom environment, preventing tests from running successfully.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: A reference error occurs when running tests with Stencil version 4.39.0 that involve mixins with properties. The provided code demonstrates a mixin that uses an `@Event` decorator, and this setup leads to the error during testing. The expected behavior is for the tests to run without any reference errors.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: A bug in Stencil version 4.39.0 causes end-to-end (e2e) and spec tests to fail when run together, although they pass individually. This issue appears to be related to Rollup plugin behavior with mixins and specs, and a reproduction repository is provided.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Stencil version 4.39.0 incorrectly handles CSS escape sequences for control characters in component stylesheets. Instead of re-escaping them, it embeds them as literal characters within template literals, causing browsers to discard the entire <style> block. This regression breaks icon font declarations and other CSS rules that rely on these escapes.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: A Rollup parse error occurs during Stencil builds when CSS files contain documentation comments for CSS custom properties using the `/*! @prop` syntax. This error suggests the CSS file is being incorrectly parsed as JavaScript, preventing the generation of expected documentation in component READMEs.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This issue describes a bug where StencilJS components using constructed stylesheets fail when rendered into different documents, such as within an iframe. The browser's security model prevents sharing `CSSStyleSheet` objects across distinct document contexts, leading to a `DOMException`. The expected behavior is for rendering to succeed without this error.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Users are experiencing failing end-to-end tests when upgrading Stencil from version 4.35.0 to 4.35.3 (or 4.36.0) if their Puppeteer version is below 23. The issue has been verified on macOS ARM and Linux. The expected behavior is for tests to work with allowed Puppeteer versions, or for Stencil to provide a warning or documented breaking change regarding the new Puppeteer version requirement.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: The user is reporting a bug where `globalStyle` defined in `stencil.config.ts` is not being loaded when running Stencil in `--dev` mode. This prevents proper debugging of global styles, while the styles do load correctly in `--prod` mode. The issue is reproducible with a simple configuration and component setup.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This issue reports a bug in Stencil's `dist-custom-elements` build process where not all types are exported in the `index.d.ts` file when the `customElementsExportBehavior` option is not set to `'single-export-module'`. The expected behavior is that all types defined in `src/index.ts` should be present in the generated `index.d.ts` regardless of this specific configuration.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: This issue reports a bug in Stencil's CSS `@import` replacement mechanism, which is incompatible with the CSS `layer()` function. When attempting to import styles into a cascade layer, Stencil throws a build error, preventing the use of this modern CSS feature. The expected behavior is for Stencil to correctly process `@import` statements within `layer()` functions, enabling proper CSS layering in the build output.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: The Stencil mockdoc, used for internal testing and SSR, is missing an implementation for the `part` DOM API. This prevents developers from using methods like `add` on `element.part`, leading to errors. The issue suggests that implementing `part` should be straightforward as it's similar to the already implemented `classList` API.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: When using the `Mixin()` factory in Stencil.js, TypeScript type checking is disabled for the extended component. This means that calls to non-existent methods or properties within the `render()` function are not flagged as errors, leading to potential runtime issues.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Stencil compiler is incorrectly truncating import paths in the compiled output, specifically removing characters from filenames. This bug leads to invalid import paths, breaking component functionality. The issue appears to be related to direct imports and does not occur with barrel file imports.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Debug a StencilJS component incompatibility issue. A Stencil component with default values in its @Prop or @State decorators is failing to render correctly in a different Stencil application when using the dist/bundler or dist-custom-elements output targets. The task involves investigating the version mismatch between the component and the application, and potentially adjusting the component's build configuration (e.g., `externalRuntime: true`) to resolve the incompatibility.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Debug and fix a bug in StencilJS version 4.35.1 where boolean attributes in form-associated components are parsed incorrectly, causing boolean properties like `disabled` to not function as expected when set to `false`. The issue involves investigating the change in behavior between StencilJS 4.23.0 and 4.35.1, analyzing the provided code example, and implementing a fix to restore the previous functionality.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Debug and fix a bug in StencilJS where slow client-side hydration of a component with a complex property after server-side rendering (SSR) leads to duplicated nodes. The issue involves investigating the interaction between SSR, client-side hydration, and complex properties in Stencil components, and requires reproducing the bug using a provided code repository.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Debug and fix a bug in the StencilJS framework where the setter for a @Prop decorated property isn't correctly invoked after hydration when the property's getter has a specific return type other than 'any'. The solution needs to ensure the setter functions correctly without requiring 'any' type annotations.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Investigate and debug a `RangeError: Maximum call stack size exceeded` error occurring in StencilJS unit tests after upgrading from version 4.31.0 to 4.35.1. The error seems to be related to the `waitForChanges()` function in the tests and a potential infinite loop within the `unfocusInput` method of a `StnDropdown` component. The task involves analyzing the component's code, the test setup, and the relevant changes introduced in StencilJS version 4.35.1 (potentially PR #6301) to identify the root cause and provide a solution.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: The task involves enhancing the StencilJS compiler to integrate a CSS minification and comment removal process. This aims to reduce bundle sizes for Stencil components, improving performance. The preferred solution is to leverage a CSS minifier like lightningcss, esbuild, or swc, potentially extending the existing build process within StencilJS.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.
AI Summary: Implement a `componentDidCatch` lifecycle method in the StencilJS framework, similar to React's error handling mechanism. This would allow developers to create error boundaries within their Stencil components to gracefully handle errors originating from child components, particularly those from external third-party libraries. The implementation should ensure consistent and stable error handling across different scenarios.
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, (+ more) and traditional web applications from a single, framework-agnostic codebase.