[gatsby-source-wordpress] Previews called after the FIRST instance fail with "TypeError: Cannot read property 'reporter' of undefined"

[ardiewen]

Description

Very likely same issue as #30610 , but I wanted to clarify that this is happening in all preview environments, and specifically on the "second" attempt to preview any resource.

Attempting to preview changes to a page causes the following error to be reported:

 ERROR 

TypeError: Cannot read property 'reporter' of undefined
    at forEach (/Users/ardiewen/Projects/gatsby-wordpress-typescript-boilerplate/node_modules/gatsby-source-wordpress/src/steps/source-nodes/fetch-nodes/fetch-nodes-paginated.js:105:19)
    at Array.forEach (<anonymous>)
    at paginatedWpNodeFetch (/Users/ardiewen/Projects/gatsby-wordpress-typescript-boilerplate/node_modules/gatsby-source-wordpress/src/steps/source-nodes/fetch-nodes/fetch-nodes-paginated.js:95:11)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at sourcePreviews (/Users/ardiewen/Projects/gatsby-wordpress-typescript-boilerplate/node_modules/gatsby-source-wordpress/src/steps/preview/index.ts:330:26)
    at sourceNodes (/Users/ardiewen/Projects/gatsby-wordpress-typescript-boilerplate/node_modules/gatsby-source-wordpress/src/steps/source-nodes/index.ts:24:5)
    at runSteps (/Users/ardiewen/Projects/gatsby-wordpress-typescript-boilerplate/node_modules/gatsby-source-wordpress/src/utils/run-steps.ts:41:9)
    at runAPI (/Users/ardiewen/Projects/gatsby-wordpress-typescript-boilerplate/node_modules/gatsby/src/utils/api-runner-node.js:434:16)


 ERROR #gatsby-source-wordpress_112003 

 gatsby-source-wordpress 

        Encountered a critical error when running the sourceNodes.sourceNodes build step.
        See above for more information.

not finished source and transform nodes - 0.870s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Tested in both local custom preview server and Gatsby Cloud.

Minimal reproduction (client-side) available here:

https://github.com/ardiewen/gatsby-v3-preview-minimal-repro

NB: rename .env.sample to .env.development and add in your graphql url at the very minimum.

Minimal reproduction (cms-side) instructions:

1. used LocalWP to spin up a new Wordpress v5.7 locally
2. installed WP GraphQL 1.33 and WP Gatsby 1.0.8 via the plugin marketplace
3. configured WP Gatsby with local ngrok server, e.g.
   • Preview Instance: https://NGROK_ADDRESS.ngrok.io
   • Preview Webhook: https://NGROK_ADDRESS.ngrok.io/__refresh

Steps to reproduce

1. Run ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop on custom preview server (or configure gatsby cloud preview accordingly)

2. Open the default /sample-page/ from the minimal cms repro, and click Preview -> Preview in new tab (Note: this is with gutenberg enabled, but my production environment has the same problem with classic editor only)

   • Result: Preview successfully generated

3. Return to Wordpress, make a change to the title (e.g. "Sample Page v2") and click Preview -> Preview in new tab

   • Result: gatsby develop quits with the aforementioned error TypeError: Cannot read property 'reporter' of undefined

Alternate process combinations I've tried:

• Open page -> Skip Initial Preview (where no content changed) - Update content -> Preview -> Update content gain -> Preview

  • Result: first preview success, second preview errors out

• Open one page -> Skip Initial Preview (where no content changed) - Update content -> Preview -> Switch page -> Update content -> Preview

  • Result: first preview success, second preview errors out

Environment

System:
OS: macOS 11.2.3
CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.114
Firefox: 86.0
Safari: 14.0.3
npmPackages:
gatsby: ^3.1.2 => 3.2.0
gatsby-plugin-image: ^1.2.0 => 1.2.0
gatsby-plugin-manifest: ^3.2.0 => 3.2.0
gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
gatsby-plugin-sharp: ^3.2.0 => 3.2.0
gatsby-plugin-styled-components: ^4.2.0 => 4.2.0
gatsby-source-filesystem: ^3.2.0 => 3.2.0
gatsby-source-wordpress: ^5.2.0 => 5.2.0
gatsby-transformer-sharp: ^3.2.0 => 3.2.0

[ardiewen]

Should also note that I've tried commenting out my use of reporter here:
https://github.com/ardiewen/gatsby-v3-preview-minimal-repro/blob/57a9b96ba17b3021cf97776cb4f912084ff35686/gatsby-node.js#L35-L43

And that doesn't seem to resolve the issue unfortunately.

[igorbumba]

The same thing happens to me: #30610
It's really annoying, can't wrap my head around it.

[ardiewen]

@TylerBarnes tagging for visibility - I've downgraded to gatsby-source-wordpress@5.0.0-next.8 and the issue is resolved. This seems directly to be related to #29669

@igorbumba FYI

[igorbumba]

@ardiewen I got more problems by downgrading.

This is an example output:
gatsby-source-wordpress Fetching https://holographik-typeslog-backend-2021.bwp.zone/wp-content/uploads/2021/03/Monument-Grotesk-1-min-scaled.jpg is taking a long time time (longer than 15 seconds). This file is 97.53 KB

It's happening for all images, they exist and are reachable actually.

[ardiewen]

@igorbumba you can try 5.0.0? I only mentioned 5.0.0.-next.8 because it was the one prior to the breaking PR. Or you may need to look at other packages as well?

Here's what's confirmed working for me:

Client side:

"gatsby": "^3.2.1",
"gatsby-plugin-image": "1.0.0",
"gatsby-plugin-sharp": "3.0.0",
"gatsby-source-wordpress": "5.0.0",
"gatsby-transformer-sharp": "3.0.0",

Wordpress side:

 wp-graphql 1.2.6
 wp-gatsby 1.0.1

I haven't looked at other variations in my environment yet.

[TylerBarnes]

Hi @ardiewen and @igorbumba thanks for opening this and sorry for the troubles here! Fixing this is a high priority. I'll be out of the office tomorrow but back on Monday. If you're using Gatsby Cloud can you share your Gatsby Cloud dashboard URL's so I can investigate more closely when I'm back? If possible, it would also be helpful if I could be added as an admin on your WP sites - my email is tyler@gatsbyjs.com (no worries if you can't do that, I can try to reproduce without it too).

Thanks!

[ardiewen]

No worries @TylerBarnes ! I upgraded the source plugin to test a fix in 5.3.0 and have reverted back to 5.0.0 in production for the time being.

I have linked my minimal gatsby repo here:
https://github.com/ardiewen/gatsby-v3-preview-minimal-repro

I don't have a public minimal wordpress instance for this, but you can use this configuration to reproduce the issue 100%:

1. use LocalWP to spin up a new Wordpress v5.7 locally
2. install WP GraphQL 1.33 and WP Gatsby 1.0.8 via the plugin marketplace
3. preview instance localhost:8000
4. preview webhook localhost:8000/__refresh
5. no other plugins / configuration changes
6. I tested with the default sample page page

[TylerBarnes]

Great, thanks @ardiewen !

[igorbumba]

@ardiewen I downgraded to 5.0.0. but no change at all. Still got the same error. Tried clean build and clean preview a few times, but nothing:
TypeError: Cannot read property 'reporter' of undefined at forEach (/usr/src/app/www/node_modules/gatsby-source-wordpress/src/steps/source-nodes/fetch-nodes/fetch-nodes-paginated.js:105:19)

[TylerBarnes]

A fix is merged but not released yet. I'll update here when it's released

[TylerBarnes]

A fix is published in gatsby-source-wordpress@5.2.2