angular-cli: Uncaught Unexpected value 'undefined' declared by the module 'AppModule'

Not sure if my situation is related. But I have a module

/sidebar
   index.ts
   sidebar.component.ts
   sidebar.module.ts

index.ts

export * from './sidebar.module.ts';
export * from './sidebar.component.ts';

sidebar.module.ts

import { SidebarComponent } from './index';

@NgModule({
  declarations: [ SidebarComponent ],
  exports: [ SidebarComponent ]
})
export class SidebarModule {}

And I was getting the same error

Failed: Unexpected value 'undefined' exported by the module 'SidebarModule'

I had a bunch of other declarations and exports, but I narrowed down the problem to the SidebarComponent. It seems the problem is in the index.ts where exporting from './sidebar.module' before './sidebar.component' was the problem. Maybe because the module is dependent on the component, I don’t know. So to fix it, I just changed the order of exports in the index.ts

export * from './sidebar.component';
export * from './sidebar.module';

Not sure is this is expected behavior, but this is what solved my specific problem.

One thing to note is that I am not using CLI, but the angular2-webpack-starter. Not sure if that makes any difference.

replace export * from './myComponent' by export {MyComponent} from './myComponent' everywere the component that is undefined is exported. this does the job.

Oh yes, it is very easy:

import { Something } from './some-module';

console.assert(Something, "Uhoh, Something was not defined, likely part of a circular reference loop");

Do that for each thing where you are suspicious about the import not working.

As far as I can tell, the issue here is related to circular dependencies. These worked fine in SystemJS, but Webpack2 seems to have some trouble in it, see https://github.com/webpack/webpack/issues/1788. It manifests as Unexpected value 'undefined' in weird places.

It’s not something we can solve on the CLI itself other than wait for it to be working on a future Webpack2 version.

/cc @robwormald @TheLarkInn

Just in case anyone happens across this and makes the same stupid mistake I did and don’t see the answer right in front of you… it wasn’t even a circular dependency, I just had the component export duplicated in my index.ts:

export * from './my.component';
// lots more stuff...
export { MyComponent } from './my.component';

I’ve the exact problem with Karma and its DynamicModule, my problem was an extra COMMA ( AFTER httpModule )

...
TestBed.configureTestingModule({
      imports:[
        HttpModule,,
      ],
...

Before

import { abcComponent ,defComponent, xyzComponent,} from “./reports”;

After

import { abcComponent } from “./reports/abc-details/abc-details-component”; import { defComponent } from “./reports/def-details/def-detai‌​ls-component”; import { xyzComponent } from “./reports/xyz-details/xyz-details-component”;

I need to make above changes in app.module.ts files in order to resolve mentioned error

same issue.

I fix it by delete all index export file, then all file import path is specific path.

besides, don’t export default class.

@Linksonder I don’t think this issue is related to this project. It seems to it’s just how webpack works. Try to remove everything from barrels except re-exports

- src
  | - fileA.ts
  | - index.ts

./fileA.ts

import {RGB_CONSTANT} from './index'
...

./index.ts

// bad
export * from './fileA.ts'
export const RGB_CONSTANT = {
	red: '#FF0000',
	green: '#00FF00',
	blue: '#0000FF',
}

// good
export * from './fileA.ts'
export {RGB_CONSTANT} from './constants'

@kylecordes @Choleriker There’s a plugin out there which in a very good way detects all the cyclic dependencies in a project: https://github.com/DelvarWorld/webpack-cyclic-dependency-checker

barrels can be tricky. all I know is that exporting using a wildcard sometimes causes issues. ¯_(ツ)_/¯