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[bot]]

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.

[glo82145]

@adobe export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-3540 is successfully created for this GitHub issue.

[del22123]

We analysed the issue and understood that you are directly pointing your apache virtual host to PWA dist folder which is not recommended. Due to which the placeholders "#pageTypeNonce" and "#webpackChunks" are not updated by UPWARD. You should use the UPWARD package in your Adobe commerce/Magento so that the placeholders are updated with valid scripts. Also to mention we have fixed the PHP compatibility issues throughout PWA backend repos in our previous releases hence this issue will be resolved if you use UPWARD packages in your Adobe Commerce/Magento composer require magento/module-upward-connector Once you add upward connector and complete the configurations your Adobe Commerce/Magento url itself will be pointing to PWA storefront. UPWAD doc reference: https://developer.adobe.com/commerce/pwa-studio/guides/packages/upward/multi-site/

[del22123]

@ankit-jasani Do let us know if the issue is resolved as per the above comment or any questions/information around it.

[del22123]

As we have no update on this ticket for more than 14 days, we are closing this ticket as per the process and the consideration that the provided solution/suggestion is working. Please feel free to reopen in case of any update.