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

Question

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.

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.

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

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

this solved my headache