Laravel Livewire: could not resolve "livewire.esm"

Published on

If you are using Laravel Livewire this error can occasionally happen while building your javascript bundle:

RollupError: Could not resolve "../vendor/livewire/livewire/dist/livewire.esm" from "resources/js/app.js"

The solution for this problem is running composer install before you build your javascript bundle.

You will get this error if you try to build your javascript bundle before installing your composer packages. This is because when you manually bundle Livewire you use a javascript file that is included in the Livewire composer package.

Random failures in CI/CD

If you are using Wilson or a similar CI/CD system to install your npm and composer dependencies in parallel this error might happen randomly. This is because of the race-condition that npm builds before composer is done installing.

You can solve this by either not running these steps in parallel, or by using this bash snippet:

npm ci

for try in {1..9999}; do
    [ -f "./vendor/livewire/livewire/dist/livewire.esm.js" ] && break
    
    if [ "$try" -gt 100 ]; then
        echo "You must install your composer packages first";
    
        exit 1;    
    fi
    
    sleep 0.1;
done

npm run build

Or shorter if you're not afraid of infinite loops:

npm ci

while [ ! -f "./vendor/livewire/livewire/dist/livewire.esm.js" ]; do sleep 0.1; done;

npm run build