Webiny-js: Error: Can't open Helmet.js in the editor

[tjrexer]

Since the last upgrade (3/1/2020), can't run the site locally. After using yarn run start, receive an error that it can't open Handler.js in the editor.

This is:

• Bug

Specifications

• version: 3.2.1
• OS: OSX 10.15
• Browser: Firefox

Expected Behavior

When the page loads, it should load completely.

Actual Behavior

Page begins to load, then errors out when it tries to load the menu bar.

Steps to Reproduce the Problem

1. Create new project as 3.0.2
2. Upgrade project to latest version.
3. Start site app.
4. Observe page load, then error on menu.

Detailed Description

Page content loads, but then Menu fails to load later with errors. Error shown on screen points to helmet.js.

Error in console:
`Could not open Helmet.js in the editor.

To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. Learn more: https://goo.gl/MMTaZt`

Error in Page:
TypeError: can't convert symbol to string

Traces in page go back to the apollo client, batch handler and queries where it fails to iterate through observers.

Is there a missing step in the upgrade to update the .env to include the editor?

[doitadrian]

Very weird, I've just tried it (NOT by upgrading from v3.0.2, but with a brand new project), that worked. I also tried the site locally. It seems that this is really something that happened in the upgrade process as you mentioned.

For starters, since Apollo is being mentioned in the error trace, can you check please if there are any errors returned from the API, in the network tab? Just to eliminate that possibility.

[tjrexer]

No, I made sure to disable the cache and do a hard reload as well, no errors. I also don't see any errors in the CloudWatch logs either.

[doitadrian]

Can you please try executing a GQL query in GQL playground?

Open your-api.com/graphql and enter the query pageBuilder / getMenuBySlug(slug: "main-menu")

For that field, get the data field and also the items field. I'm curious about the GQL response.

Sorry I could not paste the exact query, on a phone.

You can paste me the URL of your site/API too so I can try to check it out more directly.

Thanks!

[tjrexer]

Sent you an email with the API. Here is the response.

{
  "data": {
    "pageBuilder": {
      "menus": {
        "data": {
          "slug": null,
          "title": "Main menu",
          "items": [
            {
              "title": "Home",
              "url": "/about/about-us",
              "id": "5e3f0fb8204ab80008102c07",
              "type": "page"
            },
            {
              "title": "Available Tools",
              "url": "/about/available-tools",
              "id": "5e3f1c3e7e077800081b54dc",
              "type": "page"
            },
            {
              "title": "What is Open Source?",
              "url": "/about/what-is-open-source",
              "id": "5e3f1454204ab80008102c08",
              "type": "page"
            },
            {
              "title": "How to Help",
              "url": "/about/how-to-help",
              "id": "5e3f1793b633700007004457",
              "type": "page"
            },
            {
              "title": "Articles",
              "children": [
                {
                  "title": "Autism Tools Need Help",
                  "url": "/articles/autism-tools-need-help",
                  "id": "5e3f236ae2c6f90008329ca9",
                  "type": "page"
                }
              ],
              "id": "k76ysedu",
              "type": "folder"
            }
          ]
        }
      }
    }
  }
}

[doitadrian]

Thank you @tjrexer!

[doitadrian]

Hah!

Managed to reproduce it! After several attempts, finally, an idea crossed my mind - tried using your API URL for my local app.

And then I figured the error was indeed related to the Helmet component. More specifically, how we nested React nodes in it in the packages/app-page-builder/src/site/plugins/index.tsx. That's what caused the TypeError: can't convert symbol to string error.

The commit with the fix: https://github.com/webiny/webiny-js/commit/85aaebe5fa2fbce0849e554be6a2ace5d10a3aa9

Just released a fix so you can try upgrading when you get a chance.

Thanks again for your precise debugging reports, time, and patience! Webiny shirt and some stickers are on the way! :)

[tjrexer]

Worked, thanks for the quick fix.

[doitadrian]

Awesome!