{"id":15672,"library":"laravel-bundler","title":"Laravel Asset Bundler","description":"Laravel Bundler is a modern and fast asset building tool designed for the Laravel framework, serving as a direct alternative to Laravel Mix. It leverages Webpack 5 for bundling, Babel 7 for JavaScript transpilation, and esbuild for high-performance CSS and JavaScript minification. The current stable version is 3.1.0, with an active development cadence indicated by recent releases and continuous integration. Key differentiators include its focus on better defaults, explicit support for ESM via `.mjs` configuration files, and dedicated 'recipes' for integrating popular frontend frameworks like Vue.js (v2 and v3) with pre-configured loaders and plugins, including full HMR support. It generates a `mix-manifest.json` compatible with Laravel's `mix()` helper, ensuring a smooth transition for existing Laravel projects.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/ankurk91/laravel-bundler","tags":["javascript","laravel","vue","laravel-mix","webpack","bundle","asset"],"install":[{"cmd":"npm install laravel-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add laravel-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add laravel-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundler engine, required for configuration and execution.","package":"webpack","optional":false},{"reason":"Default Babel preset for JavaScript transpilation, typically required in user's package.json.","package":"@babel/preset-env","optional":false}],"imports":[{"note":"This package is ESM-first; configuration files typically use `import` syntax and `.mjs` extension.","wrong":"const { createConfig } = require('laravel-bundler');","symbol":"createConfig","correct":"import { createConfig } from 'laravel-bundler';"},{"note":"Recipes are imported from specific paths within the package. Ensure 'vue' and related dependencies are installed for the recipe.","wrong":"import { vue2Recipe } from 'laravel-bundler';","symbol":"vue2Recipe","correct":"import vue2Recipe from 'laravel-bundler/src/recipes/vue-2.js';"},{"note":"Similar to vue2Recipe, imported from a specific path. Requires 'vue' v3 and related dependencies to be installed separately.","symbol":"vue3Recipe","correct":"import vue3Recipe from 'laravel-bundler/src/recipes/vue-3.js';"}],"quickstart":{"code":"import webpack from 'webpack';\nimport { createConfig } from 'laravel-bundler';\nimport vue2Recipe from 'laravel-bundler/src/recipes/vue-2.js';\n\n// webpack.config.mjs\nexport default createConfig({\n    entry: {\n        app: './resources/js/app.js'\n    },\n    plugins: [],\n    // Other webpack configurations\n},\nvue2Recipe);\n\n// resources/js/app.js\nimport Vue from 'vue';\nimport 'bootstrap/dist/css/bootstrap.css';\nimport RegularComponent from './components/Regular.vue';\n\nnew Vue({\n    el: \"#app\",\n    components: {\n        RegularComponent\n    }\n});\n\n// package.json (excerpt)\n/*\n{\n    \"type\": \"module\",\n    \"scripts\": {\n        \"dev\": \"webpack --config-node-env=development --progress\",\n        \"prod\": \"webpack --config-node-env=production --progress\"\n    },\n    \"devDependencies\": {\n        \"laravel-bundler\": \"^3\",\n        \"webpack\": \"^5\",\n        \"vue\": \"^2\",\n        \"bootstrap\": \"^4\",\n        \"@babel/preset-env\": \"^7\",\n        \"vue-template-compiler\": \"^2\"\n    }\n}\n*/","lang":"javascript","description":"This quickstart demonstrates how to set up `laravel-bundler` for a Laravel project with Vue.js v2, including the necessary `webpack.config.mjs`, a basic `app.js` entry point, and essential `package.json` scripts and dev dependencies for a functional build process."},"warnings":[{"fix":"Uninstall `laravel-mix` (`npm uninstall laravel-mix`) and delete `webpack.mix.js`. Then, install `laravel-bundler` and create a `webpack.config.mjs`.","message":"This package is not compatible with `laravel-mix`. Users must remove `laravel-mix` and its associated `webpack.mix.js` configuration before installing and using `laravel-bundler`.","severity":"breaking","affected_versions":">=1.0"},{"fix":"Upgrade your Node.js installation to version 20.14.0 or newer using a version manager like nvm or fnm.","message":"The project requires Node.js version 20.14.0 or higher. Older Node.js versions may lead to build failures or unexpected behavior.","severity":"gotcha","affected_versions":">=3.0"},{"fix":"Add `\"type\": \"module\"` to your `package.json` and rename your Webpack config file to `webpack.config.mjs`.","message":"This package is designed for an ESM-first workflow. Your `package.json` should include `\"type\": \"module\"`, and your Webpack configuration file should be named `webpack.config.mjs` to ensure proper `import`/`export` syntax is used.","severity":"gotcha","affected_versions":">=3.0"},{"fix":"Consult the relevant recipe documentation and install all listed peer dependencies using `npm install --save-dev [package-name]`.","message":"When using specific recipes (e.g., `vue2Recipe`, `vue3Recipe`), you must manually install the required framework and its associated loader/compiler dependencies (e.g., `vue`, `vue-template-compiler` for Vue 2) as `laravel-bundler` does not install them automatically.","severity":"gotcha","affected_versions":">=3.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `webpack` is installed as a dev dependency: `npm install --save-dev webpack@^5`.","cause":"Webpack is not installed or the installed version is incompatible with laravel-bundler.","error":"Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'"},{"fix":"Rename your `webpack.config.js` to `webpack.config.mjs` and ensure `\"type\": \"module\"` is present in your `package.json`.","cause":"The Webpack configuration file (e.g., `webpack.config.js`) is attempting to use ESM `import` statements without being treated as an ES module.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Install the required Vue version and its associated compiler: `npm install --save-dev vue@^2 vue-template-compiler@^2` (for Vue 2) or `npm install --save-dev vue@^3` (for Vue 3).","cause":"A Vue recipe is being used, but the `vue` package (and potentially `vue-template-compiler`) has not been installed.","error":"Module not found: Error: Can't resolve 'vue'"}],"ecosystem":"npm"}