Ionic-app-scripts: Object prototype may only be an Object or null: undefined

[AbrahamLopez10]

Short description of the problem:

Getting the error "Object prototype may only be an Object or null: undefined" when running "ionic serve"

What behavior are you expecting?

A running Ionic app

Steps to reproduce:
Started getting this cryptic error message out of nowhere when I upgraded the Ionic CLI, ionic-app-scripts, and ionic-angular to the latest versions.

Which @ionic/app-scripts version are you using?
2.1.4

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Runtime Error
Object prototype may only be an Object or null: undefined
Stack
TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at webpackJsonp.57.__extends (http://localhost:8100/build/main.js:5954:9)
    at http://localhost:8100/build/main.js:5976:5
    at Object.57 (http://localhost:8100/build/main.js:5988:2)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.132 (http://localhost:8100/build/main.js:977:90)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.249 (http://localhost:8100/build/main.js:3218:71)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.130 (http://localhost:8100/build/main.js:724:105)

[Murilo-Perrone]

I got stuck with this error for a few days in my ionic project. This is a circular reference resolution bug, which seems to reside within "webpack" component. In my case, I just had to remove explicit type references in one my classes to undo a direct cross-type-reference between two classes - class A uses class B which uses class A too.

Before:

import { X } from './x';
class Factory {
  // ....
  static create(type) {
    if (type instanceof X) return new X();
    // ...
  }
}
---
import { Factory } from './factory';
class X {
  // ...
  addChild() {
    this.childs.push( Factory.create( X ) );
  }
}

After:

class Factory {
  // ....
  static create(type) {
    if (type.create) return type.create();
    // ...
  }
}
---
import { Factory } from './factory';
class X {
  // ...
  addChild() {
    this.childs.push( Factory.create( X ) );
  }
  create() { return new X(); }
}

And similar solution may be developed through the use of interfaces, if needed.

[gagankatare]

Hi

Wen I try to use “ionic serve”, i get this error message :

Runtime Error
Object prototype may only be an Object or null: undefined
Stack
TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf ()
at __extends (http://localhost:8100/build/vendor.js:98997:9)
at http://localhost:8100/build/vendor.js:99030:5
at Object. (http://localhost:8100/build/vendor.js:99043:2)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.470 (http://localhost:8100/build/main.js:3826:86)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.428 (http://localhost:8100/build/main.js:3421:73)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.423 (http://localhost:8100/build/main.js:3401:70)

But when i try on “private page”, it works.

Any idea where the problem comes from ?

[guillep2k]

In my case there was a circular reference problem too. However, it was the export order on an index.ts file that was causing the problem.

[dileepunni1]

I have the same problem, but i think it is a problem related to barrel index.ts. Accidentily i have a refence from outer barrel index, which causes error. When changed to internal barrel, problem resolved.
eg : import {class} from '../shared/index' to import {class} from './index'

[devinprejean]

@guillep2k had the right answer for me. Class A was using Class B and Class B extended Class A so it had to be imported. I moved the import of Class B within the Class A file to the bottom after the export of Class A

[Louis012]

In my case it was because I was exporting the same service twice in one of my index.ts

[akaushik79]

I am facing exactly same problem but not sure how to debug because errors doesn't give any information ad all. Please help.

[idanb007]

i'm also facing this problem :

this is what is going on … --prod --verbose :

[18:05:46] ngc started …
TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf ()
at Object.__extends (/Users/x/projects/x/node_modules/tslib/tslib.js:64:9)
at /Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:115:17
at /Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:314:6
at /Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:3:17
at Object. (/Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:9:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
[DEBUG] TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf ()
at Object.__extends (/Users/x/projects/x/node_modules/tslib/tslib.js:64:9)
at
/Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:115:17
at
/Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:314:6
at
/Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:3:17
at Object.
(/Users/x/projects/x/node_modules/@angular/compiler-cli/src/ngtsc/indexer/src/template.js:9:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

[KRVaghani]

you try this command and check the application

1. ng update @angular/cli @angular/core --force
2. npm install
3. ng serve -o

[idanb007]

Hi KRVaghani ,
Its Ionic 3 project , im adding its info :

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.2.4
Cordova Platforms  : android 7.0.0 ios 4.5.5
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.4 
Node       : v10.16.3
npm        : 6.9.0 
OS         : macOS
Xcode      : Xcode 10.3 Build version 10G8

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

I'm facing this error when running "ng update @angular/cli @angular/core --force" :

Error: Cannot update safely because packages have conflicting dependencies. Package @angular/platform-browser would need to match both versions "7.2.15" and "8.2.6, which are not compatible.
Cannot update safely because packages have conflicting dependencies. Package @angular/platform-browser would need to match both versions "7.2.15" and "8.2.6, which are not compatible.

what's going on ?

[Hunta]

In my case the version of @angular/compiler-cli was different from @angular/core. Installing the same compiler-cli version as core resolved my issue.

[idanb007]

In my case the version of @angular/compiler-cli was different from @angular/core. Installing the same compiler-cli version as core resolved my issue.

Hi
Can you please give us full steps how doing it safely in IONIC 3 ?

[Hunta]

In my case the version of @angular/compiler-cli was different from @angular/core. Installing the same compiler-cli version as core resolved my issue.

Hi
Can you please give us full steps how doing it safely in IONIC 3 ?

So I just noted the version of my angular-core from package.json then ran
npm install @angular/[email protected]

[Ludplay]

My case was similar to @Hunta 's. But I did a little bit more changes.
The problem was the incompatibility between current angular/ionic cli's version and angular/ionic app's version.

Steps to solve:
1) Create a new project with ionic version 3, then compare the files packages.json.
ionic start Ionic3Project blank --type=ionic-angular

2) Inside Ionic3Project folder, build android
ionic cordova build android --prod

3) Open the packages.json of your main project and change the following versions of dependencies:
"@angular/*"
"@ionic-native/*"
"rxjs"
Also, replace the "scripts" part.

4) Delete your node_modules folder.

5) Delete your platform android folder (the entire platform folder or just android folder).

6) Run npm install

7) Add platform android
ionic cordova platform add android

8) Build your app again
ionic cordova build android --prod

After follow these steps, I could build my app again.

Obs.: It's possible you got some issues related to plugins between these steps. In this case, you might need re-install the plugin(s). Do it and keep those steps in mind. Try to remove and re-add android after re-install the plugins.

[TobiSteelatrakts]

In my case the version of @angular/compiler-cli was different from @angular/core. Installing the same compiler-cli version as core resolved my issue.

Hi
Can you please give us full steps how doing it safely in IONIC 3 ?

So I just noted the version of my angular-core from package.json then ran
npm install @angular/[email protected]

This solved it bigtime ...was on this the whole night

[sonicwong]

In my case the version of @angular/compiler-cli was different from @angular/core. Installing the same compiler-cli version as core resolved my issue.

Hi
Can you please give us full steps how doing it safely in IONIC 3 ?

So I just noted the version of my angular-core from package.json then ran
npm install @angular/[email protected]

I noted that new project come with @angular @v5.2.11,
so which version of compiler-cli should we use?

"@angular/compiler": "5.2.11"
"@angular/compiler-cli": "^8.2.11"

[Hunta]

"@angular/compiler": "5.2.11"
"@angular/compiler-cli": "^8.2.11"

Have you tried setting all the angular/xxx to 5.2.11 ?

[sonicwong]

@hunta
yes, set all to 5.2.11 have success in create production apk.

but i found that when i use with native plugin (media) to play mp3. Sound come out in debug build, but no sound in production build.

[Hunta]

but i found that when i use with native plugin (media) to play mp3. Sound come out in debug build, but no sound in production build.

To be clear, are you still seeing the above error after setting all the angular/xxx versions to be the same?

Does not sound to me as if you're issue is related but I have insufficient info.

I can see several threads re: Native sound issues in this forum if none of them are relevant then
Id suggest starting a new thread and include your Ionic version, plugin details and what native platform, android / IOS, is giving you hassles.

[sonicwong]

@Hunta
I just create a blank new project with media native plugin.
when I run "npm install @angular/[email protected]", I got your same error message when build a production file.
when I run "npm install @angular/[email protected]", build error gone but mp3 fail to play.

here is my package.json:

{
"name": "myApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/cli": "^8.3.12",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "^8.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "~4.20.0",
"@ionic-native/media": "^4.20.0",
"@ionic-native/splash-screen": "~4.20.0",
"@ionic-native/status-bar": "~4.20.0",
"@ionic/storage": "2.2.0",
"cordova-android": "^8.1.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.2",
"cordova-plugin-media": "^5.0.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-res": "^0.8.0",
"ionic-angular": "3.9.5",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sharp": "^0.23.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.2",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-media": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}

[Hunta]

when I run "npm install @angular/[email protected]", I got your same error message when build a production file.

If its a new project, try changing all @angular/xxx versions to 8.x.x