Laravel-mix: Can't Watch Vue Components with Style While extractVueStyles: True

[ChuiSauCE]

• Laravel Mix Version: 1.4.2
• Node Version: 6.11.1
• NPM Version: 5.3.0
• OS: Windows 10

While I'm watching with the option "extractVueStyles: true" everything is good until I get in to a .vue file with the style tag. Once i save the component it looks like everything is good but on browser i get that error:

Uncaught TypeError: Cannot set property '__file' of undefined
at Object.__webpack_exports__.a (admin.js:32733)
at __webpack_require__ (admin.js:20)
at Object.<anonymous> (admin.js:32664)
at __webpack_require__ (admin.js:20)
at Object.<anonymous> (admin.js:13469)
at __webpack_require__ (admin.js:20)
at Object.defineProperty.value (admin.js:13457)
at __webpack_require__ (admin.js:20)
at admin.js:63
at admin.js:66

Component.options.__file = "resources\\assets\\admin\\js\\pages\\overview\\overview.vue"

if i save somewhere else without styles it's working without any errors.
if i run npm run dev its good.
if i set extractVueStyles false everything is good(including components with styles)

it was working all good untill i update Laravel-mix. after laravel mix broken I updated every single package that I'm using;

"devDependencies": {
"axios": "^0.15.3",
"babel-loader": "^7.1.1",
"bootstrap": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"laravel-mix": "^1.4.2",
"lodash": "^4.17.4",
"masonry-layout": "^4.2.0",
"sass-loader": "^6.0.6",
"vue": "^2.4.2",
"vue-loader": "^13.0.2",
"vue-router": "^2.7.0",
"vueify": "^9.4.1",
"vuex": "^2.3.1"
}

Nope not working -.- (Is it me or is it me?)

PS: Closed previues issue but it was my bad it's not fixed :(

[pelmered]

I have the same problem with a similar setup except I use OSX and node version v8.1.2.

[YurySolovyov]

Same here,

"style-loader": "0.18.2",
"url-loader": "0.5.9",
"vue-loader": "13.0.4",
"vue-router": "2.7.0",
"vue-template-compiler": "2.4.2",
"vue": "2.4.2",
"vuex": "2.3.1",
"webpack": "3.5.4",

[dolbex]

Node: 6.9.4
NPM: 3.10.10
Mix: 1.4.2
OS: OSX

I've experienced this on two separate projects. I have an interesting setup on one where I have a bunch of components that didn't have styles in them. It's only AFTER I added the styles to one of my components that I started experiencing this problem.

If I start npm run watch and then save a javascript file, main.js for example, everything compiles just fine. If I change a .scss file anywhere else in the project (outside of vue) it then causes this same error which requires a restart of npm run watch

Update: Seems like that was a bit of a red haring. Ugh... no idea. 2 machines. 2 Projects.... I've tried boiling it down to something simple but I just can't seem to find it.

[srcrer]

I am fairly new to Vue.js but I was having the same issue and this is what I did to resolve it. There may be a better workaround out there or something I am missing. It seems to occur when single file components are using component scoped css and you are also using external css files.

I was actually only using external styles but once I included vue2-google-maps in my project I started seeing this error. Some of the single file components were using component scoped css.

Workaround
In your webpack.mix.js file, add this option for laravel mix.
mix.options({ extractVueStyles: true });

This will take any component scoped css and put it into the external stylesheet. Unfortunately it overwrites all of you own styling. I had to add a blank app.scss file for the component scoped css and another for my own styling. My webpack.mix.js file look like this:

mix.options({
   extractVueStyles: true
 });

mix
   .sourceMaps()
   .js('resources/assets/js/admin.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/styles.scss', 'public/css')
   .copyDirectory('resources/assets/img', 'public/img');

Then in your template...

<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/app.css" />

Hopefully this is helpful.

[ChuiSauCE]

@JeffreyWay

Thanks for trying but idk i created same structure as yours... doesn't wanna work. Don't know much about webpack but wierd part about it if i save a vue component without style tag it works(while others has the styling) if i just put that tag it doesn't. That happens on same watch.

So more likely it happens on watch and only once you save a .vue file with a styling. rest perfectly working good even you have styling xD idk sounds confusing but thats what it is. So far working without splitting the style. Till i push to production.

[bzabos]

👍

I have been experiencing the exact same thing for the past few weeks. I don't have a strange set up. My experience is that I can even pull sass out into an isolate scss file and @import that into the vue component's <style lang="scss"> block and this continues to work in watch mode, while having the raw scss in the block does not.

I haven't had a moment to sit down and debug this, but definitely confusing!

Anybody hear form @JeffreyWay on this one yet?

[bzabos]

Something that may or not be helpful: I think right around the same time, a named extractVueStyles stylesheet reverted back to the default vue-styles.css. Eg, the follow would continue outputting vue-styles.css:

mix.options({
  extractVueStyles: 'my-perfect-storm.css'
})

Caveat: I need to test this to confirm.

[Rubemlrm]

I'm experience the same error , but only when i edit scss files. Besides that i've tried the workaround recommended by @srcrer and i get the same error.

[bcorreia]

Same here.
Set extractVueStyles: true and watch does not compile correctly.
Set extractVueStyles: false and it compiles as expected.

Laravel Mix v1.4.2
Node v8.2.1
NPM v5.3.0
MacOS Sierra 10.12.6

[enghelewa]

Same issue here. Anyone got to workaround it?!

[bcreeves]

This issue started for me with the jump from v1.1 to v1.2. Downgrading Mix to 1.1 or setting extractVueStyles: false are the only fixes so far.

[Ediiik]

I had the same issue. Updating laravel-mix and vue solved it for me.

"vue": "^2.5.6",
"laravel-mix": "^1.6.1"

[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.