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

ardiewen commented 3 years ago

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:

used LocalWP to spin up a new Wordpress v5.7 locally
installed WP GraphQL 1.33 and WP Gatsby 1.0.8 via the plugin marketplace
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

Run ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop on custom preview server (or configure gatsby cloud preview accordingly)
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
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 commented 3 years ago

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 commented 3 years ago

The same thing happens to me: https://github.com/gatsbyjs/gatsby/issues/30610 It's really annoying, can't wrap my head around it.

ardiewen commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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%:

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

TylerBarnes commented 3 years ago

Great, thanks @ardiewen !

igorbumba commented 3 years ago

@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 commented 3 years ago

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

TylerBarnes commented 3 years ago

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

gatsbyjs / gatsby