[SOLVE] - Ionic: Cannot find module “@ionic-native”

Ionic Framework ionic-v3
1

After upgrade from ionic 2 to ionic 3 and run

ionic serve

The browser show this message

Runtime Error
Cannot find module “@ionic-native”
Stack
Error: Cannot find module “@ionic-native”
at Object.43 (http://localhost:8100/build/main.js:2359:7)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.36 (http://localhost:8100/build/main.js:2087:101)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.119 (http://localhost:8100/build/main.js:228:95)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.54 (http://localhost:8100/build/main.js:2671:107)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.53 (http://localhost:8100/build/main.js:2484:91)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
Ionic Framework: 3.6.1
Ionic App Scripts: 2.1.4
Angular Core: 4.4.3
Angular Compiler CLI: 4.4.3
Node: 6.11.3
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

package.json

{
“name”: “app-name”,
“author”: “AuthorAPP”,
“homepage”: “https://www.website.com”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
“@angular/common”: “4.4.3”,
“@angular/compiler”: “4.4.3”,
“@angular/compiler-cli”: “4.4.3”,
“@angular/core”: “4.4.3”,
“@angular/forms”: “4.4.3”,
“@angular/http”: “4.4.3”,
“@angular/platform-browser”: “4.4.3”,
“@angular/platform-browser-dynamic”: “4.4.3”,
“@angular/platform-server”: “4.4.3”,
“@angular/tsc-wrapped”: “^4.4.3”,
“@ionic-native/app-rate”: “^4.2.1”,
“@ionic-native/core”: “^4.2.1”,
“@ionic-native/device”: “^4.2.1”,
“@ionic-native/geolocation”: “^4.2.1”,
“@ionic-native/in-app-browser”: “^4.2.1”,
“@ionic-native/in-app-purchase”: “4.2.1”,
“@ionic-native/keyboard”: “^4.2.1”,
“@ionic-native/native-geocoder”: “^4.2.1”,
“@ionic-native/network”: “^4.2.1”,
“@ionic-native/social-sharing”: “^4.2.1”,
“@ionic-native/splash-screen”: “^4.2.1”,
“@ionic-native/status-bar”: “^4.2.1”,
“@ionic/storage”: “2.0.1”,
“autoprefixer”: “^7.1.4”,
“cordova-android”: “~6.2.3”,
“cordova-ios”: “~4.5.1”,
“cordova-plugin-apprate”: “1.3.0”,
“cordova-plugin-console”: “1.1.0”,
“cordova-plugin-device”: “1.1.6”,
“cordova-plugin-dialogs”: “1.3.3”,
“cordova-plugin-globalization”: “~1.0.7”,
“cordova-plugin-inappbrowser”: “~1.7.1”,
“cordova-plugin-inapppurchase”: “~1.1.0”,
“cordova-plugin-nativegeocoder”: “~2.0.3”,
“cordova-plugin-network-information”: “~1.3.3”,
“cordova-plugin-splashscreen”: “~4.0.3”,
“cordova-plugin-statusbar”: “2.2.3”,
“cordova-plugin-whitelist”: “1.3.2”,
“cordova-plugin-x-toast”: “2.6.0”,
“crypto-js”: “^3.1.9-1”,
“ionic-angular”: “3.6.1”,
“ionic-plugin-keyboard”: “~2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “^5.1.1”,
“sw-toolbox”: “3.4.0”,
“zone.js”: “^0.8.4”
},
“devDependencies”: {
“@ionic/app-scripts”: “2.1.4”,
“typescript”: “2.1.5”
},
“cordovaPlugins”: [
“ionic-plugin-keyboard”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“cordova-plugin-apprate”,
“cordova-plugin-x-toast”,
“cordova-plugin-globalization”,
“cordova-plugin-network-information”,
“cordova-plugin-inapppurchase”
],
“cordovaPlatforms”: [
“ios”,
{
“platform”: “ios”,
“version”: “”,
“locator”: “ios”
}
],
“description”: “App description”,
“cordova”: {
“plugins”: {
“cordova-plugin-nativegeocoder”: {},
“cordova-plugin-apprate”: {},
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-dialogs”: {},
“cordova-plugin-globalization”: {},
“cordova-plugin-inappbrowser”: {},
“cordova-plugin-inapppurchase”: {},
“cordova-plugin-network-information”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-x-toast”: {},
“ionic-plugin-keyboard”: {}
},
“platforms”: [
“android”,
“ios”
]
}
}

after removed folder node_modules and execute npm install but the results is the same!

Any suggestions?

2

My first guess is that perhaps you have an import that references the old Ionic Native? Something like:
import { Foo } from "@ionic-native";

3

That’s right :wink:

my mistake staying on import { Network } from ‘@ionic-native/’; and now replace with import { Network } from ‘@ionic-native/network’; and compile with success! Thank you @SigmundFroyd

Now the problem is

No provider for ApplicationInitStatus!

Any ideia?

4

Have you imported and added BrowserModule to your imports in your app.module.ts file?

i.e.
import { BrowserModule } from '@angular/platform-browser';

then:

imports: [
  BrowserModule,
  ...
]
5

Works :wink:

[…]
imports: [
IonicModule.forRoot(MyApp),
BrowserModule, // New in ionic 3
HttpModule, // New in ionic 3
],
[…]

Tks again :wink: