Laravel-mix: Uncaught TypeError: utils.isStandardBrowserEnv is not a function

[davidhoeck]

Just running "npm run watch" and I'm getting the error every 4-5 re-compilations.

Uncaught TypeError: utils.isStandardBrowserEnv is not a function
    at Object.chars (app.js:64325)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:26040)
    at __webpack_require__ (app.js:20)
    at getDefaultAdapter (app.js:10529)
    at Object.<anonymous> (app.js:10538)
    at Object.<anonymous> (app.js:10603)
    at __webpack_require__ (app.js:20)
    at Object.module.exports (app.js:63840)
    at __webpack_require__ (app.js:20)

__Everything is at the newest version__

[JeffreyWay]

What does your webpack.mix.js file look like?

[davidhoeck]

@JeffreyWay

// app sass files
mix.sass('resources/assets/sass/framework.scss', 'public/css');
mix.sass('resources/assets/sass/app.scss', 'public/css');

// app js files
mix.js('resources/assets/js/app.js', 'public/js');

// copy font files
mix.copy('resources/assets/fonts', 'public/fonts');

// copy image files
mix.copy('resources/assets/images', 'public/images');


mix.browserSync({
    proxy: 'dev.beer-tasting.shop'
});

[bryandease]

I'm getting the same error @davidhoeck - just started recently. Seems to be working fine with watching JS files - but any updates I make to less files require me to stop and run a fresh watch.

[nxmad]

Got the same error after any update in sass files.

[chagoy]

I've gotten this too. I started getting it after I commented out everything in my app.scss files and used a CSS CDN. If I restore everything (uncomment the sass file, take out the CDN) I still get 'Uncaught TypeError: utils.isStandardBrowserEnv is not a function'.

This is my laravel mix file

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

[stebrl]

Getting the same error every time I update my sass file...

[davidhoeck]

@JeffreyWay I think it is coming from the axios library...

[franc014]

Here the same problem when running npm run watch
I had to stop and run again to make it work when making any sass change.

[suhogrozdje]

+1, only happens on npm run watch. This started recently.

[JhumanJ]

Same here...

[jeffturcotte]

@davidhoeck is right that this has something to do with the axios library and it's utils file, but I'm guessing the bug is still somewhere within mix's own watch config.

Here is a temporary fix: require/import the full axios dist file. All of it's own internal dependencies will be included and webpack/mix won't need to load them. The following works for me and solves this very annoying issue.

window.axios = require('axios/dist/axios.js');

[JeffreyWay]

Mix doesn't have a custom watcher in this case. It's all webpack behind the scenes.

I'm having trouble reproducing this. Can someone give me exact steps in a fresh Laravel app to see this error?

[wafs]

I've narrowed down the problem, and this isn't a problem with laravel-mix per se, but webpack and specifically the watcher - is setting something in a global variable and it is getting overwritten by something else.

I was able to reproduce the problem by bringing in axios and ExtractTextPlugin and set up

First time you run watch, everything is working fine,

second time around, the watcher will recompile and axios will attempt to bring in utils

// from /node_modules/axios/lib/helpers/isURLSameOrigin.js
'use strict';

var utils = require('./../utils');

module.exports = (
  utils.isStandardBrowserEnv() ?
// etc

however it is overwritten by /node_modules/css-loader/lib/css-base.js

From Chrome devtools dumping the utils obj to console:

// in /node_modules/css-loader/lib/css-base.js
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
    if(typeof modules === "string")
    modules = [[null, 
// etc

I managed to fix it with this ugliness inside the vue-loader :

test   : /\.vue$/,
        loader : 'vue-loader',
        options: {
          extractCSS: true,
          loaders   : { 
                scss: is_prod ? ExtractTextPlugin.extract({use:'css-loader!sass-loader',fallback:'vue-style-loader'}) : 'vue-style-loader!css-loader!sass-loader',
                sass: is_prod ? ExtractTextPlugin.extract({use:'css-loader!sass-loader?indentedSyntax',fallback:'vue-style-loader'}) : 'vue-style-loader!sass-loader?indentedSyntax',
                css : is_prod ? ExtractTextPlugin.extract({use:'css-loader',fallback:'vue-style-loader'}) : 'vue-style-loader!css-loader',
          },

Searching around, it seems to be linked to this : https://github.com/webpack/webpack/issues/5399

[JhumanJ]

@wafs Could you be a bit more explicit about your fix (which file..etc.)? Thanks!

[JeffreyWay]

Yeah this doesn't seem to be a Mix-specific issue. It's either directly webpack or the extract plugin.

Giving this a close, since there's nothing I can directly do here to fix it.

[maxcareer]

I have same error when i update my vue file，how to fix ? Thanks!
extract-text-webpack-plugin/issues/579

[bryandease]

I can confirm that downgrading to [email protected] solves the issue for me.

[maxcareer]

@bryandease But my webpack version is 3.5, it not match [email protected]

[wjgilmore]

I'm also experiencing this problem. @bryandease can you elaborate regarding how you downgraded extract-text-webpack-plugin to resolve it? I'm not quite sure how to override the mess of JS requirements. For instance I installed [email protected] in my project's root package.json file but that didn't fix it. Is there another way to override the version of extract-text-webpack-plugin being used down the tree? Thank you!

[wadday]

I am using Laravel 5.5 with Bulma CSS (sass) & Vuejs 2.
I am also experiencing the same problem. but after I run artisan command to clear compile and then run composer dump-autoload and my issues got solved.
thank you.

[jonnywilliamson]

Having the same issue at the moment.

It's only started happening recently. If I'm using 'npm run watch" and change something in my global scss file and watch as mix recompiles everything, I'll get the above error as soon as I refresh my webpage on my app.

IF I happen to open say, one of my vue components and immediately save it (forcing npm watch to do a recompile) everything is fixed again.

It's a little annoying but that's what I'm doing at the moment to work around it.

[daniesy]

I managed to recreate it..kinda.

Initial conditions:

• .scss & .vue files that need to get compiled.
• package.json dependencies:
  
  
  
  • "axios": "^0.16.2",
  
  
  • "cross-env": "^5.0.1",
  
  
  • "laravel-mix": "^1.0",
  
  
  • "lodash": "^4.17.4",
  
  
  • "moment": "^2.18.1",
  
  
  • "vue": "^2.1.10",
  
  
  • "vue-i18n": "^7.2.0",
  
  
  • "vuejs-datepicker": "^0.9.11"
  
  

Steps:

1. While having npm run watch on, make some changes to a .scss and save.
2. Empty cache and hard reload(refresh) the browser and see Uncaught TypeError: utils.isStandardBrowserEnv is not a function in the browser console.
3. Make some changes to a .vue file and save.
4. Empty cache and hard reload(refresh) the browser and see Uncaught SyntaxError: Invalid or unexpected token.
5. Wait a lil bit and try Empty cache and hard reload(refresh) again. Finally it will work ok.
6. You might need to repeat steps 1-5 multiple times.

Note:

• Laravel Mix seems very buggy in this new release. You'll get a js error (Unexpected end of input) if you refresh the browser right after the files are compiled. You have to wait a few seconds.

[ottz0]

Same issue...I cant use npm watch whilst editing a sass file.

As per previous posts, it does appear to be coming from axios. I removed axios from my app and now I can edit sass and watch changes with npm run watch

[anthonyholmes]

Adding mix.version() seemed to fix the issue for me

[tesis]

I have the same issue.
Unfortunately, adding mix.version() triggers another error.

It's working fine with npm run dev and npm run hot.

[ItsLhoudini]

Same here!

[xxRockOnxx]

To me it happens only if I save .scss files. To fix it i'd just ctrl+s on a .js file.

[vyzaldysanchez]

I also experienced this while changing my .scss styles !