Cannot find module './ion-app_8.entry.js'

I copied a project created in MAC to Windows and run npm i after deleting:

  • node_modules folder
  • .angular folder
  • package-lock.json

This project uses custom-webpack and it is supposed to work with electron and android.

The dependencies are installed correctly and the project builds just fine.

However, when I add my electron or android platform (capacitor) I get the following error in both of them with a blank screen:
Cannot find module './ion-app_8.entry.js'

Commands run for Android Platform:

  • npx cap add android
  • set TARGET=web
  • ionic build
  • ionic capacitor copy android
  • ionic capacitor open android

Ionic Info:

Summary
Ionic:

   Ionic CLI                     : 6.20.4 (C:\Users\david\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.3.8
   @angular-devkit/build-angular : 14.2.10
   @angular-devkit/schematics    : 14.2.10
   @angular/cli                  : 14.2.10
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.5.0
   @capacitor/android : 4.5.0
   @capacitor/core    : 4.5.0
   @capacitor/ios     : 4.5.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.1

System:

   NodeJS : v19.1.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.19.3
   OS     : Windows 10

package.json

Summary
{
  "name": "TestApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@capacitor-community/electron": "^4.1.2",
    "@capacitor/android": "^4.5.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/core": "4.5.0",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/ios": "^4.5.0",
    "@capacitor/keyboard": "4.1.0",
    "@capacitor/status-bar": "4.1.0",
    "@ionic/angular": "^6.1.9",
    "electron": "^21.3.0",
    "ionicons": "^6.0.3",
    "ngx-electron": "^2.2.0",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^14.1.0",
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular-eslint/builder": "^14.0.0",
    "@angular-eslint/eslint-plugin": "^14.0.0",
    "@angular-eslint/eslint-plugin-template": "^14.0.0",
    "@angular-eslint/template-parser": "^14.0.0",
    "@angular/cli": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.2.12",
    "@angular/language-service": "^14.0.0",
    "@capacitor/cli": "4.5.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "electron-packager": "^17.1.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project"
}

angular.json

Summary
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": ["src/theme/variables.scss", "src/global.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "ci": {
              "progress": false
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "development": {
              "browserTarget": "app:build:development"
            },
            "ci": {
              "progress": false
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": ["src/theme/variables.scss", "src/global.scss"],
            "scripts": []
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@ionic/angular-toolkit"
    ],
    "analytics": false
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

webpack.config.js

Summary
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

var target = process.env.TARGET ? process.env.TARGET : 'electron-renderer';

module.exports = {
    plugins: [
        new NodePolyfillPlugin({
            excludeAliases: ["console"]
        })
    ],
    resolve: { extensions: ['', '.js', '.ts'] },
    target: target
}

tsconfig.app.json

Summary
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [ "node" ],
    "typeRoots": [ "../node_modules/@types" ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json

Summary
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018", 
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

I noticed that the cause of the problem is the custom webpack set in angular.json:

	"builder": "@angular-builders/custom-webpack:browser",

If I use the standard one it shows the page.

The problem is that I need to use this webpack config to add externals to it as I need to reference node modules that will be used in electron.

Uninstall the old ionic-native package. You run into this error because you installed the ionic -native and @ionic-native/core package.

Read the upgrade guides before you update your package.json file
Regards,
Rachel Gomez