Ionic-app-scripts: Unable to build with 0.0.45 - Cannot read property 'content' of undefined

[tonyawad88]

Short description of the problem:

Hello, After upgrading to app-script 0.0.45 I am getting the following error:
/.../src/model/conversation.ts:1 Uncaught Error: Module build failed: TypeError: Cannot read property 'content' of undefined(…)

I followed the upgrade steps in the readme. I also upgraded my scripts section:

"scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
...
"devDependencies": {
    "@ionic/app-scripts": "0.0.45",
    "typescript": "^2.0.6"
  },

Conversation Class

export class Conversation{
    date: string;
    from: string;
    msg:string;
    constructor(){}
    Set(from:string,message:string){
        this.date = new Date().toUTCString();
        this.from = from;
        this.msg = message;
    }
}

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

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

[vazad28]

Same issue for me too

[danbucholtz]

@vazad28, @tonyawad88, any idea how to recreate? Can you make a minimal repository that shows the issue so I can fix it?

Thanks,
Dan

[tonyawad88]

I will try and put something together tomorrow.. I basically tried upgrading from 0.0.39 to 0.0.45 following the steps in the changelog for: 0.0.42 (2016-11-09) with no luck. Creating a new RC3 from scratch is fine but I still get that error when upgrading an existing project running 0.0.39 to 0.0.4x (it fails on all versions > 0.0.39).

[danbucholtz]

Seems strange to me. I'm guessing the content null pointer is due to it expecting a file to be in memory that is not in memory. Hmm. Please let me know if you can recreate. I have not seen this before.

Thanks,
Dan

[ivanovevgeny]

@danbucholtz

Ionic 2 Module Build Failed

Ionic serve failing in example projects after fresh install

[abomadi]

@danbucholtz i have the same issue, what happened i have moved from 0.36 to 0.44 or 0.45 (same issue) and updated to rc3, this is on mac, i am still facing the same issue, please let me know how can i help to reproduce as i cant view my code source since it's a full project.

this is console output
Error: Module build failed: TypeError: Cannot read property 'content' of undefined
at Object.typescriptSourcemapLoaderMemory (/Users/user/Desktop/project/Src/node_modules/@ionic/app-scripts/dist/webpack/typescript-sourcemap-loader-memory.js:21:34)

[danbucholtz]

@abomadi,

Can you add some logging around that file and try to identify what's going on? /Users/user/Desktop/project/Src/node_modules/@ionic/app-scripts/dist/webpack/typescript-sourcemap-loader-memory.js is the file, line 21, column 34.

Thanks,
Dan

[abomadi]

@danbucholtz after investigating and created a new project with the same settings successfully i figured that the cause was from calling a service inside my project with a Capital Letter instead of small letter caused this issue, as this is a very generic error i get in the console; is this normal ? how can the console show more detailed errors on such issues, how can i prevent case sensitive when calling other classes ?

[danbucholtz]

@abomadi, yes, you could comment out declare module '*' in `src/declaration.d.ts. The way we have it right now is really a hack to account for some limitations of Typescript.

Thanks,
Dan

[PabloFNK]

The same thing is hapening to me. Any idea?

[83pat]

Hi,
Same problem with the command 'ionic serve' only (ok with 'ionic build', 'ionic run') :
\c:\git\swMobile\src\configuration\flight-utils.ts:1Uncaught Error: Module build failed: TypeError: Cannot read property 'content' of undefined(…)
(anonymous function) @ \c:\git\swMobile\src\configuration\flight-utils.ts:1
(anonymous function) @ main.js:3289
__webpack_require__ @ main.js:20
(anonymous function) @ \c:\git\swMobile\src\app\app.module.ts:4
(anonymous function) @ main.js:3263
__webpack_require__ @ main.js:20
(anonymous function) @ \c:\git\swMobile\src\app\main.dev.ts:2
(anonymous function) @ main.js:4581
__webpack_require__ @ main.js:20
(anonymous function) @ main.js:64
(anonymous function) @ main.js:67

Error detail:
throw new Error("Module build failed: TypeError: Cannot read property 'content' of undefined
at Object.typescriptSourcemapLoaderMemory (C:\git\swMobile\node_modules\@ionic\app-scripts\dist\webpack\typescript-sourcemap-loader-memory.js:21:34)");
//////////////////
// WEBPACK FOOTER
// ./src/configuration/flight-utils.ts
// module id = 461
// module chunks = 0

My flight-utils file contains an export class with static metods only. I really think that is (a part of) the cause. The problem is reproduced with any "static" class, wherever it is used (app.module, components, services...).

Env : ionic rc3, app-scripts 0.0.45.
No problem with my previous env : ionic rc1, app-scripts 0.0.33.

Hope this may help.

[pivalig]

Hi all.
In my case was a problem with differences between file and class names.
I have file named FoodHouseService.ts with class FoodhouseService. so typescript-sourcemap-loader-memory.js couldn't find file by classname. It use casesensitive search.

It works great on the Mac but won't on windows. Seems to be a windows issue.
You can just rename filename to be exactly as a class name inside
Good luck

PS
to see which file has an issue i'v added few lines in typescript-sourcemap-loader-memory.js file
line : 21
if (!javascriptFile) {
console.log(javascriptPath)
}

[dominikstrasser]

Hey.
I tried to import a typescript file from node_modules (i'm sharing code between projects).
this works great for the angular-cli but apparently not for ionic.
Solution: i have to create the .js file next to my .ts file.
hope this helps :)

[tobiasfiechter]

I got the same problem and @dominikstrasser s solution seems to work but I don't think this is nice like that....

[83pat]

Hi,
The @dominikstrasser s solution works for me but I cannot apply it for the whole project.
Thanks to all.

[tonyawad88]

It also worked for me using @dominikstrasser 's "hack" :-) . It is very weird adding the empty .js file makes it work.
@pivalig I am running into this issue on Mac, I doesn't seem to be related to OS.

@danbucholtz do we have any idea what might be the cause? Not sure if the folder structure matters, but I have a "model" folder inside "src" and my "conversation.ts" is in the "model" folder. The class definition is as described above.

Please let me know if you need more or if there's anything I can do to help.

[danbucholtz]

@tonyawad88,

Hmm, I'm not sure. In general it is not a great idea to modify the directory structure if possible. We do officially support it, but often times it's not done correctly and all of the proper config values aren't set.

Anyone have an idea how to recreate this? This has been baffling me for a bit. I cannot recreate it on PC or Mac.

Thanks,
Dan

[dominikstrasser]

@danbucholtz
In my case i've got a regular ionic projekt.
i npm install a second project (which is typescript only - no js bundles, no transpiled JS) in my ionic project.
the second project contains interfaces, enums, constants... which i share between two projects (node server and ionic app).
when i import interfaces -> no problem.
when i import constants --> Cannot read property 'content' of undefined.

[danbucholtz]

Here's what you would need to do:

1. Create the library of Typescript for Ionic
2. Transpile the Typescript to Javascript
3. Use NPM (or NPM link) to get your library in node_modules
4. Code as normal

Thanks,
Dan

[dominikstrasser]

yeah i know :)
i just wanted to tell you how to reproduce the issue ;)
and i don't know if other people who have this issue also have the same cause.
but thanks anyway 👍

[danbucholtz]

Sounds good. Yeah, we can't support Typescript from a third party library at this time. It's gotta be converted to Javascript because that is how libraries are distributed 99% of the time.

Thanks,
Dan

[ivanovevgeny]

I recreate the issue with next steps:

• npm install -g cordova ionic@latest
• ionic start --v2 ionic2appscriptbug blank
• ionic2appscriptbug>npm install @ionic/app-scripts@latest --save-dev
• ionic2appscriptbug>ionic serve
  

BUT!

I noticed that me Node version is 6.2.1 and install latest version 6.9.2.
After run
npm cache clean
npm install -g cordova ionic
ionic start --v2 ionic2appscriptbug blank
ionic2appscriptbug>npm install @ionic/app-scripts@latest --save-dev
ionic serve

And it all worked!

Adding some pages and providers not found error 🙌

[richardthombs]

@ivanovevgeny Not sure what issue you were experiencing here, but I think the underlying cause was different to mine, but they both generate the same error.

If what @danbucholtz says is true, then I'm getting this error because I'm trying to load an npm module which is pure typescript and hasn't been transpiled to javascript as I was expecting ionic to do that.

@danbucholtz , do you know if support for typescript npm packages on the roadmap anytime soon?

[dyske]

For us, the issue was simply letter-case mismatching in app.module.ts.

import { PasswordPage } from '../pages/users/PassWord';

would cause the error, if the actual file is all lower-case, i.e., 'password.ts'

It's not about the class name matching the file name. It's about the letter casing of the file name matching the actual file names.

If the file name is "file-name.ts", you must have it 'file-name'. You cannot have it, "File-Name".

[danbucholtz]

@richardthombs, no it's not on the roadmap. NPM and node_modules are distribution channels for javascript, not Typescript. The package should contain javascript and .d.ts type definition files.

Thanks,
Dan

[PabloFNK]

@dyske Cool! That was my issue too. It took me some time to finde where I was importing misstyping a couple of classes, but it fixes it.

It looks like the scripts weren't case sensitive but now they are.

[danbucholtz]

This should be resolved in 1.0.0. Please let me know if it's not.

Thanks,
Dan

[demns]

@danbucholtz I'm not sure about the route cause (trying to figure it out for some time already, sorry about that), but it's still present on 1.1.0 with
"ionic_experimental_manual_treeshaking": true,
"ionic_experimental_purge_decorators": true

[18:41:16] ionic-app-scripts 1.1.0
[18:41:16] build prod started ...
[18:41:16] clean started ...
[18:41:16] clean finished in 6 ms
[18:41:16] copy started ...
[18:41:16] ngc started ...
[18:41:29] ngc finished in 12.87 s
[18:41:29] preprocess started ...
[18:41:29] optimization started ...
[18:41:30] copy finished in 13.46 s
[18:41:32] optimization failed: Cannot read property 'content' of undefined
[18:41:32] preprocess failed: Cannot read property 'content' of undefined
[18:41:32] ionic-app-script task: "build"
[18:41:32] Error: Cannot read property 'content' of undefined

with package.json like this
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.1",
"ionic-native": "2.5.1",
"ionicons": "3.0.0",
"localforage": "1.4.3",
"lodash": "4.17.4",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.0",
"sw-toolbox": "^3.6.0",
"typescript": "2.2.1"
},

is there any way to get additional info of where is it going down? Thanks!

[lopezhansel]

Possible Solution

I believe a webpack plugin decided to no longer accepts my declaration files that had the extension .d.ts. I had a file with only type annotations named user.d.ts and I was forced to rename it to user.ts. This allowed me to get passed the error.

More Insight

I had the same error where Module build failed: TypeError: Cannot read property 'content' of undefined.

I didn't change any of my code, this only happened after I updated @ionic/[email protected]. I also tried @ionic/[email protected] and got the same error.

While ionic-app-scripts serve worked flawlessly, ionic-app-scripts build --prod --release stopped working.

"Properly" downgrading or updating to different versions Angular, Ionic-Angular,and @angular/cli didn't fix the error. I was using the current versions.

• @angular/[email protected]
• [email protected]
• @angular/[email protected]

Ionic Info:

@ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.3
    Node              : v7.4.0
    npm               : 4.0.5
    OS                : Windows 10

[totovelo10]

I encountered this problem. this was due to one of my modules it was in a folder called newPass and i was written newpass in app.modules
Finally, I changed the name of the folder to newpass
Thanks to @dyske