Cannot build using Ionic v3 webpack --prod

Hey there. Seems to be an error resolving your module source code when compiling using Webpack in Ionic 3 projects:

[18:02:07]  ionic-app-script task: "build" 
[18:02:07]  Error: ./~/ngx-uploader/src/ngx-uploader/module/ngx-uploader.module.ts Module build failed: TypeError: 
            Cannot read property 'content' of undefined at Object.optimizationLoader 
            (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
            at Object.loader 
            (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
            @ ./src/pages/manage-event-pairings/manage-event-pairings.module.ngfactory.ts 33:0-85 @ ./src lazy @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ 
            ./src/app/main.ts,./~/ngx-uploader/src/ngx-uploader/directives/ng-file-drop.directive.ts Module build 
            failed: TypeError: Cannot read property 'content' of undefined at Object.optimizationLoader 
            (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
            at Object.loader 
            (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
            @ ./src/pages/manage-event-pairings/manage-event-pairings.ngfactory.js 31:0-92 @ 
            ./src/pages/manage-event-pairings/manage-event-pairings.module.ngfactory.ts @ ./src lazy @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ 
            ./src/app/main.ts,./~/ngx-uploader/src/ngx-uploader/directives/ng-file-select.directive.ts Module build 
            failed: TypeError: Cannot read property 'content' of undefined at Object.optimizationLoader 
            (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
            at Object.loader 
            (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
            @ ./src/pages/manage-event-pairings/manage-event-pairings.ngfactory.js 40:0-94 @ 
            ./src/pages/manage-event-pairings/manage-event-pairings.module.ngfactory.ts @ ./src lazy @ 
            ./~/ionic-angular/util/ng-module-loader.js @ ./src/app/app.module.ngfactory.js @ ./src/app/main.ts 
Error: ./~/ngx-uploader/src/ngx-uploader/module/ngx-uploader.module.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
    at Object.loader (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
 @ ./src/pages/manage-event-pairings/manage-event-pairings.module.ngfactory.ts 33:0-85
 @ ./src lazy
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./~/ngx-uploader/src/ngx-uploader/directives/ng-file-drop.directive.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
    at Object.loader (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
 @ ./src/pages/manage-event-pairings/manage-event-pairings.ngfactory.js 31:0-92
 @ ./src/pages/manage-event-pairings/manage-event-pairings.module.ngfactory.ts
 @ ./src lazy
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts,./~/ngx-uploader/src/ngx-uploader/directives/ng-file-select.directive.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
    at Object.loader (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
 @ ./src/pages/manage-event-pairings/manage-event-pairings.ngfactory.js 40:0-94
 @ ./src/pages/manage-event-pairings/manage-event-pairings.module.ngfactory.ts
 @ ./src lazy
 @ ./~/ionic-angular/util/ng-module-loader.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts
    at BuildError.Error (native)
    at new BuildError (/Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /Users/lb3/projects/maritlabs/marit-mtg-ionic-web/node_modules/@ionic/app-scripts/dist/preprocess.js:18:21
    at process._tickCallback (internal/process/next_tick.js:103:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Looks like it is having trouble finding your compiled source JS file:

@ionic/app-scripts/dist/webpack/optimization-loader.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true }); 
var path_1 = require("path");
var helpers_1 = require("../util/helpers");
var logger_1 = require("../logger/logger");
/* This loader is purely for caching stuff */
function optimizationLoader(source, map, webpackContex) {
    var context = helpers_1.getContext();
    var callback = webpackContex.async();
    var absolutePath = path_1.resolve(path_1.normalize(webpackContex.resourcePath));
    console.log("Absolute path", absolutePath)
    if (path_1.extname(absolutePath) === '.ts') {
        var jsFilePath = helpers_1.changeExtension(absolutePath, '.js');
        var jsFile = context.fileCache.get(jsFilePath);
        source = jsFile.content; // < ---- ****** THIS IS WHERE IT CRASHES ******
    }   
    logger_1.Logger.debug("[Webpack] optimization: processing the following file: " + absolutePath);
    if (helpers_1.isSrcOrIonicOrIonicDeps(absolutePath)) {
        logger_1.Logger.debug("[Webpack] optimization: Caching the following file: " + absolutePath);
        context.fileCache.set(webpackContex.resourcePath, { path: webpackContex.resourcePath, content: source }); 
    }   
    return callback(null, source, map);
}
exports.optimizationLoader = optimizationLoader;

[jkuri]

resolved in ngx-uploader@3.3.10.

[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/app-scripts@2.1.4. I also tried @ionic/app-scripts@2.0.2 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/common@4.3.6
• Ionic-Angular@3.6.1
• @angular/cli@1.4.3

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