bug: Use Component with Mixin in other Stencil Project

[stefanhuber]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.38.0

Current Behavior

I have built a UI library with StencilJS and used the Mixin feature in one of the UI components. When testing the UI library in isolation the UI components with Mixins work fine. However, after publishing the UI components to a npm package and importing them in another StencilJS project an error related to the buildExtendsTree function appears.

npm run build

> build
> stencil build

[16:19.3]  @stencil/core
[16:19.5]  v4.38.0 🎿
[16:20.5]  build, app, prod mode, started ...
[16:20.5]  transpile started ...

[ ERROR ]  TypeError: Cannot read properties of undefined (reading 'statements') at
           /Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:262636:105
           at Array.forEach (<anonymous>) at
           /Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:262624:88
           at Array.forEach (<anonymous>) at
           /Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:262621:24
           at Array.forEach (<anonymous>) at buildExtendsTree
           (/Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:262573:20)
           at mergeExtendedClassMeta
           (/Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:262668:16)
           at parseStaticComponentMeta
           (/Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:262760:7)
           at visitNode
           (/Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js:263156:7)

[16:21.2]  build failed in 750 ms

Expected Behavior

Using StencilJS Components with Mixins in other StenilJS projects.

System Info

System: node 22.17.1
    Platform: darwin (24.6.0)
   CPU Model: Apple M1 (8 cpus)
    Compiler: /Users/stefanhuber/Projects/smartcompanion/audioguide-app/node_modules/@stencil/core/compiler/stencil.js
       Build: 1759440611
     Stencil: 4.38.0 🎿
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

I have published the UI components library in version 0.5.0, e.g., one UI component (https://github.com/smartcompanion-app/smartcompanion-library/blob/v0.5.0/packages/ui/src/pages/page-stations/page-stations.tsx) uses a Mixin. Within a project, which is consuming the UI components the build fails in the corresponding branch (https://github.com/smartcompanion-app/audioguide-app/tree/update-ui-library). A npm run build would show the error.

Code Reproduction URL

https://github.com/smartcompanion-app/audioguide-app/tree/update-ui-library

Additional Information

No response

[johnjenkins]

hey @stefanhuber - thanks for raising and for the repro; I took it for a spin (nice project btw :) ).

The issue comes because

1. Stencil builds a tree of dependent modules using static analysis via the typescript compiler
2. This tree-building becomes much less dynamic within 3rd party / nodes_modules

So now, when discovering a 3rd party mixin / extendee module (that isn't currently in the Stencil program) I'm parsing the module on-the-fly and everything works as expected.

A limitation is (which I will add to the docs) that you won't be able to add mixin / extendee class via barrel files (as you are doing) esp if you want other libs to consume them

i.e.

// index.ts
export * from './base-components-1';
export * from './base-components-2';

import { mixinBase } from './index'; // ❌ won't work when imported as a node_module 
import { mixinBase } from './base-components-1'; // ✅  will work - much easier for us to resolve where the class lives

[johnjenkins]

[stefanhuber]

hey @johnjenkins thx for the quick response and your comments! Unfortunately, I get the same error, although I followed your suggestions as follows:

Library Project

In the stencil library project the mixin is in file src/utils/audio-player-base-component.ts:

export const audioPlayerBaseComponentFactory: MixinFactory = (Base) => {
  class AudioPlayerBaseComponent extends Base { ... }
}

Then there is a component, which extends from the audioPlayerBaseComponentFactory, the mixin factory is imported directly:

import { audioPlayerBaseComponentFactory } from '../../utils/audio-player-base-component';

@Component({
  tag: 'sc-page-stations',
  styleUrl: 'page-stations.scss',
})
export class PageStations extends Mixin(audioPlayerBaseComponentFactory) { ... }

App project

In the stencil app project the library is a dependency and imported in the main index.ts file as described in the documentation (https://stenciljs.com/docs/distribution#importing-the-dist-library-into-another-stencil-app):

import '@smartcompanion/ui';

In the library project the app is added as a npm workspace (https://github.com/smartcompanion-app/smartcompanion-library/tree/repro-mixin). With a github action the build is done with the same error (https://github.com/smartcompanion-app/smartcompanion-library/actions/runs/18292397079/job/52082535734

> build
> stencil build

[39:07.9]  @stencil/core
[39:08.3]  v4.38.0 🎿
[39:10.5]  build, app, prod mode, started ...
[39:10.5]  transpile started ...

[ ERROR ]  TypeError: Cannot read properties of undefined (reading
           'statements') at
           /home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:262636:105
           at Array.forEach (<anonymous>) at
           /home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:262624:88
           at Array.forEach (<anonymous>) at
           /home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:262621:24
           at Array.forEach (<anonymous>) at buildExtendsTree
           (/home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:262573:20)
           at mergeExtendedClassMeta
           (/home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:262668:16)
           at parseStaticComponentMeta
           (/home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:262760:7)
           at visitNode
           (/home/runner/work/smartcompanion-library/smartcompanion-library/node_modules/@stencil/core/compiler/stencil.js:263156:7)

[39:12.1]  build failed in 1.59 s

npm error Lifecycle script `build` failed with error:
npm error code 1
npm error path /home/runner/work/smartcompanion-library/smartcompanion-library/apps/audioguide-app
npm error workspace smartcompanion-audioguide-app
npm error location /home/runner/work/smartcompanion-library/smartcompanion-library/apps/audioguide-app
npm error command failed
npm error command sh -c stencil build
Error: Process completed with exit code 1.

To be sure that the project builds correctly, I duplicated the code parts into the components and completely removed the mixins in this branch: https://github.com/smartcompanion-app/smartcompanion-library/tree/fix-remove-mixin

[johnjenkins]

Hi @stefanhuber - the fix hasn’t been released yet. I can make nightly build if you need it

[stefanhuber]

Thx for your quick response, sry I misunderstood... I'll wait then for the next release!

[stefanhuber]

Hi @johnjenkins, unfortunately I need to bother you again with this issue.

The update to stenciljs/core v4.38.1 didn't solve the issue unfortunately. As described above the factory is used as a direct import now, still the build fails, it can be seen in the github action: https://github.com/smartcompanion-app/smartcompanion-library/actions/runs/18411438343/job/52464535320

Maybe I misunderstood and want to clarify:

• The component library uses the MixinFactory 3 times in 3 components, e.g., PageStations extends Mixin(audioPlayerBaseComponentFactory).
• The app (which consumes the library) uses the 3 components, not the MixinFactory

Thx for your support!

[johnjenkins]

hey @stefanhuber - I had to make a couple of tweaks to your config to get it working (I will add those to the docs)

• "allowJs": true, - means the typescript compiler can read-in the js file from node_modules (we need to do this to get your mixin class meta)
• "target": "es2022", - this is pre-requisite for building Stencil components with Mixin (or extends)

skipLibCheck is not related to this issue - just a separate issue I was getting with ionic types.

[exorex]

@johnjenkins

This issue isn’t limited to Mixins — using extend in any Stencil component causes the same error. This makes it quite difficult for developers to use the new extend feature (which Stencil now officially supports), since it effectively forces them to avoid barrel file imports.

After upgrading from v4.36.3 to v4.38.0, our components completely broke — but only when used inside another Stencil project. Components still render, but events don’t fire, prop updates don’t work, and even our icon component (which works similarly to ion-icon) can’t load its assets anymore.

As a temporary workaround, we removed all extends usage and enabled "allowJs" in tsconfig to complete our tests. However, we ultimately had to revert back to v4.36.3 to restore normal behavior.

I understand that you’ll likely need a reproduction repo to investigate this properly — I’ll try to create one soon. It’s a bit tricky because the issue doesn’t occur when using local packages; it only happens when the components are installed from node_modules.

[exorex]

UPDATE:

Even after trying to convert all files that use extend to import directly (without barrel files), we encountered another issue during the build of the main project.

For example, this import:

import { TYPEAHEAD_RECORD, TypeaheadController } from '@utils/controllers/typeahead';

was transformed in the output (dist/collection/components) to:

import { TYPEAHEAD_RECORD, TypeaheadController } from "../../utils/controllers/typeahe";

As you can see, the compiler generated an incorrect path — it truncated the filename by removing the final “ad” letters.

Interestingly, this issue does not happen when we use a barrel file import instead, for example:

import { TYPEAHEAD_RECORD, TypeaheadController, KeyboardController } from '@utils/controllers';

[johnjenkins]

Thanks for commenting @exorex (yes -I did mention the same issue would be present in extends too).

The broken runtime behaviour you mention in 4.38 is expected. Less so in 4.38.1 though.

The borked import paths is something completely different I feel. That would need a new issue raised