Stencil: 'Element' is not exported

[mmakrzem]

Stencil version:

 @stencil/[email protected]
 @stencil/[email protected]
 @stencil/[email protected]
 @stencil/[email protected]
 @stencil/[email protected]

I'm submitting a:

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I tried to upgrade to the latest version of Stencil however I'm getting the following error:

[ ERROR ]  Rollup: Missing Export: ./src/components/accordion/accordion.tsx:2:20
       'Element' is not exported by ./node_modules/@stencil/core/internal/client/index.mjs?app-data=conditional,
       imported by ./src/components/accordion/accordion.tsx

  L1:  import {
  L2:    Component, Element, Event, EventEmitter, forceUpdate, h, JSX, Method
  L3:  } from '@stencil/core';

[23:22.4] build failed, watching for changes... in 8.68 s

Expected behavior:
I'm upgrading from stencil @1.9.2 where everything worked just fine. It seems like I can only upgrade to stencil @1.13.0 where everything works, but as soon as I jump to v1.14 or higher then I get this error saying that Element is no longer exported.

Steps to reproduce:

To reproduce,

import { Element } from '@stencil/core'

[Trendy]

I'm experiencing a similar issue, but with Event instead of Element. It started happening after upgrading from 1.12.2

[chrisweight]

I'm experiencing a similar issue, but with Event instead of Element. It started happening after upgrading from 1.12.2

I'm having exactly the same issue with Event on 1.16.2 - I'm guessing this is down to the rollup dependency bump to 2.x

[valentinmirchev]

I'm experiencing the same Event problem with version 1.16.5

[Trendy]

Sorry it took me so long to come back around to this, but I solved my issue, it looks like someone had used Event as a constructor in a file somewhere, and this really confused roll up.

// Offending code example
this.textarea.dispatchEvent(new Event('input));

Not entirely sure how it was slipped into the code base, but cleaning that up fixed my issue

[mmakrzem]

My workaround to the problem is to remove 'Element' from the import statement and instead add the following to the source code where the import fails:

interface ElementDecorator {
  () : PropertyDecorator;
}
declare const Element : ElementDecorator;

[mmakrzem]

It is strange because I have a bunch of stencil components that use:

 import { Element } from '@stencil/core'

but only the first component is failing.... If I add the workaround code shown above to the first component file, then everything works, and I don't have to change any of the Element imports in any of my other component files.

[adrian2x]

I'm getting that same error with Event on 2.0.3:

```
Rollup: Missing Export: ./src/global/store.ts:7:9
'Event' is not exported by ./node_modules/@stencil/core/internal/client/index.js?app-data=conditional,
imported by ./src/global/store.ts
````

[Krzyrok]

https://github.com/ionic-team/stencil/issues/2563#issuecomment-673046998
On [email protected] I had the same issue with error when importing Event decorator. The reason in my case was rename during import:

import {
  Event as EventProp
} from '@stencil/core';

Removing this rename solved the issue:

import {
  Event
} from '@stencil/core';

(but I cannot use Event from global typings in the same file now...)

[claviska]

Sorry it took me so long to come back around to this, but I solved my issue, it looks like someone had used Event as a constructor in a file somewhere, and this really confused roll up.

// Offending code example
this.textarea.dispatchEvent(new Event('input));

Not entirely sure how it was slipped into the code base, but cleaning that up fixed my issue

This is indeed the cause of this error, at least in every case I've seen it. A workaround is posted above but another one is to rename the import:

import { Event as ComponentEvent, EventEmitter } from `@stencil/core`

...

@ComponentEvent() yourEvent: EventEmitter;

[dougestey]

I am still experiencing this issue.

Using an import alias import { Event as ComponentEvent } from '@stencil/core' causes:

[51:56.4]  generate custom elements bundle finished in 8.61 s

[ ERROR ]  Rollup: Missing Export: ./src/components/button/button.tsx:12:29
           'Event' is not exported by
           ./node_modules/@stencil/core/internal/client/index.js?app-data=conditional, imported by
           ./src/components/button/button.tsx
[51:56.4]  build failed in 11.21 s

Stencil version 2.3.0.