Introduction to Venia PWA
Venia PWA Setup is part of Magento’s PWA Studio, which provides a modern front-end development platform for building Progressive Web Applications on top of Magento 2. The Venia storefront is a reference PWA built using React, GraphQL, and Webpack, making it a great starting point for developers looking to create high-performance and mobile-friendly e-commerce sites.
Setting up a Venia PWA project locally should be straightforward. However, if you’re working with an existing project, there are some common errors and dependencies that can cause headaches. This article outlines the key problems I encountered while setting up an existing Venia PWA project and the steps I took to resolve them.
Initial Setup Process
Minimum Requirements-
Node >= 14
Yarn >= 1.12.0 (Recommanded) or NPM
When setting up the project, I cloned the repository and attempted to start the development server with the command:
yarn run watch
However, this process did not go smoothly, and I encountered several issues that required investigation.
Errors I Faced
1. Yarn Run Watch – Dependency Warning and Module Not Found Error
Upon running yarn run watch, the following warning and error appeared:
warning package.json: "optionalDependencies" has dependency "sharp" with range "~0.29.3" that collides with a dependency in "dependencies" of the same name with version "~0.23.3" $ webpack-dev-server --progress --color --env.mode development node:internal/modules/cjs/loader:1215 throw err; ^ Error: Cannot find module './options' Require stack: - /path/to/project/node_modules/.bin/webpack-dev-server
This error was related to the mismatch of dependencies, particularly the sharp module. The system was unable to locate the required Webpack dependencies, leading to a MODULE_NOT_FOUND error.
2. 404 Page Not Found & ERR_SSL_PROTOCOL_ERROR
Once I resolved the initial dependency issues (explained below), the project started successfully, but when I opened the home page, I got a 404 Page Not Found error, and all GraphQL queries failed with this error in the console:
(failed)net::ERR_SSL_PROTOCOL_ERROR
Additionally, the Magento backend URL was marked as Not Secure, which hinted at SSL configuration issues.
Why These Errors Occurred
Dependency Mismatch
The initial error was due to a mismatch in the versions of dependencies defined in the package.json file. The warning indicated that there was a conflict between the versions of sharp in the optionalDependencies and dependencies. Since the PWA project relies heavily on Webpack and certain node modules, Common Venia PWA errors like missing or conflicting versions caused the MODULE_NOT_FOUND error when attempting to load Webpack’s internal files.
SSL Configuration Issue
The ERR_SSL_PROTOCOL_ERROR typically happens when there is a mismatch between HTTPS and HTTP. In this case, my Magento backend was running over HTTPS, but the Venia PWA was being served over HTTP (http://localhost) because Magento backend’s connection was “Not Secure” and certificate was not valid . Modern browsers block non-HTTPS requests when a secure server is being used, which resulted in this error.
Solutions I Implemented
1. Fixing Dependency Mismatch and Module Errors
The first step to resolving the how to fix dependency Issues mismatch was to remove and reinstall the Node modules:
rm -rf node_modules yarn install
This command deletes the node_modules folder and reinstalls all the dependencies based on the package.json file. This resolved the initial dependency mismatch issues, allowing Webpack to properly start up the development server.
2. Resolving ERR_SSL_PROTOCOL_ERROR
The second major issue was the SSL protocol error due to a mismatch between HTTP and HTTPS. To resolve this, I needed to ensure that the Venia PWA was being served over HTTPS, matching the Magento backend.
My first option was to do Magento Backend SSL Configuration by configure an SSL certificate in your hosting environment, like Cloudways, and update your Magento configuration to use valid https:// URLs. Beacuse it was showing “Not Secure” and certificate is not valid.
But I applied second option – (I did Changes on Venia side)
For Magento PWA troubleshooting, I applied the second option – I made changes on the Venia side. I updated the package.json file in the project, specifically the watch script to include the –https flag. This ensures that the local development server runs over HTTPS.
"watch": "webpack-dev-server --https --progress --color --env.mode development"
This change forced Webpack to serve the project over HTTPS. After making this update, the frontend and backend were both using HTTPS, and the SSL errors disappeared.
Whole Process in Steps –
Step 1: Clone the Repository
Clone the existing Venia PWA project from your version control system:
git clone <repository-url> cd <project-directory>
Step 2: Install Dependencies
Remove any old dependencies and install the latest ones based on the package.json:
rm -rf node_modules yarn install
Step 3: Update the package.json File (Only If Needed )
Add the –https flag to the watch script in the package.json:
"watch": "webpack-dev-server --https --progress --color --env.mode development"
Step 4: Run the Development Server
Now you can start the development server:
yarn run watch
Your Venia PWA should now start on https://localhost:10005 with the necessary SSL configuration in place.
Point to Remember: Magento Backend SSL Configuration
Make sure your Magento backend URL is also using HTTPS. If it shows as “Not Secure,” configure an SSL certificate in your hosting environment, like Cloudways, and update your Magento configuration to use valid https:// URLs. Or make changes in Venia side like I did in package.json file.
Conclusion
Setting up an existing Venia PWA project locally can sometimes lead to unexpected issues like dependency conflicts and SSL protocol errors. The key takeaways are:
- Always ensure that dependencies are properly managed in your package.json.
- Make sure that both your frontend (Venia) and backend (Magento) are served over HTTPS to avoid protocol mismatch errors.
- Keep your project up-to-date to avoid common issues with outdated modules or conflicting versions.
By following these steps, you can ensure a smooth setup and avoid the common errors I encountered. I hope this guide helps you save time and frustration when working with Venia PWA!
Need Help with Venia PWA or Magento Configuration?
Setting up and troubleshooting a Venia PWA project can sometimes bring unexpected challenges, from dependency conflicts to SSL issues. If you’re experiencing similar issues or need professional assistance, PinBlooms Technology Pvt Ltd offers comprehensive support for Magento, PWA projects, App Development, and React Development.
Our services include:
- Venia PWA Setup & Configuration: Smoothly set up Venia PWA on local or production servers with optimized configurations.
- Magento-PWA Integration: Seamlessly connect your Venia PWA with your Magento backend to ensure a secure and high-performance e-commerce platform.
- Troubleshooting & Debugging: Resolve common errors like dependency conflicts, module errors, and SSL mismatches with our expert solutions.
- PWA, Magento & App Maintenance: Ongoing support to keep your platform updated, secure, and optimized.
Visit our website or reach out to us today to learn how we can help you set up or troubleshoot your Venia PWA project. At PinBlooms, we’re dedicated to making your Magento, PWA, and App Development projects a success.
