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!

[AlGantori]

after several years with Ionic3 I am still a complete novice

Here is my configuration

I have tried a bunch of things while hunting stackoverflow and my own logs so I am not 100% what fixed the problem The very last thing I did is the following line

npm install [email protected] --save-dev

• I think the above means: bring my project TS ^3.9.10 to be the same as my current global TS version 4.3.5
• Also clearing the cache in my cloudflare.com to ensure I am indeed seeing what I am uploading to my server.
• I really did not want to downgrade I think @types/youtube and/or @types/nodes wants something like TS 3.7

I have been able to build APK and run it just fine, however when I tried upload my PWA (ie. the web app) that's when I discovered this weird (deja vue) error Uncaught Error: Cannot find module "."

I will probably revert from @ghost ridiculously huge ionic build line to my original

ionic cordova build browser --prod --release

Please help me with this and Thank you.

Perhaps someone can help me clarify what is the difference between these two build folders

• ./www/ (NOTE: which ever build script owns this does not pickup changes to my index.html ????) and
• ./platforms/browser/www/ (the index.html here is getting refreshed).

my current package.json looks like this

    "dependencies": {
        "@angular/common": "5.0.3",
        "@angular/compiler": "5.0.3",
        "@angular/compiler-cli": "5.0.3",
        "@angular/core": "5.0.3",
        "@angular/forms": "5.0.3",
        "@angular/platform-browser": "^5.0.3",
        "@angular/platform-browser-dynamic": "5.0.3",
        "@ionic-native/android-full-screen": "^4.20.0",
        "@ionic-native/app-version": "^4.20.0",
        "@ionic-native/clipboard": "^4.20.0",
        "@ionic-native/core": "4.5.2",
        "@ionic-native/document-viewer": "^4.7.0",
        "@ionic-native/file": "^4.7.0",
        "@ionic-native/file-transfer": "^4.7.0",
        "@ionic-native/in-app-browser": "4.5.2",
        "@ionic-native/ionic-webview": "^5.36.0",
        "@ionic-native/social-sharing": "4.5.2",
        "@ionic-native/splash-screen": "^4.7.0",
        "@ionic-native/status-bar": "4.5.2",
        "@ionic-native/toast": "4.6.0",
        "@ionic/pro": "1.0.16",
        "@ionic/storage": "2.1.3",
        "@types/youtube": "0.0.46",
        "archiver": "^5.3.1",
        "child_process": "^1.0.2",
        "clipboard-js": "0.3.3",
        "com.verso.cordova.clipboard": "https://github.com/VersoSolutions/CordovaClipboard.git",
        "cordova-browser": "5.0.3",
        "cordova-clipboard": "~1.0.0",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-file": "^6.0.1",
        "cordova-plugin-file-transfer": "^1.7.1",
        "cordova-plugin-fullscreen": "^1.2.0",
        "cordova-plugin-inappbrowser": "~1.7.1-dev",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-whitelist": "^1.3.3",
        "cordova-plugin-x-socialsharing": "~5.1.6",
        "cordova-plugin-x-toast": "~2.6.0",
        "cordova-sqlite-storage": "~2.0.3",
        "danielsogl-cordova-plugin-clipboard": "1.0.2",
        "howler": "^2.2.3",
        "ionic-angular": "3.9.2",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "node-apk": "^1.1.1",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "url-exist": "^3.0.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.2.4",
        "@types/node": "^9.6.61",
        "cordova-android": "^10.1.2",
        "cordova-plugin-apkupdater": "^4.0.0",
        "cordova-plugin-app-version": "^0.1.14",
        "cordova-plugin-ionic-webview": "^4.1.3",
        "tslint": "^5.10.0",
        "tslint-ionic-rules": "0.0.16",
        "typescript": "^4.3.5",
        "viewport-units-buggyfill": "0.6.2"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard",
        "cordova-plugin-x-socialsharing"
    ],
    "cordovaPlatforms": [
        {
            "platform": "android",
            "version": "",
            "locator": "android"
        },
        {
            "platform": "browser",
            "version": "",
            "locator": "browser"
        }
    ],
    "description": "UPS.ion: project",
    "config": {
        "ionic_source_map": "source-map",
        "ionic_copy": "./copy.config.js"
    },
    "cordova": {
        "plugins": {
            "cordova-sqlite-storage": {},
            "cordova-plugin-x-toast": {},
            "cordova-clipboard": {},
            "cordova-plugin-file-transfer": {},
            "cordova-plugin-file": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {
                "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
            },
            "com.verso.cordova.clipboard": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-x-socialsharing": {},
            "cordova-plugin-fullscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-apkupdater": {},
            "cordova-plugin-app-version": {}
        },
        "platforms": [
            "browser"
        ]
    }
}

My package.json has tons of "vulnerabilities" (somehow I hate this word) but I keep cruising along.

Sorry for the details, but I have to spill my pain after this much "time-wasting" searches.