Laravel-mix: Cannot read property common of undefined

[Frankobingen]

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

[guttume]

I am also getting the same issue. When I run the npm run watch for the first time, it works perfectly fine. However, the error comes back after making changes to css, js or .vue files. Once the error comes, npm run dev spits the same error.

[ruchern-chong]

@Frankobingen Update your Vue and see if the problem is fixed. That is some seriously outdated Vue version.

[Frankobingen]

I've updated all dependencies. Error still occurs. Kept newest vue version and went back to older mix version - error doesn't occur.

As said I used a fresh laravel installation. I removed sass and lodash and added less + less loader. Nothing special.

[msonowal]

same here it works for fresh npm run watch
after you do changes in sass files it says undefined
sometimes it will work for 2-3 times and it throws the error it is not always in second time
and then need to restart npm run watch to make it work again

[Shigeki1120]

Same here. anyone solved this?

I did what's mentioned here but no luck

https://laracasts.com/discuss/channels/vue/vue-error-every-time-appscss-is-compiled

[claide]

Got the same issue. Any updates?

[rick20]

same issue here...any workaround for this?

[ruchern-chong]

Based on #1120's error

Change this:

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

to

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

[claide]

@ruchern , not working for me.

[Frankobingen]

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

[claide]

@Frankobingen , tried to change the mix version to 0.* and it did the trick. Hopefully this will be fixed soon. Thanks!

Update: using the method will not compile the app.js.

[JeffreyWay]

Can someone give me steps to reproduce this, please?

[msonowal]

@JeffreyWay this error is something very weird in my opinion I think it is based on number of files and dependencies that the project has and file size as I am experiencing on mine.
I have a laravel project with lot of blade files and .vue files and also a sass setup of bootstrap with all kinds of custom variables files etc. in this project when I make changes to .vue files it compiles perfectly and but in case of sass files if I make some changes it compiles perfectly but in browser it says undefined error unknown property commons of undefined. So I need to restart the npm run watch process to make it work again
So, may be this will help.

[rick20]

Laravel Mix Version: ^1.0
Node Version: 8.1.3
NPM Version: 4.6.1
OS: MacOS

Tried to replicate the issue again as identical as possible.
As usual, first run was fine, change a js/scss file, refresh the browser, and found different error, but exactly the same as #1084.

As suggested, adding this option solves both of my issues.

mix.options({
   extractVueStyles: true
 });

In my case, I actually have .vue files with its own <style></style>.

But not sure if this issue related to each other.

[goatatwork]

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.

[joaokamun]

Im in the same situation of @goatatwork . Exactly the same.

Laravel: 5.5
Mix: ^1.0
Node.js: 8.6.0
NPM: 5.4.2
OS: Arch Linux

Quick note: I've updated Laravel mix just now, and all errors are gone . :+1: Jeff rocks!

[goatatwork]

@joaokamun I still the same issue here, but I'm not convinced I updated Mix correctly. Pardon my ignorance, but what is the suggested procedure to update Laravel mix?

Btw, my testing for this issue now involves nothing more than opening app.scss and saving it (with npm run watch running). I don't even have to make any changes. Also, to clarify, there are currently two paths out of the error for my projects. 1. kill and restart npm run watch. 2. Open a Vue file and save it one, two, maybe four times.

If there's some helpful data that I'm not providing, please let me know what it is and I'll gather it up.

[joaokamun]

@goatatwork Check if in your package.json, Laravel mix is set with ^1.0 version tag. Than just run npm update. After update, everything was working properly.

If for some reason previous step doesn't work, I think you can set version tag to:

"laravel-mix": "^1.4.5",

[goatatwork]

@joaokamun Amazeballs. Thank you. I did have the ^1.0 version tag. npm updated didn't bring me to 1.4.5. I noticed I was still on 1.4.2 after npm update. However, setting the version tag, like you suggested, worked. I'm happy to report that the symptoms seem to be gone. It looks like something between 1.4.2 and 1.4.5 fixed the glitch. I'm not a huge fan of not knowing or understanding a fix, but this one has been such a pain that I think I can become one with the fix being PFM.

Thanks for the suggestion on the upgrade.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.