DevTools failed to parse SourceMap error after login will redirect to that js file

user_129209 0
Viewed 44997

I am new to VueJS. I am following one of the YouTube tutorial Let's Build a Multi-Purpose Laravel + Vue Application by Code Inspire

This is his github package. https://github.com/Hujjat/laravStart

I notice. When I logout and login again, it will redirect to .js file.

for my case:- http://laravel-vuejs.test/js/popper.js.map

and I clone his project. I tried with inspect, I login and logout and login. It will redirect to http://laravstart.test/js/laravel-vue-pagination.common.js.map

It will show 404 error. I have every time remove the /js/xxxx.js.map then only back to normal. enter image description here

Both of my project, when I run inspect. I notice have the Chrome warning.

DevTools failed to parse SourceMap: http://laravstart.test/js/laravel-vue-pagination.common.js.map

DevTools failed to parse SourceMap: http://laravel-vuejs.test/js/laravel-js/popper.js.map

IMPORTANT NOTE It only happen when I open the chrome inspect windows. If I close it, it will back to normal means won't redirect to JS file.

Screen record: https://imgur.com/gZzcX5L

I tested with Chrome and Firefox with inspect both having the same problem.

But in Chrome if I off setting for source map, it will not have this issue.

enter image description here

Anyone how to fix it? Compile source map issue? the js.map file not exist.

laravel vue.js
5 Answers

If you use Laravel Mix, you can generate source maps by calling the mix.sourceMaps() method in your webpack.mix.js file. This resolves the problem.

mix.js('resources/js/app.js', 'public/js').sourceMaps();

Laravel Mix Source Maps documentation

user_112516520

I found that one solution is created a dummy file at public/js/popper.js.map, then it will back to normal, basically just fulfil what browser developer tool required, it will not redirect to that specific file.

I believe this is browser developer tools behaviour.

I received solution from the laraStart repo owner.

This error happens when you have an error and compile your javascript code. Later, when you fix it, it will remain in cache and happens. Please try to compile your script again and login to see.

The solution is also working as well.

I run npm update and npm run dev, it is working fine.

user_1292090

Open "find in files", find every commented line of code that has

sourceMappingURL=...

Delete the whole commented line for each.

There should be 3 entries here in public/app.js and 1 at the end of popper.js.

If you are using Brave shields or an ad blocker, turn it off

user_46698410

The best solution is just copy the popper.js.min from

node_modules - popper.js - dist -> popper.js.min

this solved my headache

user_109266920

There are two SourceMap error in my case so the two previous answers applied to me. 1) By adding sourceMaps() in the mix.js function in webpack.mix.js file 

mix.js('resources/js/app.js', 'public/js').sourceMaps();

to remove popper.js source map error.

2) Adding toastr.js.map to public/js folder to remove toastr.js source map error.

user_102197050
Related