Platform: Error: Cannot convert undefined or null to object

Created on 24 Jul 2017  路  2Comments  路  Source: ngrx/platform

I am in the process of migrating my application to ngrx4.0.

I have followed the migration guide, and currently I have disabled dev-tools (as googling this issue pointed at a possible dev tools issue). My application compiles and runs, however in the browser console I have an error:

Error: Cannot convert undefined or null to object
  Evaluating http://localhost:3000/app/main.js
  Loading app
    at Function.getPrototypeOf (<anonymous>)
    at getParentCtor (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1825:47)
    at ReflectionCapabilities.parameters (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1638:43)
    at JitReflector.parameters (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27439:44)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15744:71)
    at CompileMetadataResolver._getFactoryMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15681:51)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15954:43)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15875:49)
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:15835:19)

my app.modules.ts looks like:

import { StoreModule } from '@ngrx/store';
import { reducers } from './_ngrx_reducers/index'
...typescript
@NgModule({
    imports: [
        BrowserModule,
        ...
        StoreModule.forRoot(reducers)
    ],

Then my ngrx_reducers/index note you can see I import createSelector from @ngrx/store i have also tried using createSelector from the reselect package (same error)

export * from './oh_reducers';
import * as fromOrderHead from './oh_reducers';
import * as fromOrderLine from './ol_reducers';
import { Observable } from 'rxjs';
import { ActionReducerMap } from '@ngrx/store';
import { createSelector } from '@ngrx/store';

// Setup generic state so we can use multiple states for numerous reducers later on
export interface State {
    orderhead: fromOrderHead.State;
    orderline: fromOrderLine.State;
}

export const reducers: ActionReducerMap<State> = {
  orderhead: fromOrderHead.OHreducer,
  orderline: fromOrderLine.OLreducer
};

// get state from Orderhead reducer, we use this inside createSelector so we can 
// create a 'query' to run against state
export const getOHState = (state: State) => state.orderhead;

// This function wants to return the selected orderHead

export const getOHEntities = createSelector(getOHState, fromOrderHead.getEntities);
export const getOrderIds = createSelector(getOHState, fromOrderHead.getIds);
export const getSelectedOH = createSelector(getOHState, fromOrderHead.getSelected);

And then the my reducers file has:

import * as orderhead_imp from '../_actions/orderhead';
import { OrderHead } from '../_models/index';
import { createSelector } from 'reselect';

// Set state to mimic that of imported model
export interface State {
  orderids: string[];
  entities: { [orderID: string]: OrderHead };
  selectedOhID: string | null;
};

// Set initial state to empty
const initialState: State = {
  orderids : [],
  entities: {},
  selectedOhID: null,

};

// REMOVED EACH REDUCER CASE EVENT

// functions to return values inside components
export const getEntities = (state: State) => state.entities;

export const getIds = (state: State) => state.orderids;
export const getSelectedId = (state: State) => state.selectedOhID;

// take orderID as input, return State that has matching orderID
export const getSelected = createSelector(getEntities, getSelectedId, (entities, selectedId) => {
  return entities[selectedId];

How can I debug this further? As the console doesn't give much idea of where to go..

Most helpful comment

So when upgrading, I made changes to my tsconfig to fix other things, which broke this, I had set my tsconfig to es6 as opposed to es5, reverting back and removing and adding in "lib": [ "es2015", "dom" ], fixed the issue. Thanks for your time @Renader

All 2 comments

This does not seem to be a ngrx (at least to me). Probably you are passing somewhere Object.keys(null) or Object.assign(null). Why doesn't your console shows the line in which the error occurs?

My guess: Some Component or Reducer that consumes the store gets a null value and passes it to sth like Object.assign

So when upgrading, I made changes to my tsconfig to fix other things, which broke this, I had set my tsconfig to es6 as opposed to es5, reverting back and removing and adding in "lib": [ "es2015", "dom" ], fixed the issue. Thanks for your time @Renader

Was this page helpful?
0 / 5 - 0 ratings