Interface does not export, bundle dev failed

Ionic Framework ionic-v3
1

I’ve created an interface:

export interface IEvent {
    name: string;
    city: string;
    startDate: Date;
    endDate: Date;
}

However when I use this interface like:

export class Event implements OnInit {

    @Input() data: IEvent;

And run ionic serve it gives me an error:

[23:36:59]  bundle dev failed:  Module src/interfaces/IEvent.ts 
does not export IEvent (imported by src/components/Event/Event.ts)

When I run ionic run android this error doesn’t show up.

Any thoughts on what could be wrong?

2

How are you importing IEvent? I do something similar with syntax like:

import {Activity, Activities} from "../api";

BTW, the TypeScript style guide explicitly discourages prefixing interfaces with ‘I’.

3

@rapropos Thanks for you reply! I import the interface like:

import {IEvent} from '../../interfaces/IEvent';

Didn’t knew the ‘I’ prefix was discouraged, thanks! How do they suggest naming if you have a Event component and an Event interface?

4

It turned out having an interface type on an @Input was the problem:

@Input() event: IEvent;

Doesn’t work

1 Like
5

Same issue when I try:

import {Config} from '...';
export class MyClass {
    constructor(config: Config){
       ...
    }
}

where Config it’s an exportable interface.

6

Same problem importing exportable interface from another file :frowning:

7

@osi This must be the same problem as discussed in https://github.com/driftyco/ionic/issues/8292. My response there was:

It seems that this happens when interfaces are used in @Input(). I’m hoping that they fix it ASAP too.

As a workaround I’m using @Input() inputName: null | MyInterface (for some reason this works for me, and when they fix it I’ll search for all occurences of null | in my project, remove them and let only the interfaces).

(This way I still get autocompletion and typescript errors).

@Sfraga is your interface in some @Input() or you use it only like exposed in your code? In my case, all errors occured in @Input() (although I don’t have classes with interfaces in the constructor to see what would happen). You could try this aproach too, something like constructor(config: null | Config).

1 Like
8

I’ve also create a question on Stackoverflow: http://stackoverflow.com/questions/39944864/angular2-interface-on-input-not-working-with-aot

9

I was also wondering if this is an Ionic or Angular related problem

10

@osi Seeing the issue below, it seems it is an Ionic’s problem (and if this was angular’s, this issue wouldn’t start to happen just when Ionic updated to RC0, I think)

Probably related with 1 of these changes (or both):

  • Move away from gulp (ionic-gulp-tasks) to npm scripts (ionic-app-scripts)
  • Use Rollup for bundling instead of browserify or webpack

From https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

11

I do not directly see the relation between my problem and the bug you mentioned. But we will see when RC1 is ready :slight_smile:

12

@osi Actually, the issue is not the one that generated the post, but is dicussed in the comments (sorry, should’ve said that). See @pascalwhoop and @konrin comments (https://github.com/driftyco/ionic/issues/8292#issuecomment-251928571) in the issue on github, about not finding interfaces.

Later, @danbucholtz (from Ionic team) replied:

We think we know what the issue is and are working to resolve it.

and then:

[…] we just pushed a fix and are going to start testing it out shortly. Hoping to ship soon.

For now, doing @Input() inputName: null | MyInterface works for me.

13

We have a fix that we are currently testing internally. Hoping to release in the next day or so if we don’t find any issues.

Thanks,
Dan

2 Likes