search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

Webpack can't load ionic-angular, throws: Uncaught Error: Cannot find module "." #14333

Closed Murilo-Perrone closed 6 years ago

Murilo-Perrone commented 6 years ago

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: A runtime exception is being thrown when webpack tries to load ionic-angular module:

vendor.js:15833 Uncaught Error: Cannot find module "."
    at webpackMissingModule (vendor.js:15833)
    at vendor.js:15833
    at Object.<anonymous> (vendor.js:15842)
    at __webpack_require__ (vendor.js:55)
    at Object.webpackEmptyContext.keys (main.js:34381)
    at __webpack_require__ (vendor.js:55)
    at webpackJsonpCallback (vendor.js:26)
    at main.js:1

This exception originates from the auto-generated code below in main.js:

// EXTERNAL MODULE: ./node_modules/ionic-angular/umd/index.js
var umd = __webpack_require__(3);

PS: Got the code above after switching the target into es2017 in tsconfig.json just to make it readable and better analyze the error.

The exception occurs whenever I run my application using any cordova platform (browser/android/ios) plus the --aot option (or --prod). Yet ionic serve --aot works fine, as well as all dev builds.

Expected behavior: The exception was thrown after 8 other modules had been successfully loaded and right before my first user module got a chance of being loaded. That makes me think it is a problem with this particular module (ionic-angular).

Steps to reproduce: I use a custom webpack.config.js, which relies in tsconfig-paths-webpack-plugin plugin for prod setting:

const path = require('path');
const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const customDevConfig = {
  resolve: {
    modules: [path.resolve('.'), path.resolve('..'), path.resolve('node_modules')],
  },
};
const customProdConfig = {
  resolve: {
    plugins: [new TsConfigPathsPlugin({ logLevel: 'info', logInfoToStdOut: true, })]
  },
};
var rules = [{
  test: /\.scss$/,
  use: [{
      loader: "style-loader"
  }, {
      loader: "css-loader"
  }, {
      loader: "sass-loader",
      options: {
          includePaths: [".", ".."]
      }
  }]
}];
module.exports = {
  dev: webpackMerge(webpackDefault.dev, customDevConfig),
  prod: webpackMerge(webpackDefault.prod, customProdConfig),
  rules: webpackMerge(webpackDefault.rules, rules),
}

Here are my dependencies in package.json:

  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@ionic-native/app-version": "^4.5.3",
    "@ionic-native/barcode-scanner": "^4.5.3",
    "@ionic-native/base64": "^4.5.3",
    "@ionic-native/camera": "^4.5.3",
    "@ionic-native/core": "^4.5.3",
    "@ionic-native/couchbase-lite": "^4.5.3",
    "@ionic-native/device": "^4.5.3",
    "@ionic-native/fcm": "^4.7.0",
    "@ionic-native/file": "^4.5.3",
    "@ionic-native/file-transfer": "^4.5.3",
    "@ionic-native/geolocation": "^4.5.3",
    "@ionic-native/image-resizer": "^4.5.3",
    "@ionic-native/in-app-browser": "^4.5.3",
    "@ionic-native/keyboard": "^4.5.3",
    "@ionic-native/media": "^4.5.3",
    "@ionic-native/media-capture": "^4.5.3",
    "@ionic-native/network": "^4.5.3",
    "@ionic-native/screen-orientation": "^4.5.3",
    "@ionic-native/splash-screen": "^4.5.3",
    "@ionic-native/status-bar": "^4.5.3",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "^7.2.2",
    "@ngx-translate/http-loader": "^2.0.1",
    "@stomp/stompjs": "^4.0.2",
    "@types/node": "^9.4.6",
    "angular2-text-mask": "^8.0.4",
    "bcryptjs": "^2.4.3",
    "cep-promise": "^3.0.0",
    "com.lampa.startapp": "^0.1.4",
    "cordova-android": "6.4.0",
    "cordova-android-support-gradle-release": "^1.3.0",
    "cordova-browser": "5.0.3",
    "cordova-ios": "4.5.4",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-email-composer": "^0.8.15",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-inappbrowser": "^1.7.2",
    "cordova-plugin-media": "^5.0.2",
    "cordova-plugin-network-information": "^1.3.4",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-swift-support": "^3.1.1",
    "cordova-plugin-vuforia": "^3.2.1",
    "cordova-plugin-vuforia-sdk": "^6.0.117",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.0",
    "couchbase-lite-phonegap-plugin": "^1.4.1",
    "cpf_cnpj": "^0.2.0",
    "es6-promise-plugin": "^4.2.2",
    "info.protonet.imageresizer": "^0.1.1",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic2-rating": "^1.2.2",
    "ionicons": "3.0.0",
    "moment": "^2.18.1",
    "npm": "^5.7.1",
    "rxjs": "^5.4.3",
    "sha256": "^0.2.0",
    "sprintf-js": "^1.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "@ionic/cli-plugin-proxy": "1.5.8",
    "awesome-typescript-loader": "^3.5.0",
    "ionic": "3.20.0",
    "json-loader": "^0.5.7",
    "tsconfig-paths-webpack-plugin": "^3.0.3",
    "tslint": "^5.9.1",
    "tslint-ionic-rules": "0.0.12",
    "typescript": "2.7.2",
    "webpack": "^3.8.1",
    "webpack-merge": "^4.1.2"
  },
  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_copy": "./src/config/copy.config.js",
    "ionic_sass": "./src/config/sass.config.js",
    "ionic_webpack": "./src/config/webpack.config.js",
    "ionic_ngc": "./src/config/ngc.config.js",
    "enable_lint": false
  },

Didn't work with latest angular 5 and rxjs 5.5 either. I downgraded because my application became less responsive. I have tried later version of webkack too (3.11 and 4.5), unsuccessfully.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below): Error occuring on MacOs and on Windows. Info from latest tests:

cli packages:

    @ionic/cli-plugin-proxy : 1.5.8
    @ionic/cli-utils        : 1.19.2
    ionic (Ionic CLI)       : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.4.0 browser 5.0.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.3.0
    OS                : Windows 7

Any test suggestions are very welcome.

Murilo-Perrone commented 6 years ago

Fixed it by adjusting my configuration. Replaced the ts loader plugin by an simple alias:

const customProdConfig = {
  resolve: {
    //plugins: [new TsConfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
    alias: { 'src': path.resolve('src') },
  },
};

I guess it doesn't make sense to use this plugin with AOT.

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.