Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
caroso1222 opened this issue Aug 25, 2016 · 38 comments

Comments

@caroso1222
Copy link

@caroso1222 caroso1222 commented Aug 25, 2016

  • 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

This comment has been minimized.

Copy link
Contributor

@deebloo deebloo commented Aug 25, 2016

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

This comment has been minimized.

Copy link
Author

@caroso1222 caroso1222 commented Aug 25, 2016

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

This comment has been minimized.

Copy link
Contributor

@deebloo deebloo commented Aug 28, 2016

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

@pdelorme

This comment has been minimized.

Copy link

@pdelorme pdelorme commented Sep 6, 2016

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

@psamsotha

This comment has been minimized.

Copy link

@psamsotha psamsotha commented Sep 11, 2016

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

This comment has been minimized.

Copy link
Member

@filipesilva filipesilva commented Sep 19, 2016

@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

This comment has been minimized.

Copy link
Member

@filipesilva filipesilva commented Sep 19, 2016

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

image

@filipesilva

This comment has been minimized.

Copy link
Member

@filipesilva filipesilva commented Sep 21, 2016

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

This comment has been minimized.

Copy link

@kylecordes kylecordes commented Sep 21, 2016

@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

This comment has been minimized.

Copy link
Author

@caroso1222 caroso1222 commented Sep 21, 2016

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

This comment has been minimized.

Copy link
Contributor

@shairez shairez commented Oct 5, 2016

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

This comment has been minimized.

Copy link

@vivekwisdom vivekwisdom commented Oct 7, 2016

@pdelorme It's not working

@AntonScotte

This comment has been minimized.

Copy link

@AntonScotte AntonScotte commented Oct 27, 2016

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.
skarmavbild 2016-10-27 kl 16 41 15

@borntodesign

This comment has been minimized.

Copy link

@borntodesign borntodesign commented Nov 10, 2016

@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

This comment has been minimized.

Copy link

@kylecordes kylecordes commented Nov 10, 2016

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

This comment has been minimized.

Copy link

@borntodesign borntodesign commented Nov 10, 2016

Thank you!!

On Thu, 10 Nov 2016 at 19:21, Kyle Cordes notifications@github.com 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

This comment has been minimized.

Copy link

@borntodesign borntodesign commented Nov 11, 2016

@kylecordes fixed it! Thanks again :)

@Choleriker

This comment has been minimized.

Copy link

@Choleriker Choleriker commented Feb 7, 2017

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

This comment has been minimized.

Copy link

@wfsovereign wfsovereign commented Mar 14, 2017

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

This comment has been minimized.

Copy link

@matheo matheo commented May 9, 2017

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

This comment has been minimized.

Copy link

@ChandniGondhiya ChandniGondhiya commented May 9, 2017

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

This comment has been minimized.

Copy link

@abhinavsingi abhinavsingi commented May 11, 2017

@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

This comment has been minimized.

Copy link

@kylecordes kylecordes commented May 11, 2017

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

This comment has been minimized.

Copy link

@ChandniGondhiya ChandniGondhiya commented May 24, 2017

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

This comment has been minimized.

Copy link

@leolanese leolanese commented May 26, 2017

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

@irontoby

This comment has been minimized.

Copy link

@irontoby irontoby commented Jun 29, 2017

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

This comment has been minimized.

Copy link

@SimplyComplexable SimplyComplexable commented Jul 31, 2017

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

This comment has been minimized.

Copy link

@titusfx titusfx commented Aug 16, 2017

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


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

This comment has been minimized.

Copy link

@davidalee davidalee commented Sep 4, 2017

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

This comment has been minimized.

Copy link

@PhilHuot PhilHuot commented Jan 11, 2018

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

@HollyMarsia

This comment has been minimized.

Copy link

@HollyMarsia HollyMarsia commented Feb 4, 2018

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

This comment has been minimized.

Copy link

@hbsoftco hbsoftco commented Feb 10, 2018

@psamsotha Thanks so much.

@matheo

This comment has been minimized.

Copy link

@matheo matheo commented Feb 12, 2018

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`
speed-of-light added a commit to angeeks/gh-layout that referenced this issue Jun 3, 2018
trojanc added a commit to UnisaProject/UnisaMyAdmin that referenced this issue Jun 4, 2018
Barrel exports are problematic angular/angular-cli#1831
@ralzinov

This comment has been minimized.

Copy link

@ralzinov ralzinov commented Jun 20, 2018

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

@Linksonder

This comment has been minimized.

Copy link

@Linksonder Linksonder commented Jun 25, 2018

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

This comment has been minimized.

Copy link

@ralzinov ralzinov commented Jun 25, 2018

@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

This comment has been minimized.

Copy link

@mistic100 mistic100 commented May 1, 2019

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 comment has been minimized.

Copy link

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

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.