Deployment of Laravel application containing Inertia.js fails to resolve "vendor/tightenco/ziggy/dist/vue.m

Reproduction procedures. (Date of confirmation : Aug. 27, 2022)

[local Mac PC]
$ curl -s "https://laravel.build/laravel-inertia-test" | bash
$ cd laravel-inertia-test
$ ./vendor/bin/sail up -d
$ ./vendor/bin/sail artisan --version
Laravel Framework 9.26.1

visit http://localhost/
→ No problem.

[local Mac PC]
$ fly launch
? App Name (leave blank to use an auto-generated name): laravel-inertia-test
? Select region: nrt (Tokyo, Japan)
? Would you like to deploy now? Yes

visit https://laravel-inertia-test.fly.dev/
→ No problem.

[local Mac PC]
$ ./vendor/bin/sail composer require laravel/breeze
$ ./vendor/bin/sail artisan breeze:install vue
$ ./vendor/bin/sail npm run dev

visit http://localhost/
→ No problem.

[local Mac PC]
$ fly deploy
Update available 0.0.382 -> v0.0.383.
Run "fly version update" to upgrade.
==> Verifying app config
--> Verified app config
==> Building image
Remote builder fly-builder-twilight-snow-6496 ready
==> Creating build context
--> Creating build context done
==> Building image with Docker
--> docker host: 20.10.12 linux x86_64
Sending build context to Docker daemon  237.2kB
[+] Building 15.4s (17/19)
 => [internal] load remote build context                                                     0.0s
 => copy /context /                                                                          0.2s
 => resolve image config for docker.io/docker/dockerfile:experimental                        2.2s
 => CACHED docker-image://docker.io/docker/dockerfile:experimental@sha256:600e5c62eedff338b  0.0s
 => [internal] load metadata for docker.io/library/node:14                                   0.5s
 => [internal] load metadata for docker.io/serversideup/php:8.1-fpm-nginx                    0.8s
 => [node_modules_go_brrr 1/6] FROM docker.io/library/node:14@sha256:48ad857f33fb03f542133b  0.0s
 => [base 1/5] FROM docker.io/serversideup/php:8.1-fpm-nginx@sha256:8d1b3410252fe90d9336a3e  0.0s
 => CACHED [node_modules_go_brrr 2/6] RUN mkdir /app                                         0.0s
 => CACHED [node_modules_go_brrr 3/6] RUN mkdir -p  /app                                     0.0s
 => CACHED [node_modules_go_brrr 4/6] WORKDIR /app                                           0.0s
 => CACHED [base 2/5] RUN apt-get update && apt-get install -y     git curl zip unzip rsync  0.0s
 => [node_modules_go_brrr 5/6] COPY . .                                                      0.1s
 => [base 3/5] COPY . /var/www/html                                                          0.1s
 => ERROR [node_modules_go_brrr 6/6] RUN if [ -f "vite.config.js" ]; then         ASSET_CM  11.9s
 => [base 4/5] RUN composer install --optimize-autoloader --no-dev     && mkdir -p storage/  9.6s
 => [base 5/5] RUN if grep -Fq "laravel/octane" /var/www/html/composer.json; then         r  0.5s
------
 > [node_modules_go_brrr 6/6] RUN if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install --frozen-lockfile;         yarn $ASSET_CMD;     elif [ -f "package-lock.json" ]; then         npm ci --no-audit;         npm run $ASSET_CMD;     else         npm install;         npm run $ASSET_CMD;     fi;:
#17 9.764
#17 9.764 > esbuild@0.14.54 postinstall /app/node_modules/esbuild
#17 9.764 > node install.js
#17 9.764
#17 10.14 added 142 packages in 8.956s
#17 10.54
#17 10.54 > @ build /app
#17 10.54 > vite build
#17 10.54
#17 11.10 vite v3.0.9 building for production...
#17 11.38 transforming...
#17 11.83 ✓ 13 modules transformed.
#17 11.83 Could not resolve '../../vendor/tightenco/ziggy/dist/vue.m' from resources/js/app.js
#17 11.83 error during build:
#17 11.83 Error: Could not resolve '../../vendor/tightenco/ziggy/dist/vue.m' from resources/js/app.js
#17 11.83     at error (file:///app/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
#17 11.83     at ModuleLoader.handleResolveId (file:///app/node_modules/rollup/dist/es/shared/rollup.js:22333:24)
#17 11.83     at file:///app/node_modules/rollup/dist/es/shared/rollup.js:22296:26
#17 11.86 npm ERR! code ELIFECYCLE
#17 11.86 npm ERR! errno 1
#17 11.87 npm ERR! @ build: `vite build`
#17 11.87 npm ERR! Exit status 1
#17 11.87 npm ERR!
#17 11.87 npm ERR! Failed at the @ build script.
#17 11.87 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
#17 11.88
#17 11.88 npm ERR! A complete log of this run can be found in:
#17 11.88 npm ERR!     /root/.npm/_logs/2022-08-27T03_27_32_555Z-debug.log
------
Error failed to fetch an image or build from source: error building: executor failed running [/bin/sh -c if [ -f "vite.config.js" ]; then         ASSET_CMD="build";     else         ASSET_CMD="production";     fi;     if [ -f "yarn.lock" ]; then         yarn install --frozen-lockfile;         yarn $ASSET_CMD;     elif [ -f "package-lock.json" ]; then         npm ci --no-audit;         npm run $ASSET_CMD;     else         npm install;         npm run $ASSET_CMD;     fi;]: exit code: 1

visit https://laravel-inertia-test.fly.dev/
→ Not deployed.

A temporary workaround was found by placing the file that would not have been referenced under
The temporary workaround was achieved by placing the file under resources/js/ and editing the file in resources/js/app.js.

[local Mac PC]
cp -a vendor/tightenco/ziggy/dist/vue.m.js resources/js

[resources/js/app.js]
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
↓
import { ZiggyVue } from './vue.m';

I would like to solve this problem by other means if possible, since the copied files are not subject to package management and are not updated by composer in this way.
Is there a better way?

thanks.

Hi @coffee-r if you check the .dockerignore file you will see a line in the ignore list vendor. So your vendor folder is not uploaded to the builder. If you remove vendor from the ignore file your build will import the ZiggyVue file correctly. Generally, it’s bad practice for a package to expect you to include the vendor folder in production but…

1 Like

Hi @TomWhite1 thank you for your reply.
I have confirmed that your method works around the problem.

1 Like

Any chance Ziggy is included as a dev dependency in composer.json ? (within require-dev).

The Dockerfile uses composer install --no-dev and so wouldn’t pull in dev dependencies.

To be clear, the vendor directory is definitely there after a deployment. It’s just created in the Dockerfile in the build process, rather than copied directly from the filesystem during the build.

One solution is to run composer install to build static assets that would include the ziggy stuff, then later call composer install --no-dev to later remove dev dependencies from the vendor dir.

Another solution is to move Ziggy to a regular dependency instead of a dev-dependency within composer.json.

1 Like

Hi @fideloper-fly thank you for your reply.
This is part of the composer.json when I tried it.

"require": {
    "php": "^8.0.2",
    "guzzlehttp/guzzle": "^7.2",
    "inertiajs/inertia-laravel": "^0.6.3",
    "laravel/breeze": "^1.12",
    "laravel/framework": "^9.19",
    "laravel/sanctum": "^2.8",
    "laravel/tinker": "^2.7",
    "tightenco/ziggy": "^1.0"
},
"require-dev": {
    "fakerphp/faker": "^1.9.1",
    "laravel/pint": "^1.0",
    "laravel/sail": "^1.0.1",
    "mockery/mockery": "^1.4.4",
    "nunomaduro/collision": "^6.1",
    "phpunit/phpunit": "^9.5.10",
    "spatie/laravel-ignition": "^1.0"
},

I will try to verify this on my end once to see if editing the dockerfile will solve the problem.
thanks.

In a multi-stage build of Docker
I was able to work around this by copying the files under vendor before building the static assets.
I will try this strategy. Thank you for your advice.

Dockerfile
before

~~~
FROM node:${NODE_VERSION} as node_modules_go_brrr

RUN mkdir /app

RUN mkdir -p  /app
WORKDIR /app
COPY . .

# Use yarn or npm depending on what type of
# lock file we might find. Defaults to
# NPM if no lock file is found.
# Note: We run "production" for Mix and "build" for Vite
RUN if [ -f "vite.config.js" ]; then \
~~~

after

~~~
FROM node:${NODE_VERSION} as node_modules_go_brrr

RUN mkdir /app

RUN mkdir -p  /app
WORKDIR /app
COPY . .

# for resolve vendor/tightenco/ziggy/dist/vue.m from resources/js/app.js
COPY --from=base /var/www/html/vendor ./vendor 

# Use yarn or npm depending on what type of
# lock file we might find. Defaults to
# NPM if no lock file is found.
# Note: We run "production" for Mix and "build" for Vite
RUN if [ -f "vite.config.js" ]; then \
~~~
1 Like