FixNBlog

Creating a custom PWA extension in Adobe Commerce’s PWA Studio can be an exciting but challenging experience. However, running into errors like the following can halt your progress:

Unexpected error setting up workspace! Error: Command failed: yarn workspace @custom/pwaextension run prepare

If you’ve encountered this error during setup, here’s how you can troubleshoot and resolve it by modifying your package.json file.

Fix PWA Studio Workspace Error

Step 1: Identify the Issue

The error typically occurs when running the command yarn install within your custom PWA extension’s workspace. This error may be due to a misconfiguration in the package.json file for your custom PWA extension.

Step 2: Update the package.json File

To resolve the issue, modify the package.json file under @custom/pwaextension. This file should contain all necessary dependencies, metadata, and configuration options to ensure compatibility with PWA Studio.

Follow the template below to create or update the package.json file:

{
  "name": "@custom/pwaextension",
  "version": "1.0.0",
  "private": true,
  "description": "Implement Custom Extension to PWA Studio",
  "main": "src/index.js",
  "license": "(OSL-3.0 OR AFL-3.0)",
  "author": "a3a15c88",
  "peerDependencies": {
    "@apollo/client": "~3.5.0",
    "@magento/peregrine": "~12.6.0",
    "@magento/pwa-buildpack": "~11.4.1",
    "@magento/venia-ui": "~9.7.0",
    "react": "^16.0.0"
  },
  "pwa-studio": {
    "targets": {
      "intercept": "src/intercept.js"
    }
  }
}

Explanation of the Key Components

• name: The name of your package, @custom/pwaextension, which should be unique.
• version: This specifies the version of your extension. It can be incremented with future updates.
• private: Setting this to true ensures the package won’t accidentally be published publicly.
• peerDependencies: This section includes dependencies that PWA Studio expects in order to function properly with the core packages (like @apollo/client and @magento/venia-ui).
• pwa-studio: The targets here allow PWA Studio to identify your custom extension and load it appropriately. The intercept.js file here enables customization in the build process.

After updating your package.json file, try running yarn install again. With the correct configuration, this should resolve the workspace setup error, allowing you to proceed with implementing your custom PWA extension.

Further Reference

For a more detailed explanation, refer to Adobe’s official PWA Studio extension documentation.

Create a PWA Studio Custom Extension in Magento 2