Uncaught Unexpected value 'undefined' declared by the module 'AppModule'

[caroso1222]

• OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
  Mac OSX El Capitan
• Versions.

angular-cli: 1.0.0-beta.11-webpack.2
node: 6.3.0
os: darwin x64

• Repro steps.

Migrate from @1.0.0-beta.10 to @webpack

tl;dr: Create two components. One (Child) inside the other (Parent). Aggregate all the exports into the parent's barrel. Import the components into app.module.ts using the parent barrel and add them to the declarations array. App crashes.

Detailed steps

ng g component Parent
cd src/app/parent/
ng g component Child

Aggregate all exports within parent barrel so that parent/index.ts looks like this:

export * from './parent.component';
export * from './child'; //Should re export everything from child/index.ts

parent/child/index.ts looks like this:

export * from './child.component';

Now import the components using the parent barrel in app.module.ts and add it to the declarations array:

...
import { ParentComponent, ChildComponent  } from './parent';
...
@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent
  ],
...

• The log given by the failure.

Open up the app in the browser, console shows:

Uncaught Unexpected value 'undefined' declared by the module 'AppModule'
(anonymous function) @ metadata_resolver.js:287
CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:285
RuntimeCompiler._compileComponents @ runtime_compiler.js:150
RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:72
RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:49
PlatformRef_._bootstrapModuleWithZone @ application_ref.js:368
PlatformRef_.bootstrapModule @ application_ref.js:361
(anonymous function) @ main.ts:9
__webpack_require__ @ bootstrap d67ffcb…:52
(anonymous function) @ environment.dev.ts:4
__webpack_require__ @ bootstrap d67ffcb…:52
webpackJsonpCallback @ bootstrap d67ffcb…:23
(anonymous function) @ main.bundle.js:1

• Mention any other details that might be useful.

When the component is generated via cli, it's imported in app.module.ts using the path to the component itself. So it's no natively failing when using the cli ng generate. But according to the Angular Style Guide a barrel should recursively re-export all its "sub-barrels".

Workaround: Just import all the components from their respective folders as stated in this OS post.

[deebloo]

It has to do with barrels and not with angular or the cli directly. If you try to log out the values you are importing into your app module I bet they are undefined. Another way to get around the issue is to now use export * from 'foo' and instead doexport { MyComponent } from './foo';

[caroso1222]

Thank you @deebloo. I tried it explicitly exporting the component the way you suggested and the barrel now works. I can import ParentComponent and ChildComponent from the same barrel in app.module.ts. The problem I see now is that it seems to be aggregating only up to the first level deep. Re-pro steps:

1. Add a GrandChildComponent inside my ChildComponent
2. Set the grand-child/index.ts to export { GrandChildComponent } from './grand-child.component' as suggested.
3. Export grandchild barrel within the child barrel. In child/index.ts add export * from './grand-child'
4. In app.modules.ts import GrandChildComponent using the parent barrel import { ParentComponent, ..., GrandChildComponent } from './parent'.
5. Browser console shows again Uncaught Unexpected value 'undefined' declared by the module 'AppModule'

I know I'm perhaps bothering a little bit too much around this. There's a workaround and it's good (Fill app.module.ts with a bunch of imports). I just wanted to get this concept of barrels straight and I thought I would work by aggregating all nested barrels, including components. If it's not meant to work that way, no prob :)

[deebloo]

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

[pdelorme]

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

[psamsotha]

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.

[filipesilva]

@caroso1222 could you provide a repo with the latest release where this happens? I'm wondering if it's a webpack problem with re-exporting.

[filipesilva]

I tried to repro with your steps and couldn't get the error:

[filipesilva]

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 webpack/webpack#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

[kylecordes]

@filipesilva Would it be worthwhile to add something to try to detect when this problem occurs and issue a more useful error? In our stuff, when we suspect this problem, we put in an assertion-ish mechanism to alert when an import comes back undefined. Ugly and manual, but something automatic could improve the user experience? Or not worth chasing because Webpack will get improved anyway?

[caroso1222]

Thanks @filipesilva. Sorry couldn't provide the asked repo, been kinda busy these days. I think I'll wait for the circular dependencies to be tackled on a future Webpack version.

[shairez]

I filed the following issue on webpack which reproduces the same problem, but with a different scenario.

webpack/webpack#3100

I believe the solution to that might solve this issue as well.

[VivekWisdom]

@pdelorme It's not working

[AntonScotte]

I'm experiencing this issue when trying to upgrade my code from angular rc4 to the final release using Systemjs 0.19.39. I've gone through my entire codebase and replaced all export * from 'foo'; to export { MyComponent } from 'foo'; as previously suggested.

[borntodesign]

@kylecordes I have a ton of imports in my app module and it is the impossible task to try and find the circular dependency. Could you explain how you find it manually through assertions? I need help because the error undefined is giving me nothing.

[kylecordes]

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.

[borntodesign]

Thank you!!

On Thu, 10 Nov 2016 at 19:21, Kyle Cordes [email protected] wrote:

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.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#1831 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEUSGqWFucIBlRx9LqTq7nvMMgIEbA96ks5q827KgaJpZM4Jswlk
.

[borntodesign]

@kylecordes fixed it! Thanks again :)

[Choleriker]

Guys, there is another simple solution for this. I have 2 modules which are somehow deep in the structure using each other. I ran into the same problem with circular dependencies with webpack and angular 2. I simply changed the way of how the one module is declared:

....

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        require('../navigation/navigation.module')
    ],
    declarations: COMPONENTS,
    exports: COMPONENTS
})
class DppIncludeModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DppIncludeModule
        };
    }
}

export = DppIncludeModule;

When I now using the imports statement on ngModule attribute I simply use:

@NgModule({
    imports: [
        CommonModule,
        ServicesModule.forRoot(),
        NouisliderModule,
        FormsModule,
        ChartModule,
        DppAccordeonModule,
        PipesModule,
        require('../../../unbranded/include/include.module')
    ],
....

With this all problems are away.

[wfsovereign]

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.

[matheo]

Thanks @psamsotha!
I was exporting the module first in my barrel, but it was using components exported later, I forgot order matters! Thanks for your comment!

[ChandniGondhiya]

I am facing same issue. "Unexpected value 'undefined' declared by the module 'AppModule' at SyntaxError.ZoneAwareError"

Can anyone please help out to find what's wrong looking at http://stackoverflow.com/questions/43794233/unexpected-value-undefined-declared-by-the-module-appmodule-at-syntaxerror-z?noredirect=1#comment74668883_43794233

[abhinavsingi]

@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

[kylecordes]

The cyclic dep checker is a great idea. But I hate to recommend ejecting a CLI app to get access to add such a webpack plugin. Ideally CLI would integrate it.

[ChandniGondhiya]

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

[leolanese]

use: "export default RouterModule.forRoot(routes);" on the routing file instead

[irontoby]

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';

[SimplyComplexable]

Ran into this issue. It was caused by renaming a bunch of classes (trying to ensure consistency), all of the imports were correct in the AppModule, something just wasn't working right. My solution was to log all of the imports and see which ones were undefined. This limited it to two and I bug fixed from there. I ended up just renaming the class again, compiling, and setting it back to the new name.

[titusfx]

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

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

[davidalee]

Thanks @abhinavsingi for providing a link to cyclic-dependency-checker plugin. Had already gone through all of the other tips provided here but the issue wasn't due to my import/export syntax or using barrel files, it was due to a handful of circular dependencies in the app.

Super useful plugin and helped me finally resolve my issue after spending a couple hours trying to figure it out.

[PhilHuot]

Had the same problem. For me it was because I had 2 components with the exact same selector.

[HolyMarsia]

In my case.. I made a really stupid mistake.
in the project New created component Inner Scss file no extensions ..

I want you to check it out.
Good luck

[hbsoftco]

@psamsotha Thanks so much.

[matheo]

I was getting this error because of the barrels of my App
I'm not sure yet which tsconfig setting causes it, but I have to use:

import { ... } from './subfolder/index`

instead just

import { ... } from './subfolder`

[ralzinov]

In case it helps somebody. I fixed my problem with https://github.com/aackerman/circular-dependency-plugin

[Linksonder]

I have a circular dependency which i cannot prevent. Is this issue going to be fixed or do i need to remove my circular dependency?

[ralzinov]

@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'

[mistic100]

The above solutions of importing from the "index" file rather than the folder works well but has the downright that everyone needs to know and understand the problem and be vigilant of the imports, which is impossible in a big team working on IDEs with imports autogeneration (IntelliJ will always try to import from ".." when possible for example).

So in the enterprise library I am working on I renamed all "index" files "public_api", and the root public_api is re-exporting from all public_api files.

I also added a tslint rule to prevent imports from public_api (disabled in the root file of course).

This way the IDE always imports each class from its own file, not from the barrel but we have a nice "public_api tree" in the library.

Hope this helps.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}