Adonis Mix Asset

3.0.0 verified Sat Apr 25 auth: no javascript

Laravel Mix integration for AdonisJS, providing asset bundling with webpack and a view helper. Current stable version is 3.0.0, requiring @adonisjs/core ^5.1.7, @adonisjs/view ^6.0.2, and laravel-mix ^6.0.19. It simplifies using Laravel Mix's webpack configuration within AdonisJS, offering commands for building, watching, and analyzing assets. Differentiators include automatic mix-manifest.json parsing and a view helper for cache-busted asset URLs.

Common errors

error Cannot find module '@adonisjs/core/src/Helpers' ↓

cause Incompatible AdonisJS version (v4 vs v5) with adonis-mix-asset >=3.0.0.

fix

Upgrade AdonisJS to ^5.1.7 and use adonis-mix-asset v3.

error mix is not a function ↓

cause Using ESM import instead of CommonJS require in webpack.mix.js.

fix

Change to const mix = require('laravel-mix');

error View helper mix() returns empty string ↓

cause mix-manifest.json not found or public path mismatch.

fix

Ensure mix.setPublicPath('public') matches your AdonisJS public directory.

error Command 'mix:build' not found ↓

cause Provider not registered or outdated ace commands.

fix

Run node ace configure adonis-mix-asset again and ensure the provider is in .adonisrc.json.

Warnings

breaking Major breaking changes between v2 and v3: v3 requires @adonisjs/core ^5.1.7 and @adonisjs/view ^6.0.2, and rewrote implementation for latest AdonisJS. ↓

fix Upgrade to AdonisJS v5.1.7+ and install @adonisjs/view v6.0.2+.

gotcha The view helper {{ mix('...') }} returns a URL based on mix-manifest.json. If you change public path in AdonisJS, you must also set mix.setPublicPath() accordingly. ↓

fix Ensure mix.setPublicPath('public') matches the AdonisJS public path config.

gotcha Running node ace mix:build --production does not set NODE_ENV automatically; you may need to set it manually for production optimizations. ↓

fix Prefix with NODE_ENV=production or use cross-env.

deprecated In v2, the package used to ship its own commands; v3 changed to using ace commands provided by the package. ↓

fix Run node ace mix:build or node ace mix:watch after configuration.

gotcha After configuring, you must add mix-manifest.json and output folders (e.g., public/scripts) to .gitignore to avoid committing generated files. ↓

fix Add 'mix-manifest.json', 'public/scripts', 'public/styles' to .gitignore.

Install

npm install adonis-mix-asset

yarn add adonis-mix-asset

pnpm add adonis-mix-asset

Imports

mix
wrong
```
import mix from 'laravel-mix'
```
correct
```
const mix = require('laravel-mix')
```
webpack.mix.js is a CommonJS config file; use require, not ESM import.
adonis-mix-asset
wrong
```
require('adonis-mix-asset')
```
correct
```
import 'adonis-mix-asset'
```
AdonisJS providers are typically auto-loaded via ace configure; explicit import is only needed in edge cases.
mix view helper
wrong
```
{{ mix(['path']) }}
```
correct
```
{{ mix('path/to/asset') }}
```
The view helper expects a string path, not an array. Used in Edge templates.

Quickstart

Install the package and configure it using AdonisJS ace command.

npm i adonis-mix-asset && npm i --save-dev laravel-mix
node ace configure adonis-mix-asset