TypeError: Cannot read property 'members' of undefined

error typeerror: cannot read property of undefined
uncaught typeerror: cannot read property of null
typeerror: cannot read property of undefined typescript
typeerror: cannot read property of undefined react
typeerror: cannot read property of undefined nodejs
uncaught typeerror: cannot read property of undefined jquery
typeerror: cannot read property 'value' of undefined react
typeerror: cannot read property 'name' of undefined

I started upgrading from Angular 4.4.4 to 5.1.1 today. I have had to upgrade a number of other packages that rely on angular as well. I get an error with so little context that I have no idea where to start. Has anyone else seen this and know what the issue is?

$ ng serve --aot=false
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-19T15:26:36.137Z
Hash: bf0b773d5dfafdd9133b
Time: 16934ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 307 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 4.03 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 855 kB [initial] [rendered]

ERROR in TypeError: Cannot read property 'members' of undefined
    at AotSummaryResolver.resolveSummary (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:32638:56)
    at CompileMetadataResolver._loadSummary (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:14825:66)
    at CompileMetadataResolver._getEntryComponentMetadata (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15857:66)
    at C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15323:55
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15323:18)
    at CompileMetadataResolver.getNgModuleSummary (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15157:52)
    at C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15245:72
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:15230:49)
    at visitLazyRoute (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:31061:104)
    at AotCompiler.listLazyRoutes (C:\source\app\node_modules\@angular\compiler\bundles\compiler.umd.js:31029:20)
    at AngularCompilerProgram.listLazyRoutes (C:\source\app\node_modules\@angular\compiler-cli\src\transformers\program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\source\app\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\source\app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (C:\source\app\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:562:50)

webpack: Failed to compile.

I find it strange that it starts in AotSummaryResolver when I have --aot=false in the serve command.

Here is my package.json:

{
  "name": "test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --aot=false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular-devkit/schematics": "^0.0.42",
    "@angular/animations": "5.1.1",
    "@angular/cdk": "5.0.1",
    "@angular/common": "5.1.1",
    "@angular/compiler": "5.1.1",
    "@angular/core": "5.1.1",
    "@angular/forms": "5.1.1",
    "@angular/http": "5.1.1",
    "@angular/platform-browser": "5.1.1",
    "@angular/platform-browser-dynamic": "5.1.1",
    "@angular/platform-server": "5.1.1",
    "@angular/router": "5.1.1",
    "@auth0/angular-jwt": "^1.0.0-beta.9",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
    "@ng-idle/core": "^2.0.0-beta.13",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/entity": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@schematics/angular": "^0.1.11",
    "@schematics/schematics": "^0.0.11",
    "angular2-counto": "^1.2.3",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "d3": "^4.11.0",
    "echarts": "^3.6.0",
    "echarts-gl": "^1.0.0-alpha.5",
    "font-awesome": "^4.7.0",
    "global": "^4.3.2",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "moment": "^2.19.4",
    "ng2-dnd": "^5.0.2",
    "popper.js": "^1.11.0",
    "roboto-fontface": "^0.7.0",
    "rxjs": "^5.5.2",
    "toastr": "^2.1.2",
    "ts-action": "^3.2.2",
    "typings": "^2.1.1",
    "uuid": "^3.1.0",
    "web-animations-js": "^2.2.5",
    "yarn": "^0.24.5",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "5.1.1",
    "@types/d3": "^4.11.0",
    "@types/echarts": "^0.0.6",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.45",
    "@types/node": "^7.0.23",
    "@types/toastr": "^2.1.33",
    "@types/uuid": "^3.4.0",
    "codelyzer": "^4.0.2",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "json-server": "^0.12.0",
    "jsonwebtoken": "^7.4.1",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "^5.8.0",
    "typemoq": "^1.7.0",
    "typescript": "2.4.2"
  }
}

My angular-cli version is 1.6.1.

The error seems to occur here in the angular source code: https://github.com/angular/angular/blob/b3eb1db6dd57a0820cfc94af5460ceb3fea20610/packages/compiler/src/aot/summary_resolver.ts#L68

SOLUTION

Previously I thought it was related to ng-bootstrap which was incorrect.

I found some context for it by putting a console log at line 15207 in compiler.umd.js as follows:

if (meta.entryComponents) {
    console.log(meta);
    entryComponents.push.apply(entryComponents, flattenAndDedupeArray(meta.entryComponents)
                .map(function (type) { return /** @type {?} */ ((_this._getEntryComponentMetadata(type))); }));
}

Which resulted in:

...
entryComponents: [ undefined ],
...

I had a module with entryComponents: [MdProgressSpinner] where MdProgressSpinner was not imported. When I removed it that error went away... and the next one came :)

One of the reasons this can happen is in you app module, you have an entry components which the build process can't find a import for (in below example if I comment out the import line and leave the component then it causes this error).

Uncaught TypeError: Cannot read property of undefined , Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined,  Uncaught TypeError: Cannot read property 'innerHTML' of null All this means is that you are trying to access a property of an object that is undefined. These usually happens when we don't test an object before using it.

I had the same issue and nearly gave up. Your question contained the tip that helped me pinpoint the problem, but I totally missed it because it was part of the question.

Put a console log at line 15258 in compiler.umd.js (or whatever exact line your error points you to):

if (meta.entryComponents) { console.log(meta); //<== Add this

My console log contained the following at the end: { ngMetadataName: 'NgModule', declarations: [ null ], ... entryComponents: [ null ] }

The issue turned out to be a Module that imported a class like this:

import MyComponent from "./my-component.component.ts";

The class was exported using default:

export default class MyComponent { ...

Removing default, and adding curly brackets to the import worked!

import { MyComponent } from "./my-component.component.ts";

​​Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined.​ The dreaded error we all hit at some  most msg don't have an _topic property, so if one of those arrived at your function it would be undefined and so split would not work. _topic is added by an incoming MQtt node - so as long as all your msg are coming from there and nowhere else you may be ok.

I was getting this error message when creating a new library. It turned out that in public_api.ts of that library, I was importing an index.ts file. This type of bundle are still not handle well. Making separate imports to each file to expose the public API was the solution in my case.

Uncaught TypeError: Cannot read property 'value' of undefined , Seems like one of your values, with a property key of 'value' is undefined. Test that i1 , i2 and __i are  npm run build gives ERROR TypeError: Cannot read property 'match' of undefined. - Building for production ERROR TypeError: Cannot read property 'match' of undefined TypeError: Cannot read

TypeError: Cannot read property 'on' of undefined · Issue #30 , TypeError: Cannot read property 'on' of undefined #30. Closed. ghost opened this issue on Jan 30,  I am doing a project and I am trying to return values from the database and list them in a table. I am using MERN for this. While I have been able to get the data from the Mongo collection into my state, I am still unclear as to how I can return these 3 specific values from the collection of arrays into my table.

TypeError: Cannot read property 'enter' of undefined · Issue #30122 , TypeError: Cannot read property 'enter' of undefined at AsyncHook.before (​domain.js:76:20) at  Therefore, JavaScript is unable to read the value of something that does not exist. EDIT : If you want to check that the element exists first, you could use an if statement for each:

Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one  Will second @bluemoehre here: following the quickstart to the letter, getting a Cannot read property 'on' of undefined.My setup is ArchLinux, node is managed by nvm: nvm --version 0.33.2 node --version v8.1.0

Comments
  • did you test your code prior to make sure it worked before the upgrade?
  • That's a lot of third party angular-specific packages. Since this is a version change (breaking change) you'll need to ensure that all of those packages support the new version. (ng-boostrap, ng-idle, ngrx, schematics, angular2-counto, etc)
  • @MikeTung Yes, I ran it right before the upgrade.
  • @Z.Bagley Seems to be related to ng-bootstrap. I logged out some info in the compiler and I see an undefined coming in. I downgraded to their recommended version (5.0.2) and now I get "Cannot read property 'assertNoMembers' of undefined" :)
  • Solved the issue by removing an undefined entry component. A better error message would have been nice!
  • One reason this can apparently happen is the spread operator. If you want to use entry components from an array declared elsewhere, use concat.
  • @BarryMcNamara thanks! That was my issue. Using concat worked.
  • Yes, I still cannot get why it affects only dynamic components, but export default doesnt work
  • i have this problem in library . how you resolve that can you explain ?
  • I simply removed the index.ts files and replaced them by making the imports using full relative path. As an example, instead of importing via the index file such as "import { MyComponent } from './components'", you should import directly such as "import { MyComponent } from './components/my-component.ts'"
  • Worked for me!! This should be the answer I think. did you created any ticket for this?
  • I had the same problem, thank you for pointing that out! github.com/IgniteUI/igniteui-angular/pull/5705/files import { IgxGridComponent } from '../grid'; .. to import { IgxGridComponent } from '../grid/grid.component';
  • Hi Laurent, do you mean you were using the "barrel" style of import (archived link)? And it sounds like you did same as Gunther here, "Import it from the file where it is declared directly instead of the barrel." ? For reference 1) Angular once discouraged barrels, but the links are all broken, 2) barrels are OK, but instead, can use Angular NgModule to re-export.