ERROR #11328 A page component must export a React component ... undefined

Description

I’m getting a funky error 11328 with unhelpful debugging information when I run gatsby build. Running gatsby develop works fine.

Steps to reproduce

Updated all my dependencies to latest, tried to build the project, it failed.

 ERROR #11328 

A page component must export a React component for it to be valid. Please make sure this file exports a React component:

undefined

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

Here’s a minimal-ish repository I extracted from my project where this fails: https://github.com/Swizec/reactd3lander/tree/error-11328

It correctly shows a single “Hello world” page when you run development mode.

Expected result

The project should build

Actual result

 ERROR #11328 

A page component must export a React component for it to be valid. Please make sure this file exports a React component:

undefined

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

Environment

  System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.14.0 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 71.0
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.1 => 2.23.1 
    gatsby-image: 2.4.6 => 2.4.6 
    gatsby-plugin-catch-links: ^2.3.4 => 2.3.4 
    gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3 
    gatsby-plugin-google-analytics: ^2.3.3 => 2.3.3 
    gatsby-plugin-manifest: ^2.4.10 => 2.4.10 
    gatsby-plugin-mdx: ^1.2.14 => 1.2.14 
    gatsby-plugin-react-helmet: ^3.3.3 => 3.3.3 
    gatsby-plugin-sharp: ^2.6.10 => 2.6.10 
    gatsby-plugin-simple-analytics: ^1.0.3 => 1.0.3 
    gatsby-plugin-theme-ui: ^0.3.0 => 0.3.0 
    gatsby-plugin-twitter: ^2.3.3 => 2.3.3 
    gatsby-remark-copy-linked-files: ^2.3.4 => 2.3.4 
    gatsby-remark-embedder: ^2.1.1 => 2.1.1 
    gatsby-remark-giphy: ^1.0.4 => 1.0.4 
    gatsby-remark-images: ^3.3.9 => 3.3.9 
    gatsby-remark-relative-images: ^0.3.0 => 0.3.0 
    gatsby-remark-social-cards: ^0.4.1 => 0.4.1 
    gatsby-source-filesystem: ^2.3.10 => 2.3.10 
    gatsby-transformer-remark: ^2.8.14 => 2.8.14 
    gatsby-transformer-sharp: ^2.5.4 => 2.5.4 
  npmGlobalPackages:
    gatsby-cli: 2.7.54

[ascorbic]

Hey. Thanks for the report. This should be fixed in gatsby@2.23.2

[ivoneijr]

One more thing to add

If you are using typescript with gatsby-plugin-page-creator and styled-components is very common create a file named styles.tsx , you must be sure you are ignoring this files on gatsby-plugin-page-creator in gatsby-config.js

{
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}\\src\\pages`,
        ignore: [`**/styles.js`, `**/styles.tsx`],
      },
    },