Laravel Mix

6.0.49 verified Sat Apr 25 auth: no javascript

Laravel Mix (v6.0.49 stable) is a webpack wrapper providing a clean, fluent API for defining build steps. It simplifies asset compilation for CSS/JS pre-processors in Laravel and other PHP projects. Key differentiators: zero-config setup, automatic versioning, vendor extraction, and support for Vue, React, SASS, Less, PostCSS, TypeScript, and more. Currently on v6 with webpack 5 support; active development with regular minor releases.

Common errors

error Module not found: Error: Can't resolve 'laravel-mix/src/builder/Mix' ↓

cause Incorrect import path or missing dependency.

fix

Use const mix = require('laravel-mix'); do not import submodules directly.

error TypeError: mix.js is not a function ↓

cause mix variable not properly initialized or overridden.

fix

Ensure const mix = require('laravel-mix'); is the first line of webpack.mix.js.

error Error: PostCSS plugin postcss-import requires PostCSS 8 ↓

cause Mismatched PostCSS version.

fix

Update postcss to ^8.3.11 (peer dependency of laravel-mix v6).

Warnings

breaking Upgrading from v5 to v6 requires webpack 5 migration. Many plugins and custom configs may break. ↓

fix Review upgrade guide at https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md

deprecated mix.extract() is deprecated in v6. Use mix.extractVendor() instead. ↓

fix Replace mix.extract() with mix.extractVendor() or custom splitting.

gotcha Mixing ESM and CJS in webpack.mix.js can cause unexpected errors. Mix expects CommonJS require(). ↓

fix Use require() in webpack.mix.js; avoid import/export unless transpiled by Mix itself.

Install

npm install laravel-mix

yarn add laravel-mix

pnpm add laravel-mix

Imports

mix
wrong
```
import mix from 'laravel-mix'
```
correct
```
const mix = require('laravel-mix')
```
CommonJS module; ESM import may cause issues without bundler wrapper.
Mix (TypeScript)
wrong
```
const Mix = require('laravel-mix').Mix
```
correct
```
import type { Mix } from 'laravel-mix'
```
TypeScript users should import the type for proper intellisense.
webpackConfig
wrong
```
const { webpackConfig } = require('laravel-mix')
```
correct
```
mix.webpackConfig({...})
```
Webpack config is a method on the mix instance, not a separate export.

Quickstart

Basic setup: compile JS and SASS, enable versioning in production.

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('src/js/app.js', 'public/js')
   .sass('src/scss/app.scss', 'public/css')
   .version();

if (mix.inProduction()) {
    mix.minify(['public/js/app.js', 'public/css/app.css']);
}