yarn build showing {{#pageTypeNonce}}{{#webpackChunks}}{{/webpackChunks}} {{/pageTypeNonce}} in footer

[ankit-jasani]

Describe the bug

We have set up Adobe Commerce 2.4.7-p1 with sample data and successfully configured PWA Studio to be compatible by following these steps:

Ran the command:
yarn create @magento/pwa

Set up a custom origin:
yarn buildpack create-custom-origin ./

Exported the required environment variable:
export NODE_OPTIONS=--openssl-legacy-provider

Built the project:
yarn build

The dist folder was generated using the commands mentioned above. The URL https://pwa-studio-demo.local/ was directly pointed to the dist folder, enabling the frontend to function correctly. (yarn start or any other commands not executed)

The frontend is functioning correctly (e.g., homepage, category page, and product details page are loading as expected). However, in the footer, we observe the following issue:

{{#pageTypeNonce}}{{#webpackChunks}}{{/webpackChunks}} {{/pageTypeNonce}}
No additional installations or customizations have been made on the Adobe Commerce side apart from the following required extensions:

magento/pwa
magento/pwa-commerce (added via Composer).
This is a fresh setup of both Adobe Commerce and PWA Studio with no customizations made yet.

To reproduce

Steps to reproduce the behavior:

1. Adobe Commerce 2.4.7-p1 fresh setup with sample data and install via composer required packages for PWA Studio magento/pwa & magento/pwa-commerce (Directory: adobe-commerce)
2. Directory: pwa-studio outside of adobe-commerce or in separate sever
   yarn create @magento/pwa
   yarn buildpack create-custom-origin ./
   export NODE_OPTIONS=--openssl-legacy-provider
   yarn build
3. https://pwa-studio-demo.local/ was directly pointed to the dist folder available in pwa-studio
4. See error

Expected behavior

Similar to the Venia demo website, the nonce should correctly load the root component file, ensuring that Mustache templates are not displayed.

Screenshots

Possible solutions

Is there any command I might have missed executing, such as starting the UPWARD server, running the UPWARD connector, or any other step needed to make it function like the Venia demo?

Debug Report

$ buildpack generate-build-report
ℹ Generating build report for [email protected]. This may take a moment.

ℹ Inspecting Dependencies
Found 9 @magento dependencies in yarn.lock
@magento/pwa-buildpack @ 11.5.3
@adobe/apollo-link-mutation-queue @ 1.0.2
@magento/babel-preset-peregrine @ 1.3.3
@magento/eslint-config @ 1.5.3
@magento/pagebuilder @ 9.3.2
@magento/peregrine @ 14.4.1
@magento/pwa-theme-venia @ 2.4.0
@magento/upward-security-headers @ 1.0.17
@magento/venia-ui @ 11.5.0

ℹ Inspecting Magento Backend
Not using sample backend.
Backend is UP!

ℹ Inspecting System
OS: #140~20.04.1-Ubuntu SMP Wed Dec 18 21:35:34 UTC 2024
Node Version: v20.5.1
NPM Version: 10.5.0

• Adobe Commerce Version: 2.4.5-p1
• PWA Studio Version: 13.0.0

Attached package.json file
package.json

[m2-assistant]

Hi @ankit-jasani. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.
Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[glo42707]

working fine and can not reproduce, please check your local cache for same as well as your magento instance if configured properly wihout any error

attachment

please let us know if we are missing any info since we followed you step to reproduce and worked fine.

[ankit-jasani]

@glo42707
yarn watch is working fine
Problem with yarn build only
Its not like whole website is not working, its just below footer area I can see {{#pageTypeNonce}}{{#webpackChunks}}{{/webpackChunks}} {{/pageTypeNonce}}

[ankit-jasani]

@glo42707
When running yarn build, a dist folder is generated. You need to configure your virtual host to point to the dist directory. For example, the URL http://pwa.local should serve content directly from the dist directory.

[glo42707]

@ankit-jasani could you please share upward path configures file to point that dist, so we can make sure if all configs mentioned correctly

[ankit-jasani]

@glo42707 We haven't used the Upward Connector in Magento 2 yet. Initially, we attempted to install the Magento 2 Upward Connector via Composer. However, since we're using PHP 8.3, there were dependency issues preventing the installation.

As an alternative, we've implemented Apache 2 modifications to handle GraphQL and media requests by redirecting them to the Magento 2 backend. Below is an example of the configuration we are using:

Proxy REST API calls to the Magento backend

ProxyPass /rest http://127.0.0.1:91/rest
ProxyPassReverse /rest http://127.0.0.1:91/rest

Proxy GraphQL calls to the Magento backend

ProxyPass /graphql http://127.0.0.1:91/graphql
ProxyPassReverse /graphql http://127.0.0.1:91/graphql

Proxy media requests to the Magento backend

ProxyPass /media http://127.0.0.1:91/media
ProxyPassReverse /media http://127.0.0.1:91/media

This setup allows us to route GraphQL and other API calls directly to the Magento 2 backend without relying on the Upward Connector.