laravel-mix: Cannot read property common of undefined

Everytime I run npm run watch and it detects changes I receive the error

unknown property commons of undefined

which is refering to

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

My dependencies

  "axios": "^0.16.2",
  "cross-env": "^5.0.1",
  "jquery": "^3.1.1",
  "laravel-mix": "^1.0",
  "vue": "^2.1.10",
  "less": "^2.7.2",
  "less-loader": "^4.0.5"

I’m working with a fresh laravel installation on a windows machine.

Steps To Reproduce:

run npm run watch
make a change to a vue or less file
reload page

It’s working perfectly fine with npm run dev

It also seems like the watcher tries to run multiple times. I receive a lot of notifications about the buld success.

Update

Working when chaning laravel-mix version to 0.*

Already described in #1120

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 20 (2 by maintainers)

Most upvoted comments

Based on #1120’s error

Change this:

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
}

ruchernchong on Sep 12, 2017

Experiencing seemingly the same symptoms here. This was happening with Laravel 5.4 and is now happening in 5.5. This is on a Mac using Valet. This is with fresh installs of either.

What I have observed:

I run npm run watch the entire time.
Changes to .vue files: No problems. Everything is recompiled and works as expected.
Changes to .scss files: The compile does not error, but the next page load results in…

Uncaught TypeError: Cannot read property 'common' of undefined

I have not tried to kill and restart the npm process like others have. Instead, what I have found to ‘fix’ the issue is to (re)save a .vue file a couple of times. I can save the same .vue file 2-4 times or save 2-4 separate .vue files and then the page loads without error. So it doesn’t appear to care what is saved as long as it’s a .vue file, and it needs a few saves to fly straight again.

That said, those details sound like untroubleshot technical voodoo. But, I’ve seen this specific issue and workaround stay consistent for the last several months.

I am ignorant as to what information about my system might be helpful, but I’m more than happy to produce any details that would help.

goatatwork on Sep 15, 2017

this problem does not only occur with axios. For me the best solution for the moment is setting the verison of laravel-mix to 0.* in my package.json and re run npm install

Frankobingen on Sep 12, 2017