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

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.

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

@deebloo

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:

Add a GrandChildComponent inside my ChildComponent
Set the grand-child/index.ts to export { GrandChildComponent } from './grand-child.component' as suggested.
Export grandchild barrel within the child barrel. In child/index.ts add export * from './grand-child'
In app.modules.ts import GrandChildComponent using the parent barrel import { ParentComponent, ..., GrandChildComponent } from './parent'.
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 :)

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

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

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.

@caroso1222

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

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

@robwormald

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

@filipesilva

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

@filipesilva

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.

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.

@pdelorme

@pdelorme It's not working

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.

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


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

@abhinavsingi

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.

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

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

@psamsotha

@psamsotha Thanks so much.

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`

fix: remove barrel for export undefined issue

Fix build issues

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

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?

@Linksonder

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

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.

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.}

Navigation Menu

Repository navigation

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

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

deebloo commented on Aug 25, 2016

caroso1222 commented on Aug 25, 2016

deebloo commented on Aug 28, 2016

pdelorme commented on Sep 6, 2016

psamsotha commented on Sep 11, 2016

filipesilva commented on Sep 19, 2016

filipesilva commented on Sep 19, 2016

filipesilva commented on Sep 21, 2016

kylecordes commented on Sep 21, 2016

caroso1222 commented on Sep 21, 2016

shairez commented on Oct 5, 2016

VivekWisdom commented on Oct 7, 2016

14 remaining items

SimplyComplexable commented on Jul 31, 2017

titusfx commented on Aug 16, 2017

davidalee commented on Sep 4, 2017

PhilHuot commented on Jan 11, 2018

HolyMarsia commented on Feb 4, 2018

hbsoftco commented on Feb 10, 2018

matheo commented on Feb 12, 2018

ralzinov commented on Jun 20, 2018

Linksonder commented on Jun 25, 2018

ralzinov commented on Jun 25, 2018

mistic100 commented on May 1, 2019

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions