Weird error error in node_modules\source-map\lib\source-node.js


#1
ionic  serve --lab
[INFO] Starting app-scripts server: --lab --l --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address 0.0.0.0 - Ctrl+C to cancel
[18:22:11]  watch started ...
[18:22:11]  build dev started ...
[18:22:11]  clean started ...
[18:22:11]  clean finished in 16 ms
[18:22:11]  copy started ...
[18:22:12]  transpile started ...
[18:22:15]  transpile finished in 3.30 s
[18:22:15]  preprocess started ...
[18:22:15]  deeplinks started ...
[18:22:15]  deeplinks finished in 114 ms
[18:22:15]  preprocess finished in 130 ms
[18:22:15]  webpack started ...

C:\Ionic Project\project\node_modules\source-map\lib\source-node.js:116
        node.add(nextLine.substr(0,mapping.generatedColumn));
                         ^

TypeError: Cannot read property 'substr' of undefined
    at Function.<anonymous> (C:\Ionic Project\project\node_modules\source-map\lib\source-node.js:116:26)
    at Array.forEach (native)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (C:\Ionic Project\project\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (C:\Ionic Project\project\node_modules\source-map\lib\source-node.js:80:24)
    at SourceMapSource.node (C:\Ionic Project\project\node_modules\webpack-sources\lib\SourceMapSource.js:42:20)
    at ReplaceSource.node (C:\Ionic Project\project\node_modules\webpack-sources\lib\ReplaceSource.js:69:29)
    at CachedSource.node (C:\Ionic Project\project\node_modules\webpack-sources\lib\CachedSource.js:12:23)
    at C:\Ionic Project\project\node_modules\webpack-sources\lib\ConcatSource.js:40:49
    at Array.map (native)
    at ConcatSource.node (C:\Ionic Project\project\node_modules\webpack-sources\lib\ConcatSource.js:39:60)

#2

Do you have any files that contain multiple components in them?


#3

no actually I am using angular2-color-picker whenever I use this in module.ts it will give me this error


#4

Looks to me like the answer would be yes actually.


#5

this is my app.module.ts plz check once

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { VideoPlayer } from '@ionic-native/video-player';
import { LoginPage } from '../pages/login/login';

import { ForgotPasswordModalPage } from '../pages/forgot-password-modal/forgot-password-modal';
import { OtpPage } from '../pages/otp/otp';
import { ImageModalPage } from '../pages/image-modal/image-modal';
import { ColorsPickerPage } from '../pages/colors-picker/colors-picker';

import { SearchPage } from '../pages/search/search';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginProvider } from '../providers/login/login';
import { PathProvider } from '../providers/path/path';
import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '@ionic/storage';
import { File } from '@ionic-native/file';
import { Transfer } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';
//import {ColorPickerModule} from 'angular2-color-picker'
import { MediaCapture } from '@ionic-native/media-capture';
//import { SqliteProvider } from '../providers/sqlite/sqlite';

// @NgModule({
//     imports: []
// })
import { Network } from '@ionic-native/network';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    ForgotPasswordModalPage,
    OtpPage,
    SearchPage,
    ImageModalPage,
    ColorsPickerPage,
    
  ],

  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    SignaturePadModule,    
    HttpModule,    
    IonicStorageModule.forRoot(),
  
  ],

  bootstrap: [IonicApp],

  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SearchPage,
ForgotPasswordModalPage,
OtpPage,
ColorsPickerPage,
ImageModalPage
  ],

  providers: [
   File,
    Transfer,
    Camera,
    FilePath,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    LoginProvider,
    PathProvider,
    VideoPlayer,
    MediaCapture,
    Network,
   //SqliteProvider,    
  ]
})
export class AppModule {}

if I dont include that ColorPickerModule it will work fine


#6

You’re not listening to what I’m saying.


#7

hey actually I am not getting that where to look for multiple components because if I would have include that in any page it would have display error so plz is there any where particular to look plz suggest


#8

I have no personal experience with any of this, but in one of the Github issues of the referenced Github project somebody linked to this:

Which claims to be an NG4 and AOT compatible version of the original. I’d recommend trying out this one.


Plugin not installed error and not displaying plugin name also
#9

hi I have checked this , once if u go to the application demo and then to github this is same angular2-color-pixer


#10

If you look at the commit history you can see that they’re certainly different repositories, and in this case I’m pretty sure they forgot to update the link on the demo page.


#11

Hmm not getting but how do I get rid of this and will able to use Ionic color picker


#12

hey still not able to get through this plz help and actually I am not using this do I have to use this


#13

@SigmundFroyd is much smarter and knowledgeable than I am, so you should listen to him.


#14

then – is there any way to get rid of this error plz suggest


#15

Did you try the repository I linked to? Despite the wrong link on the demo page it is actually a different repository, and one that has been updated recently as well as claiming to be NG4 and AOT compatible.


#16

hi
I am actually not getting how to use this ngx-color-picker…
and how do I install this one …I think I am thinking in wrong way plz help me to clear my doubts
thanks


#17

You can install it via the command:
npm i --save ngx-color-picker

Then from what I can tell, you use it in exactly the same way as the original one, which appears to adding <input> to your template, such as:
<input [(colorPicker)]="color" [style.background]="color"/>


#18

ohh thanks so I just have to install this thats it no cordova plugin and not declaration of this in app module right ???


#19

No cordova plugin, but you will need to import ColorPickerModule into your app module.

import { ColorPickerModule } from 'ngx-color-picker';

imports: [
   ...
   ColorPickerModule
],

#20

yes sure
actually I already have kept there before installing ngx the above error was coming will check now