bug: cannot find module @stencil/core/internal/client

[karthikeyan-arumugam-1558]

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.19.0

Current Behavior

I consume our component library as a dist-custom-elements in my React project using Vite bundler. Until I used 4.18.3 of @stencil/core, I didn't face this error. Started seeing this from 4.19.0.

Expected Behavior

This error shouldn't be thrown

System Info

System: node 20.12.0
    Platform: darwin (23.5.0)
   CPU Model: Apple M2 (8 cpus)
    Compiler: /Users/xxx/Documents/Projects/yyy/node_modules/@stencil/core/compiler/stencil.js
       Build: 1719433468
     Stencil: 4.19.0 🏄
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Ours is a private component library, but install any Stencil-based component library that uses @stencil/[email protected], consume a component from dist-custom-elements and try to build the consuming application.

Code Reproduction URL

NA

Additional Information

FAIL  src/features/Listings/components/DownList/DownList.test.tsx
 ● Test suite failed to run

   Cannot find module '@stencil/core/internal/client' from 'node_modules/comp-lib/dist/components/ou-avatar2.js'

   Require stack:
     node_modules/comp-lib/dist/components/ou-avatar2.js
     node_modules/comp-lib/dist/components/ou-avatar.js
     node_modules/comp-lib-react/dist/src/components/stencil-generated/index.js
     node_modules/comp-lib-react/dist/src/components/index.js
     node_modules/comp-lib-react/dist/src/index.js
     src/features/Listings/components/DownList/DownList.test.tsx

[christian-bromann]

@karthikeyan-arumugam-1558 any chance you can provide a minimal reproducible example?

[karthikeyan-arumugam-1558]

@christian-bromann, since it's a build-time error, how would you expect the example to be?

[christian-bromann]

@karthikeyan-arumugam-1558 can you maybe provide a setup that reproduces the build error? It seems like you are using a Jest context, it is important for us to know if you are using Jest as a testrunner or the Stencil testrunner which uses Jest under the hood.

[christian-bromann]

@karthikeyan-arumugam-1558 I've added a commit to #5873 which adds a require export for this path. This seems very odd to me though since the file contents are meant to be consumed within a ESM context (in the browser).

[KillerCodeMonkey]

sadly this error occurs in an angular + ionic project as well, when testing with jest.

those tests where failing since 4.18.2 (#5786).

With 4.19.1 i get the error of that issue:

Cannot find module '@stencil/core/internal/client' from '../../node_modules/@ionic/core/components/index.js'

Part of the require stack:

Require stack:
      /node_modules/@ionic/core/components/index.js
      /node_modules/@ionic/angular/fesm2022/ionic-angular-common.mjs
      /node_modules/@ionic/angular/fesm2022/ionic-angular-standalone.mjs

I changed nothing in the jest.config. So i have something similar to that in there, which was working before.

{
  ...
  transformIgnorePatterns: [
    'node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*))'
  ],
  ...
}

[christian-bromann]

@KillerCodeMonkey thanks for the feedback. It appears that these fixes which we have merged and are about to release tomorrow have to be picked up by the Ionic Framework and then released. Please keep an eye on the upcoming releases, in the meantime please pin the version for @ionic/core to the one that doesn't contain this bug. I apologies for the inconvenience.

[KillerCodeMonkey]

You do not have to apologize :). Thanks for caring and responding/fixing so fast.

[KillerCodeMonkey]

@christian-bromann btw: it is working :) Thanks!

[KillerCodeMonkey]

@christian-bromann maybe not the same thing again. but maybe related?
i updated the deps of a project to use ionic/angular 8.4.1 + angular 19 and in my tests i got:

SyntaxError: Cannot use import statement outside a module

node_modules/@stencil/core/internal/client/index.js:10
    import { BUILD } from "@stencil/core/internal/app-data"

I did not touched my jest config for a while. So those transformIgnorePatterns for ionic/angular/stencil are there.

Did something changed here recently?

[christian-bromann]

@KillerCodeMonkey mhm .. not sure, do you have a minimal reproduction case?

[KillerCodeMonkey]

@christian-bromann sorry i was already away from the computer yesterday evening (CEST). so here as you wish :)

https://github.com/KillerCodeMonkey/ionic8-angular19-jest-fail

[JosefBredereck]

same issue in our project

[christian-bromann]

@KillerCodeMonkey thanks for providing the example. This indeed looks like a ESM/CJS compatibility problem that I wasn't able to resolve by tweaking the configurations. It is connected to using the @ionic/angular/standalone package. I will reopen to allow folks to investigate on this. Note that Stencil still uses CJS. Any contributions that may resolve this problem would be much appreciated.

I recommend to check out the ionic project and see how they have setup their testing infrastructure with Playwright as an alternative route.

[KillerCodeMonkey]

other testing routes are not that easy for us. We have large projects, combining node, react, electron and angular testing.

And because of the reason to avoid mixing different testing frameworks, jest was the way to go for us.
So you have one test "style" through the whole project and nobody is confused when testing on frontend or backend side.

So it would be sad to transform a huge angular app to a different framework.

[christian-bromann]

We have large projects, combining node, react, electron and angular testing.

These are all things that can be tested with WebdriverIO 😉

So it would be sad to transform a huge angular app to a different framework.

There will be less work to contribute a bugfix for this problem rather than transforming the whole project to a different framework. I can unfortunately not give you an estimate when or if I am able to look into this anytime soon.

[KillerCodeMonkey]

Sure it is possible with other frameworks. So it was with jest ;-) until it Breaks ^^. For Sure i can contribute, but for this i need time as well and need to understand why jest is not transforming this when it should like before. I used standalone Components before as well. Am 11. Dezember 2024 19:06:07 MEZ schrieb Christian Bromann ***@***.***>:

…

> We have large projects, combining node, react, electron and angular testing. These are all things that can be tested with WebdriverIO 😉 > So it would be sad to transform a huge angular app to a different framework. There will be less work to contribute a bugfix for this problem rather than transforming the whole project to a different framework. I can unfortunately not give you an estimate when or if I am able to look into this anytime soon. -- Reply to this email directly or view it on GitHub: #5868 (comment) You are receiving this because you were mentioned. Message ID: ***@***.***>

[JosefBredereck]

First analysis from our side, we can update all packages, and it works fine, but as soon as we update typescript to 5.6.x the issue occurs.

Maybe this info narrows it down a bit.

[Squixx]

#5868 (comment)

Same here, when upgrading to angular 19 (we were already using standalone components) this just breaks jest, for any component using anything ionic. Guess we'll have more people running into this the upcomming days when more people find time to upgrade

Same issue occurs on typescript 5.7.x btw

[KillerCodeMonkey]

i can confirm downgrading typescript to ~5.5.x works

@christian-bromann so the chances are real, that this is more a jest-typescript es6 issue than a stencil one.

see this: kulshekhar/ts-jest#4561

with typescript 5.6 files are transpiled to esm if the package is of type: module or the file ending is *.mts.
And microsoft team states that this is the correct and intended behavior. Previously it was more like a wrong behaviour when mixing esm and cjs

[ddx001]

I encountered the same problem in the context of an NX monorepo (which uses Jest for testing) after migrating to version 20.2.2. The 20.2.2 NX migration includes the upgrade to Angular 19 and it sets the TypeScript version to 5.6.3 automatically. Reverting to TypeScript ~5.5.x fixed my tests.

More details (which led me here): https://stackoverflow.com/questions/79278053/nx-20-2-2-angular-19-ionic-8-jest-broken-tests-following-latest-updates

Minimal reproducible project: https://github.com/ddx001/nx-ng-ionic

[robsonos]

@ddx001 I was having the exact same issue. typescript ~5.5.x indeed fixes it.