{"id":20181,"library":"laravel-mix","title":"Laravel Mix","description":"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.","status":"active","version":"6.0.49","language":"javascript","source_language":"en","source_url":"https://github.com/JeffreyWay/laravel-mix","tags":["javascript","laravel","webpack","laravel elixir","laravel mix","typescript"],"install":[{"cmd":"npm install laravel-mix","lang":"bash","label":"npm"},{"cmd":"yarn add laravel-mix","lang":"bash","label":"yarn"},{"cmd":"pnpm add laravel-mix","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for CSS processing","package":"postcss","optional":true},{"reason":"core bundler peer dependency","package":"webpack","optional":false},{"reason":"webpack CLI peer dependency","package":"webpack-cli","optional":false},{"reason":"Babel transpilation peer dependency","package":"@babel/core","optional":true}],"imports":[{"note":"CommonJS module; ESM import may cause issues without bundler wrapper.","wrong":"import mix from 'laravel-mix'","symbol":"mix","correct":"const mix = require('laravel-mix')"},{"note":"TypeScript users should import the type for proper intellisense.","wrong":"const Mix = require('laravel-mix').Mix","symbol":"Mix (TypeScript)","correct":"import type { Mix } from 'laravel-mix'"},{"note":"Webpack config is a method on the mix instance, not a separate export.","wrong":"const { webpackConfig } = require('laravel-mix')","symbol":"webpackConfig","correct":"mix.webpackConfig({...})"}],"quickstart":{"code":"// webpack.mix.js\nconst mix = require('laravel-mix');\n\nmix.js('src/js/app.js', 'public/js')\n   .sass('src/scss/app.scss', 'public/css')\n   .version();\n\nif (mix.inProduction()) {\n    mix.minify(['public/js/app.js', 'public/css/app.css']);\n}","lang":"typescript","description":"Basic setup: compile JS and SASS, enable versioning in production."},"warnings":[{"fix":"Review upgrade guide at https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md","message":"Upgrading from v5 to v6 requires webpack 5 migration. Many plugins and custom configs may break.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Replace mix.extract() with mix.extractVendor() or custom splitting.","message":"mix.extract() is deprecated in v6. Use mix.extractVendor() instead.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Use require() in webpack.mix.js; avoid import/export unless transpiled by Mix itself.","message":"Mixing ESM and CJS in webpack.mix.js can cause unexpected errors. Mix expects CommonJS require().","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use const mix = require('laravel-mix'); do not import submodules directly.","cause":"Incorrect import path or missing dependency.","error":"Module not found: Error: Can't resolve 'laravel-mix/src/builder/Mix'"},{"fix":"Ensure const mix = require('laravel-mix'); is the first line of webpack.mix.js.","cause":"mix variable not properly initialized or overridden.","error":"TypeError: mix.js is not a function"},{"fix":"Update postcss to ^8.3.11 (peer dependency of laravel-mix v6).","cause":"Mismatched PostCSS version.","error":"Error: PostCSS plugin postcss-import requires PostCSS 8"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}