Next.js: TypeError: Cannot read property 'edges' of undefined

[4levels]

Examples bug report

Example name

with-react-relay-network-modern

Describe the bug

The server side render cycle seems to be unable to get the graphql data when it tries to evaluate props.viewer.allBlogPosts.edges: TypeError: Cannot read property 'edges' of undefined. Simply adding a check if props.viewer.allBlogPosts is defined seems to resolve this. However, during debugging, the first time this render happens, the prop seem to be valid, only the second time it yields undefined causing the error.

To Reproduce

1. Follow the installation instructions of this sample using the yarn create next-app flow
2. Follow the link to http://localhost:3000
3. Refreshing the page results in the error

Expected behavior

An error free list of Blog posts after refreshing the page

System information

• OS: Debian Linux - 4.15
• Browser: Chrome, console
• Version of Next.js: latest (from package.json)

Additional context

There seems to be another issue in this example's README.md file: the npm / yarn setup uses the name with-react-relay-network-modern while the manual download instructions use the with-relay-modern example - confusing!

TypeError: Cannot read property 'edges' of undefined
BlogPosts
./components/BlogPosts.js:9
   6 | console.log(props.viewer.allBlogPosts)
   7 | return (
   8 |   <div>
>  9 |     <h1>Blog posts</h1>
  10 |     {props.viewer.allBlogPosts.edges.map(({ node }) => (
  11 |       <BlogPostPreview key={node.id} post={node} />
  12 |     ))}
View compiled
▼ 14 stack frames were expanded.
processChild
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2888:14
resolve
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5
ReactDOMServerRenderer.render
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22
ReactDOMServerRenderer.read
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29
renderToString
/with-react-relay-network-modern-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27
render
/with-react-relay-network-modern-app/node_modules/next-server/dist/server/render.js:81:16
renderPage
/with-react-relay-network-modern-app/node_modules/next-server/dist/server/render.js:230:20
_callee2$
./node_modules/next/dist/pages/_document.js:4
tryCatch
/with-react-relay-network-modern-app/node_modules/regenerator-runtime/runtime.js:45:40
Generator.invoke [as _invoke]
/with-react-relay-network-modern-app/node_modules/regenerator-runtime/runtime.js:271:22
Generator.prototype.(anonymous function) [as next]
/with-react-relay-network-modern-app/node_modules/regenerator-runtime/runtime.js:97:21
asyncGeneratorStep
./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5
_next
./node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27
(anonymous function)
/with-react-relay-network-modern-app/.next/server/static/development/pages/_document.js:301:7
▲ 14 stack frames were expanded.

[4levels]

I just went to the steps to deply it using now and this resulted in another error on the deployed url, mentioning the use of getInitialProps should be avoided. When I do remove the call to getInitialProps in pages/_app.js the issue disappeared. I don't understand why as to me it seems the getInitialProps is needed for setting up the Relay environment...

https://with-react-relay-network-modern-qnrjccawc.now.sh

Compiled with warnings.
Jul 27 2019 19:26:25:163
...package.json
./node_modules/encoding/lib/iconv-loader.js
Jul 27 2019 19:26:25:163
...package.json
Critical dependency: the request of a dependency is an expression
Jul 27 2019 19:26:25:319
...package.json
Warning: You have opted-out of Automatic Prerendering due to `getInitialProps` in `pages/_app`.
Jul 27 2019 19:26:25:319
...package.json
Read more: https://err.sh/next.js/opt-out-automatic-prerendering
Jul 27 2019 19:26:25:729
...package.json
> Build error occurred
Jul 27 2019 19:26:25:731
...package.json
Error: automatic static optimization failed: found page without a React Component as default export in 
Jul 27 2019 19:26:25:731
...package.json
pages/__generated__/pages_indexQuery.graphql
Jul 27 2019 19:26:25:731
...package.json
See https://err.sh/zeit/next.js/page-without-valid-component for more info.
Jul 27 2019 19:26:25:731
...package.json
    at build (/tmp/4f82607f/node_modules/next/dist/build/index.js:6:3751)
Jul 27 2019 19:26:25:731
...package.json
    at <anonymous>
Jul 27 2019 19:26:25:731
...package.json
    at process._tickCallback (internal/process/next_tick.js:188:7)
Jul 27 2019 19:26:25:755
...package.json
error Command failed with exit code 1.
Jul 27 2019 19:26:25:756
...package.json
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Jul 27 2019 19:26:25:767
...package.json
Error: Exited with 1
Jul 27 2019 19:26:25:767
...package.json
    at ChildProcess.child.on (/tmp/b6b8e02846e9d0db/.build-utils/node_modules/@now/build-utils/dist/fs/run-user-scripts.js:30:24)
Jul 27 2019 19:26:25:767
...package.json
    at emitTwo (events.js:126:13)
Jul 27 2019 19:26:25:767
...package.json
    at ChildProcess.emit (events.js:214:7)
Jul 27 2019 19:26:25:767
...package.json
    at maybeClose (internal/child_process.js:925:16)
Jul 27 2019 19:26:25:767
...package.json
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

[4levels]

After re-deploying with the getInitialProps removed, I'm getting the following error. This seems related to the way Relay is using subfolders __generated__ inside the pages folder.. so still no joy so far. Locally this seems to be working now, but I do get a short flash of another error message Cannot read property 'find' of underfined, before it's being replaced by a Loading message that is than replaced by the list of Blog posts.

Compiled with warnings.
--
Jul 27 2019 19:26:25:163 | ...package.json | ./node_modules/encoding/lib/iconv-loader.js
Jul 27 2019 19:26:25:163 | ...package.json | Critical dependency: the request of a dependency is an expression
Jul 27 2019 19:26:25:319 | ...package.json | Warning: You have opted-out of Automatic Prerendering due to `getInitialProps` in `pages/_app`.
Jul 27 2019 19:26:25:319 | ...package.json | Read more: https://err.sh/next.js/opt-out-automatic-prerendering
Jul 27 2019 19:26:25:729 | ...package.json | > Build error occurred
Jul 27 2019 19:26:25:731 | ...package.json | Error: automatic static optimization failed: found page without a React Component as default export in
Jul 27 2019 19:26:25:731 | ...package.json | pages/__generated__/pages_indexQuery.graphql
Jul 27 2019 19:26:25:731 | ...package.json | See https://err.sh/zeit/next.js/page-without-valid-component for more info.
Jul 27 2019 19:26:25:731 | ...package.json | at build (/tmp/4f82607f/node_modules/next/dist/build/index.js:6:3751)
Jul 27 2019 19:26:25:731 | ...package.json | at <anonymous>
Jul 27 2019 19:26:25:731 | ...package.json | at process._tickCallback (internal/process/next_tick.js:188:7)
Jul 27 2019 19:26:25:755 | ...package.json | error Command failed with exit code 1.
Jul 27 2019 19:26:25:756 | ...package.json | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Jul 27 2019 19:26:25:767 | ...package.json | Error: Exited with 1
Jul 27 2019 19:26:25:767 | ...package.json | at ChildProcess.child.on (/tmp/b6b8e02846e9d0db/.build-utils/node_modules/@now/build-utils/dist/fs/run-user-scripts.js:30:24)
Jul 27 2019 19:26:25:767 | ...package.json | at emitTwo (events.js:126:13)
Jul 27 2019 19:26:25:767 | ...package.json | at ChildProcess.emit (events.js:214:7)
Jul 27 2019 19:26:25:767 | ...package.json | at maybeClose (internal/child_process.js:925:16)
Jul 27 2019 19:26:25:767 | ...package.json | at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

[stan-sack]

Can confirm that i'm seeing this as well but in example with-relay-modern. It caused by having the __generated__ folder inside the page folder which apparently isn't supported anymore. I rolled back to [email protected] which works still.

[atrauzzi]

@stan-sack -- Where does it say this isn't supported?

[4levels]

Hi @atrauzzi,

"apparently" isn't supported != "is not supported". We're just guestimating what could be causing this. I do recall reading somewhere that the app folder cannot contain anything else besides valid jsx components since release 9.
A quick Google for the error message "Error: automatic static optimization failed: found page without a React Component as default export" yielded this issue which seems related: #7836

[atrauzzi]

I wonder why it couldn't just _ignore_ anything without a default export and not try generating a page for it.

[stan-sack]

This PR == "is not supported"

[kenips]

Running into same issue here going to 9.x. I don't think it's reasonable for a Relay application not to have generated files alongside pages. For now we are moving all the queries to another folder called page_queries, but having them in different location is definitely an inconvenience.

[w01fgang]

I have the same issue. There is no allBlogPosts field in viewer on the server, only on the client. I printed to the console the response from the server there is allBlogPosts field with the same records as on the client. I have no idea why viewer is empty on the server.
Also, I tried to move generated files to a different place using artifactDirectory for the relay babel plugin, that didn't help.

[4levels]

Hi @kmjennison, thanks for referencing this in your project! Looks very promising to me how you setup Relay to use a different artifact directory.
I'll be giving this a try asap and give feedback here.

[Timer]

Closing as we have comprehensive new examples that show how to use Relay. Thanks!