Uncaught SyntaxError: invalid or unexpected token in a file compiled by Browserify

Question

My project is based on Laravel and uses Laravel Elixir to compile and minimize client-side code (which is written in ECMAScript 6).

I noticed that if I make any changes to the code on the client side, then compile everything again using gulp and reload the page, I get the following error in Chrome:

Untrained SyntaxError: invalid or unexpected token

Failed to parse SourceMap: http://192.168.99.100/js/app.js.map

If I check app.js , I see why I have such a problem:

Each red dot is a \u0 character.

After that, I checked the same file in my IDE and there are no such characters at the end.

If I revert my changes and recompile using gulp again, everything will start working again.

My gulpfile.js :

 var elixir = require('laravel-elixir'); require('laravel-elixir-vueify'); // Enable full sourcemaps with browserify. Disable in production. elixir.config.js.browserify.options.debug = true; // Disable notifications process.env.DISABLE_NOTIFIER = true; elixir(function(mix) { // Compile SASS mix.sass('app.scss'); mix.browserify('app.js'); mix.browserSync({ notify : false, open: false, proxy : '192.168.99.100', reloadDelay: 2000 }); }); 

Not sure if this is important, but the application runs in several docker containers inside a shared folder hosted on Mac OS X.

Answer 1

It turns out the problem was caused by an incorrect Nginx configuration. I got a very useful hint after watching this discussion .

I needed to disable the use of sendfile in Nginx by changing default.conf in my case:

 location / { # Try to serve the request as a file first, but if it cannot be found # try to serve the default index file for a directory that matches the # request. try_files $uri $uri/ /index.php?$query_string; index index.php index.html index.htm; sendfile off; }