Ionic-cli: Cannot find module “.” after --prod --relase build in ionic 3

[Eddy118]

I am trying to make my prod build work I am getting this error

Cannot find module "."
    at vendor.js:1
    at vendor.js:1
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at Object.322 (main.js:1)
    at e (vendor.js:1)
    at window.webpackJsonp (vendor.js:1)
    at main.js:1

screen:1 Failed to load resource: the server responded with a status of 404 (Not Found)

After doing some research I found the type script version 3.2.3 might be causing this and I should downgrade to [email protected] but When I downgrade my version it gives me this error
The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 2.7.2 was found instead

My Package.json is

{
  "name": "HelloWorld",
  "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": "7.2.2",
    "@angular/common": "7.2.2",
    "@angular/compiler": "7.2.2",
    "@angular/compiler-cli": "^7.2.12",
    "@angular/core": "7.2.2",
    "@angular/forms": "7.2.2",
    "@angular/http": "7.2.2",
    "@angular/platform-browser": "7.2.2",
    "@angular/platform-browser-dynamic": "7.2.2",
    "@ionic-native/base64": "^5.3.0",
    "@ionic-native/core": "~5.0.0",
    "@ionic-native/http": "^5.2.0",
    "@ionic-native/screen-orientation": "^5.3.0",
    "@ionic-native/splash-screen": "~5.3.0",
    "@ionic-native/status-bar": "~5.3.0",
    "@ionic/storage": "2.2.0",
    "@types/html2canvas": "0.0.35",
    "@types/lodash": "^4.14.122",
    "angular2-color-picker": "^1.3.1",
    "angular2-draggable": "^2.2.1",
    "angular2-uuid": "^1.1.1",
    "com-badrit-base64": "0.2.0",
    "cordova-android": "^8.0.0",
    "cordova-browser": "5.0.4",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "es6-promise-plugin": "^4.2.2",
    "html2canvas": "^1.0.0-alpha.12",
    "ionic-angular": "3.9.2",
    "ionic-long-press": "^1.5.0",
    "ionicons": "4.5.5",
    "lodash": "^4.17.11",
    "mobx": "^5.0.3",
    "mobx-angular": "^3.0.1",
    "ng-socket-io": "^0.2.4",
    "ngx-color-picker": "^7.3.1",
    "rxjs": "6.0.0",
    "rxjs-compat": "^6.2.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.3",
    "@ionic/cli-plugin-cordova": "1.6.2",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "@types/node": "~8.9.4",
    "cordova-plugin-advanced-http": "2.0.5",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^2.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "ts-node": "~5.0.1",
    "typescript": "^3.1.1"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-screen-orientation": {},
      "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": {},
      "cordova-plugin-advanced-http": {}
    },
    "platforms": [
      "android",
      "browser"
    ]
  }
}

ng --version details

Angular CLI: 6.1.3
Node: 10.16.0
OS: win32 x64
Angular: 7.2.2
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.3 (cli-only)
@angular-devkit/build-optimizer   0.0.35
@angular-devkit/core              0.7.3 (cli-only)
@angular-devkit/schematics        0.7.3 (cli-only)
@angular/compiler-cli             7.2.15
@schematics/angular               0.7.3 (cli-only)
@schematics/update                0.7.3 (cli-only)
rxjs                              6.0.0
typescript                        2.8.3
webpack                           3.8.1

Any Help Would be appreciated

[sta55en]

I'm seeing the same thing. I'm using Capacitor instead of Cordova.

It looks like Ionic is extremely sensitive to versioning here. This is my setup:

Ionic:

   Ionic CLI          : 5.4.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.8
   @ionic/app-scripts : 3.2.4

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Utility:

   cordova-res : 0.6.0 (update available: 0.7.0)
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   NodeJS : v10.16.3 (/usr/local/Cellar/node/12.4.0/bin/node)
   npm    : 6.9.0
   OS     : macOS Catalina

And my dev dependencies are:

 "devDependencies": {
        "@capacitor/cli": "^1.2.1",
        "@ionic/app-scripts": "^3.2.4",
        "typescript": "2.9.2"
    },

When I change the version on TypeScript, I get general errors and can't even run in debug mode, when I change the version on @ionic/app-scripts, same story.

I suspect that there is some module that is being pulled in for production build optimisation that ins't being imported correctly or has a conflict, but I do not have the time to go and dig.

[LeonardoMoliveira]

Same problem here, can't downgrade typescript version since Firebase lib requires 3.x.x

[musla]

Same problem here, cannot downgrade typescript becuase of firebase lib.
Any solution? Perhaps some config of --prod --release build that would ignore certain optimization feature?

[ghost]

you just need to disable the AoT, from my experience. this is what I use:

--release --aot false --environment prod --output-hashing all --sourcemaps false --extract-css true --named-chunks false --build-optimizer true --minifyjs=true --minifycss=true --optimizejs=true

[NimaiMalle]

Wow. I've been searching for how to address this exact error for almost a week now. And I find a solution posted 19 minutes ago? That's amazing.
@oborudko thank you! I can now use TypeScript 3 (which some npm package type definitions now require) and make a --prod build!

[musla]

@oborudko @NimaiMalle thank you! How can I run prod build with aot=false?
When I do not put --prod flag to ionic build browser --release --verbose --aot false --environment prod, it is always building dev.

My @ionic/app-scripts is 3.2.4 and I am on ionic v3 (ionic-angular 3.9.2)

Thank you!

[NimaiMalle]

@musla I'm not an expert on this stuff at all, so I hope someone else comments as well.

Indeed, the build logs at the end say, "dev build finished", and I'm not sure what that means in terms of the output of the build. It might just be what gets printed if there's no explicit --prod flag.

I am currently looking at the "angularCompilerOptions" that can be specified in tsconfig.json. I just started looking at these, but I'm hoping that there's something more granular I can turn off or change which will let me use --prod.

Please share if anyone has any luck!

[giladrom]

Do we know if anyone with Ionic 4 is experiencing the same issue? This just started for me about a week ago and I haven't been able to resolve it so far (using Ionic 3).

[LeonardoMoliveira]

For me, the problem was ìonic build command to generate a release build. Use ionic build --optimizejs --minifycss --minifyjs command, hope it helps!