Docker - @symfony/ux-swup/package.json not found

[adrienlamotte]

I have a docker for my Symfony 5 project, but I can't make it work with @symfony/ux-swup. When I try to build with npm run build, I have the error bellow in Docker :

Step #0:  error  in ./assets/controllers.json
Step #0: Syntax Error: Error: The file "@symfony/ux-swup/package.json" could not be found. Try running "yarn install --force".

Here is my docker file relevant parts :

FROM composer:1.9 as build
WORKDIR /app/
COPY composer.json composer.lock /app/
RUN composer global require hirak/prestissimo && \
    composer install

# ------------------------------------------------------

FROM php:7.4.5-apache
RUN apt-get update && apt-get install -y 

COPY --from=build /app/vendor /var/www/app/vendor

WORKDIR /var/www/app
COPY . /var/www/app/

# ------------------------------------------------------

FROM node:12-alpine
WORKDIR /var/www/app

COPY package*.json webpack.config.js /var/www/app/
COPY assets /var/www/app/assets

RUN npm install && \
    npm run build

I have noticed that in the package.js, ux-swup il referenced by :

"@symfony/ux-swup": "file:vendor/symfony/ux-swup/Resources/assets",

Not sure if this might cause the problem...

Any clues?
Thanks!

[tgalopin]

Hi Adrien!

I just encountered this issue and it was due to invalid Yarn cache in my home directory. Perhaps is it linked here too?

[jvancoillie]

Hello @adrienlamotte, @tgalopin 👋

I found myself faced with the same problem, the "node build stage" of the assets requires having the vendor directory present due to the definition of the ux-chartjs in the package.json file

"@symfony/ux-chartjs" : "file:vendor/symfony/ux-chartjs/Resources/assets" 

For this, I added a "composer" build step that I then copy into my node and php stage as follows:

ARG PHP_VERSION=8.1
ARG CADDY_VERSION=2
ARG NODE_VERSION=17
ARG COMPOSER_VERSION=2

# ==========================================================================================
#           --- COMPOSER ---
# ==========================================================================================
FROM composer:${COMPOSER_VERSION} AS symfony_composer

WORKDIR /srv/app

COPY composer.json composer.lock symfony.lock ./

RUN composer install --prefer-dist --no-dev --no-autoloader --no-scripts --no-progress;

# ==========================================================================================
#           --- NODE ---
# ==========================================================================================
FROM node:${NODE_VERSION}-alpine AS symfony_node

WORKDIR /srv/app

COPY package*.json ./
## Here copy vendor directory needed for ux-chartjs build on assets build.
COPY --from=symfony_composer /srv/app/vendor vendor/ 

RUN yarn install

## copy everything to use PostCSS, Tailwinds, webpack, ...
COPY . .

RUN yarn run build

# ==========================================================================================
#           --- PHP ---
# ==========================================================================================

FROM php:${PHP_VERSION}-fpm-alpine AS symfony_php

// ...

COPY --from=symfony_composer /usr/bin/composer /usr/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER=1

ENV PATH="${PATH}:/root/.composer/vendor/bin"

WORKDIR /srv/app

COPY --from=symfony_node /srv/app/public/build public/build

ENTRYPOINT ["docker-entrypoint"]
CMD ["php-fpm"]

I think there is better to do, that's why I share my solution with you.

[mahererais]

• project symfony 6.4 :
• i had the error message Error: The file "@symfony/ux-swup/package.json" could not be found. when a tried to build with npm run build after install Symfony UX Swup
• i didn't have the line "@symfony/ux-swup": "file:vendor/symfony/ux-swup/Resources/assets" on my package.json file.
• so i added, and i alrealy had an error message when build.
• check your vendor you vendor/symfony/ux-swup/, i noticed that i didn't have Ressource directory
  
• remove previous line and add "@symfony/ux-swup": "file:vendor/symfony/ux-swup/assets"
• build and it's work for me