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

• 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 😦

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

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