Magento PWA: Something went wrong. Please try again

Question

I'm trying to get started with Magento's PWA tooling by following their Project setup tutorial.

I've been able to create the Node project by running

$ npx @magento/create-pwa

I've been able to install this project's dependencies by running

$ npm install

I've been able start the web server by running

$ yarn watch

However, when I visit http://0.0.0.0:10000/, I receive a Something went wrong. Please try again. error in a rendered browser window, and a slew of failed network requests. Most are server error 500s

Here's the results from one of the 500 errors

{
    "errors": [{
        "debugMessage": "Request content type must be application\/json",
        "message": "Internal server error",
        "category": "internal",
        "trace": [{
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/module-graph-ql\/Controller\/HttpRequestProcessor.php",
            "line": 39,
            "call": "Magento\\GraphQl\\Controller\\HttpHeaderProcessor\\ContentTypeProcessor::processHeaderValue((empty string))"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/module-graph-ql\/Controller\/GraphQl.php",
            "line": 112,
            "call": "Magento\\GraphQl\\Controller\\HttpRequestProcessor::processHeaders(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/Interception\/Interceptor.php",
            "line": 58,
            "call": "Magento\\GraphQl\\Controller\\GraphQl::dispatch(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/Interception\/Interceptor.php",
            "line": 138,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::___callParent('dispatch', array(1))"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/Interception\/Interceptor.php",
            "line": 153,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::Magento\\Framework\\Interception\\{closure}(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/generated\/code\/Magento\/GraphQl\/Controller\/GraphQl\/Interceptor.php",
            "line": 26,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::___callPlugins('dispatch', array(1), array(1))"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/App\/Http.php",
            "line": 136,
            "call": "Magento\\GraphQl\\Controller\\GraphQl\\Interceptor::dispatch(instance of Magento\\Framework\\App\\Request\\Http)"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/generated\/code\/Magento\/Framework\/App\/Http\/Interceptor.php",
            "line": 24,
            "call": "Magento\\Framework\\App\\Http::launch()"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/vendor\/magento\/framework\/App\/Bootstrap.php",
            "line": 258,
            "call": "Magento\\Framework\\App\\Http\\Interceptor::launch()"
        }, {
            "file": "\/path\/to\/\/project-community-edition\/pub\/index.php",
            "line": 40,
            "call": "Magento\\Framework\\App\\Bootstrap::run(instance of Magento\\Framework\\App\\Http\\Interceptor)"
        }]
    }]
}

Where do I go from here? I presume this Node.js application is trying to communicate with my Magento instance, configured during installation

#File: .env
    
MAGENTO_BACKEND_URL=http://magento-2-3-x.localhost/

Do I need to something to prepare this Magento installation and/or further configure this Node.js application with credentials?

I tried looking at the rest of the docs site but it's a bit of a corporate hodge podge of random technical details and seemingly innocuous promotional statements that hint at a lot of interdepartmental tension. I'm unsure what to do and I'm not really up for reverse engineering how all this works.

Does anyone have any advice for what to do here?

Answer 1

Does anyone have any advice for what to do here?

I would first try to get PWA Studio running against the public shared backend instance provided by Adobe.

#File: .env
    
MAGENTO_BACKEND_URL=https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/

If that works I would go ahead with creating a local domain with a signed certificate - the command for this is yarn buildpack create-custom-origin .

As to the underlying issue I can so far only guess. Your localhost domain indicates that you might be running Magento 2.3.x.

The initial npx @magento/create-pwa would have installed the latest version of PWA Studio at version 8.0. The pattern of support is current version and prior version - so 2.4.0 and 2.4.1. Source

Answer 2

Could it be you've used PWA studio version 8?

If so this does not support Magento 2.3 according to https://magento.github.io/pwa-studio/technologies/magento-compatibility/

Although if this was the case you should have been informed during installation:

Since 2.1.0, PWA Studio includes a query validation step during the build process. This step reports on any GraphQL incompatibility it encounters.

Developers have two options for solving compatibility issues:

• Upgrade or downgrade the PWA Studio version to match the Magento 2 backend version
• Upgrade or downgrade the backend Magento 2 version to match the PWA Studio version

Answer 3

backend url needs to be https, please try that