Error: Module build failed: Error: Final loader didn't return a Buffer or String

[fiznool]

Short description of the problem:

When using ionic serve, sometimes I get the error:

Error: Module build failed: Error: Final loader didn't return a Buffer or String

I have to restart ionic serve to make the error go away.

Which @ionic/app-scripts version are you using?

0.0.46

Other information:

Here's a screenshot of the issue:

[MarkChrisLevy]

I confirm that issue as well.

[fiznool]

I've downgraded to 0.0.44 - seems to have fixed the issue for now.

[danbucholtz]

Any idea how to recreate the issue?

Thanks,
Dan

[fiznool]

@danbucholtz sorry, I don't know. All I know, is it happens sporadically on 0.0.45 and 0.0.46. I haven't seen this issue crop up since I downgraded to 0.0.44.

I'm afraid that I can't share the source code with you as it is private.

[MarkChrisLevy]

@danbucholtz It seems, that it happens when I change the ts file (that starts transpile etc) and just right after I change the same ts file again:

[16:00:21]  build started ... 
[16:00:21]  transpile update started ... 
[16:00:21]  transpile update finished in 152 ms 
[16:00:21]  webpack update started ... 
[16:00:29]  build started ... 
[16:00:32]  transpile update started ... 
[16:00:32]  transpile update finished in 107 ms 
[16:00:32]  webpack update started ... 
[16:00:36]  webpack update finished in 4.55 s 
[16:00:36]  build finished in 15.83 s 

[16:00:36]  build finished in 7.90 s 

Look, that build started two times, transpile started two times, webpack started two times as well, but finished only once.

But it doesn't happen all the time, probably the second change must be made in appropriate time and generates race condition...

[danbucholtz]

Hmmm, okay, I will try to break it and fix it. Thanks @lleevvyy!

Thanks,
Dan

[fiznool]

An update to this.

I put some debug logging inside the module which throws the error, node_modules/webpack/lib/NormalModule.js:150:

if(!Buffer.isBuffer(source) && typeof source !== "string") {
	console.log(result);
	return callback(module.error = new ModuleBuildError(module, new Error("Final loader didn't return a Buffer or String")));
}

It's happened to me a couple of times again today. Here is the result of the console logging:

{ result: 
   [ null,
     { version: 3,
       file: 'app.operators.js',
       sourceRoot: '',
       sources: [Object],
       names: [],
       mappings: 'AAAA,kEAAkE;OAG3D,+BAA+B;OAC/B,iCAAiC;OACjC,wBAAwB;OACxB,yBAAyB;OAGzB,yBAAyB;OACzB,gCAAgC;OAChC,wCAAwC;OACxC,uBAAuB;OACvB,4BAA4B;OAC5B,6BAA6B;OAC7B,6BAA6B;OAC7B,6BAA6B',
       sourcesContent: [Object] } ],
  resourceBuffer: <Buffer 2f 2f 20 49 6d 70 6f 72 74 20 6a 75 73 74 20 74 68 65 20 72 78 6a 73 20 73 74 61 74 69 63 73 20 61 6e 64 20 6f 70 65 72 61 74 6f 72 73 20 6e 65 65 64 ... >,
  cacheable: true,
  fileDependencies: [ '/app/src/app/app.operators.ts' ],
  contextDependencies: [] }

This is the contents of app.operators.ts:

// Import just the rxjs statics and operators needed for THIS app.

// Statics
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/zip';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/takeWhile';

I import this in my app.component.ts like so:

// Add the RxJS Observable operators.
import './app.operators';

Maybe this is of some help?

[thruthesky]

Good morning,

I was thinking it happens, on my end, because I use 'ng-bootstrap modal' and add it 'entryComponent' but now I experience even without 'ng-bootstrap modal'.

Thank you.

[cmaart]

Can confirm. It's horrible because it constantly breaks development.

@ionic/app-scripts 0.0.46
ionic-angular 2.0.0-rc.3
Windows 10

[danbucholtz]

Anyone know how to recreate? I cannot recreate it. I will fix if someone can give steps to reproduce it.

Thanks,
Dan

[gust42]

I can reproduce this!

I start my app using ionic serve -b

1. save a .html template in VS Code, wait for the browser reload
2. save a .ts component in VS Code, the error message appears after reload

the error persist if i save a .ts but if i save a .html again, the error disappears,

Ionic Framework: ^2.0.0-rc.3
Ionic Native: 2.2.3
Ionic App Scripts: 0.0.47
Angular Core: 2.1.1
Angular Compiler CLI: 2.1.1
Node: 6.9.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36

[danbucholtz]

I'll check it out, thanks @gust42!

Thanks,
Dan

[danbucholtz]

@gust42,

Sorry, those steps don't work for me. I just tried them out. I have never once seen this issue in developing on Mac or Windows 10.

Are you using barrel files? Could that be why? Barrel files are not considered a best practice and cause all sorts of problems. I think Angular will stop recommending them soon based on some conversations we've had with the team.

Do you get the issue if you set ionic_bundler to rollup?

Thanks,
Dan