Common Errors with Laravel Mix v4

Common Problems

SASS missing rule properties

After compiling, sass sometimes misses parts of rules if there is no space before an operator. To fix this, ensure that there is a space before all operators. For example, this:

width: calc(var(--width)/ 2);

Can be fixed by adding a space before the / like this:

width: calc(var(--width) / 2);

diff:

‘undefined’ after compliation

Sometimes when compiling into production, it won’t load certain pages due to Laravel Mix having problems Uglifying the code. This cause the failing file to be combiled to a single line of “undefined”, which can be identified by either loading the compiled file, or checking the result of npm run prod to see if there are any files with a 10 byte file size.

This can be caused by a number of problems, some of which are listed here.

null-coalescing operator

Using the null-coalescing operator (??) is not handled by uglify, and so should be avoided. So instead of using this:

return {
label: address.name ?? address.formattedAddress
};

Use this instead:

address.name || address.formattedAddress

OR

return {
label: address.name ? address.name : address.formattedAddress
};

Class properties outside of a function

Properties for a class which are defined outside of a function cannot be uglified either. So instead of doing this:

export default class Foo {
a;
b = 1;
}

Do this:

export default class Foo {

constructor(){
this.a;
this.b = 1;
}

}

Object optional chaining ? operator

FIXED IN MixV6 -> updated 08/2021

e.g. this will not uglify when npm run prod is executed:

this.constraintLayers?.forEach(l => {
if (l.layer) {
l.hide();
}
});

instead use something like:

        if (this.constraintLayers) {
            this.constraintLayers.forEach(l => {
                if (l.layer) {
                    l.hide();
                }
            });
        }

Incorrect CSS calcs

Having multiple calculations in a single calc or multiple calc in the same property can cause it to combine them when compiled for production. Therefore, they should be splt up. For exampl, instead of this, which has three calculations inside a single calc:

--width: 100px;
width: calc(var(--width) / 2 - var(--padding) * 2);

Use this, which splits it up and puts it in separate variables:

--width: 100px;
--buttonWidth: calc(var(--width) / 2);
--buttonPadding: calc(var(--padding) * 2);

width: calc(var(--buttonWidth) - var(--buttonPadding));

Similarily, instead of having a calc inside another calc:

left: calc(50% + calc(var(--width) / 2));

Separate them out into a var first:

left: calc(50% + var(--buttonWidth));