ionic-team
bug: Missing export error when importing class from external Stencil library in version 4.28+
Prerequisites
- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already report this problem, without success.
Stencil Version
4.28+
Current Behavior
I’ve encountered a regression related to importing TypeScript classes from an external Stencil library after updating to StencilJS version 4.28+.
In version 4.27.2, everything works perfectly: I can import classes like Vector2 from my external Stencil component library (tg-engine) without any issues.
However, once I update the consuming project to Stencil 4.28.0 or later (currently tested up to 4.29.2), the import of these classes no longer works.
I get the following error:
src/components/app-home/app-home.tsx (2:9): "Vector2" is not exported by "node_modules/tg-engine/dist/tg-engine/tg-engine.esm.js", imported by "src/components/app-home/app-home.tsx".```
with --debug
```[ ERROR ] Rollup: Missing Export: src/components/app-home/app-home.tsx:2:9
RollupError: src/components/app-home/app-home.tsx (2:9): "Vector2" is not exported by
"node_modules/tg-engine/dist/tg-engine/tg-engine.esm.js", imported by
"src/components/app-home/app-home.tsx". at getRollupError
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:211989:39)
at error
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:211985:42)
at _Module.error
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:229041:16)
at _Module.traceVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:229454:25)
at ModuleScope.findVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:227592:39)
at _ChildScope.findVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:222140:38)
at ClassBodyScope.findVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:222140:38)
at _ChildScope.findVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:222140:38)
at _ChildScope.findVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:222140:38)
at FunctionScope.findVariable
(/Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js:222140:38)```
### Expected Behavior
Everything works like in 4.27.2
### System Info
```shell
System: node 22.13.0
Platform: darwin (24.3.0)
CPU Model: Apple M2 Max (12 cpus)
Compiler: /Users/oliver/Development/stenciljs-4-29-2-import-error/node_modules/@stencil/core/compiler/stencil.js
Build: 1744045416
Stencil: 4.29.2 🔋
TypeScript: 5.5.4
Rollup: 4.34.9
Parse5: 7.2.1
jQuery: 4.0.0-pre
Terser: 5.37.0
Steps to Reproduce
install and start the repro
Code Reproduction URL
https://github.com/Scan0815/stenciljs-4-29-2-import-error
Additional Information
I noticed that Stencil upgraded the internal Rollup version starting with 4.28, so this might be related.
Thank you for reporting and providing a reproduction case, any contributions that may resolve this bug are much appreciated.
I have something related, but with the stencil core itself:
` [ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/action/action.tsx (1:9): "Component" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/action/action.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/action/action.tsx (1:20): "Element" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/action/action.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/action/action.tsx (1:48): "Prop" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/action/action.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/button/button.tsx (1:9): "Component" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/button/button.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/button/button.tsx (1:20): "Element" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/button/button.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/button/button.tsx (1:29): "Event" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/button/button.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/button/button.tsx (1:55): "Prop" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/button/button.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/styling/styling.tsx (1:9): "Component" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/styling/styling.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/styling/styling.tsx (1:29): "Prop" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/styling/styling.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/icon/icon.tsx (1:9): "Component" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/icon/icon.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/icon/icon.tsx (1:29): "Prop" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/icon/icon.tsx".
[ WARN ] Bundling Warning MISSING_EXPORT src/components/atoms/icon/icon.tsx (1:35): "Watch" is not exported by "node_modules/@stencil/core/internal/client/index.js?app-data=conditional", imported by "src/components/atoms/icon/icon.tsx". `
hi @Scan0815 - I just took this for a spin.
The 'regression' here is due to the underlying Rollup version within Stencil being updated and it now respects the defined exports from a lib's package.json.
In your example
import { Vector2 } from 'tg-engine';
now relates to
".": {
"import": "./dist/tg-engine/tg-engine.esm.js",
"require": "./dist/tg-engine/tg-engine.cjs.js",
"types": "./dist/types/index.d.ts"
},
in the 3rd party. And whilst the types exports Vector2 (so your IDE / typescript is happy) the actual tg-engine.esm.js does not ... thus the error
