Hyva Not Generating app/etc/hyva-themes.json on Deployment for Magento 2.4.7

Update: Hyva are now recommending Adobe Commerce Cloud customers commit their app/etc/hyva-themes.json file into the repo.

The app/etc/hyva-themes.json file
The file needs to be generated after Magento is installed, so it can’t be run during the build phase. This means, for Adobe Commerce Cloud projects, the app/etc/
hyva-themes.json file needs to be commited to the repository.
Otherwise the file will be missing during the compilation of the styles.

and they’ve update the docs accordingly.

If you don’t wish the commit that file into your repo, the initial solution in this post still works.

At work this week I was updating the deployment scripts for one of our projects
when I realised that Hyva wasn’t generating the app/etc/hyva-themes.json
file on deployment which then caused the pipeline to fail.

This was due to two different things, there’s a bug in Hyva for Magento 2.4.7
where it isn’t properly triggering a generation. That problem is fixed in an
existing Merge Request on Hyva’s Gitlab which solves the problem by triggering generation when ConfigImportProcessor is intercepted (see MR for more).

The second issue is more of a conceptual issue. The default instruction for
deploying on Adobe Commerce Cloud won’t work out the box for most Commerce
Cloud deployments due to the ordering of deployment comamnds (where
app/etc/hyva-themes.json isn’t tracked in the repo).

This is because the Hyva generation via NPM runs before one of the commands to
trigger the writing of app/etc/hyva-themes.json. At the time
npm run build-prod fires - there isn’t a app/etc/hyva-themes.json written
so the deployment will fail with something like this:

> npm run build && npm run output-success


> @hyva-themes/magento2-default-theme@3.0.0 build
> NODE_ENV=production npx tailwindcss --postcss -i tailwind-source.css -o ../css/styles.css --minify

W: node:fs:603
W:   handleErrorFromBinding(ctx);
W:   ^
W: 
W: Error: ENOENT: no such file or directory, open '/app/app/etc/hyva-themes.json'
W:     at Object.openSync (node:fs:603:3)
W:     at Object.readFileSync (node:fs:471:35)
W:     at Object.<anonymous> (/app/app/design/frontend/Deploy/project/web/tailwind/node_modules/@hyva-themes/hyva-modules/src/index.js:107:19)
W:     at Module._compile (node:internal/modules/cjs/loader:1256:14)
W:     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
W:     at Module.load (node:internal/modules/cjs/loader:1119:32)
W:     at Module._load (node:internal/modules/cjs/loader:960:12)
W:     at Module.require (node:internal/modules/cjs/loader:1143:19)
W:     at require (node:internal/modules/cjs/helpers:121:18)
W:     at Object.<anonymous> (/app/app/design/frontend/Deploy/project/web/tailwind/postcss.config.js:1:38) {
W:   errno: -2,
W:   syscall: 'open',
W:   code: 'ENOENT',
W:   path: '/app/app/etc/hyva-themes.json'
W: }
W: 
W: Node.js v18.17.1

E: Error building project: Step failed with status code 1.

E: Error: Unable to build application, aborting.

This makes sense, give the bug in Hyva with 2.4.7 not trigger the writing of
the file, it can’t read from it as its not there.

You can work around this by setting your build hook in .magento.app.yaml to
disable/enable one of the Hyva core extensions which triggers the writing of
the required app/etc/hyva-themes.json:

hooks:
  # We run build hooks before your application has been packaged.
  build: |
    set -e
    composer --no-ansi --no-interaction install --no-progress --prefer-dist --optimize-autoloader --no-dev
    
    echo 'Generating app/etc/hyva-themes.json'
    bin/magento module:disable Hyva_Theme && bin/magento module:enable Hyva_Theme
    
    unset NPM_CONFIG_PREFIX
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    export NVM_DIR="$HOME/.nvm"    
    [ -s "$NVM_DIR/nvm.sh"  ] &&. "$NVM_DIR/nvm.sh"
    nvm install 18.17

    echo 'Generating Hyva styles...'
    mkdir -p app/design/frontend/Deploy/project/web/css/
    npm --prefix app/design/frontend/Deploy/project/web/tailwind/ install
    npm --prefix app/design/frontend/Deploy/project/web/tailwind/ run build-prod
    rm -rf app/design/frontend/Deploy/project/web/tailwind/node_modules/
    rm -rf ~/.nvm/    

    php ./vendor/bin/ece-tools run scenario/build/generate.xml
    php ./vendor/bin/ece-tools run scenario/build/transfer.xml
  deploy: |
    php ./vendor/bin/ece-tools run scenario/deploy.xml
  post_deploy: |
    php ./vendor/bin/ece-tools run scenario/post-deploy.xml

This way, it’ll write the app/etc/hyva-themes.json file and then generate
your Tailwind styles before the main setup:static-content:deploy runs.

If you’re running setup:upgrade at some point in your pipepine before you
generate your tailwind styles then you likely won’t run into this.