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

Created on 8 Jun 2020 · 15Comments · Source: gatsbyjs/gatsby

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

inkteam assigned webpacbabel bug

Source

Swizec

👍13

Most helpful comment

Hey. Thanks for the report. This should be fixed in [email protected]

ascorbic on 9 Jun 2020

👍6 👎2 🚀1 ❤1 🎉1

All 15 comments

Downgrading back to this version of everything fixes the problem:

  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.13.48 => 2.15.29 
    gatsby-image: 2.2.0 => 2.2.0 
    gatsby-plugin-catch-links: ^2.1.2 => 2.1.12 
    gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3 
    gatsby-plugin-google-analytics: ^2.1.20 => 2.1.20 
    gatsby-plugin-manifest: ^2.2.23 => 2.2.23 
    gatsby-plugin-mdx: ^1.0.22 => 1.0.47 
    gatsby-plugin-offline: ^3.0.16 => 3.0.16 
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.10 
    gatsby-plugin-sharp: ^2.2.31 => 2.2.31 
    gatsby-plugin-simple-analytics: ^1.0.1 => 1.0.1 
    gatsby-plugin-theme-ui: ^0.2.26 => 0.2.43 
    gatsby-plugin-twitter: ^2.1.14 => 2.1.14 
    gatsby-remark-copy-linked-files: ^2.1.28 => 2.1.28 
    gatsby-remark-embedder: ^2.0.1 => 2.0.1 
    gatsby-remark-giphy: ^1.0.4 => 1.0.4 
    gatsby-remark-images: ^3.1.28 => 3.1.28 
    gatsby-remark-relative-images: ^0.2.3 => 0.2.3 
    gatsby-remark-social-cards: ^0.4.1 => 0.4.1 
    gatsby-source-filesystem: ^2.1.33 => 2.1.33 
    gatsby-transformer-remark: ^2.6.37 => 2.6.45 
    gatsby-transformer-sharp: ^2.2.23 => 2.2.23 
  npmGlobalPackages:
    gatsby-cli: 2.7.54

Swizec on 8 Jun 2020

Even I'm facing the same issue when running gatsby build inside Github Actions. In mo system it works fine. I tried changing the versions as mentioned above, but it didn't help.

sarathm09 on 8 Jun 2020

Logs:

gatsby build --prefix-paths
success open and validate gatsby-configs - 0.045s
success load plugins - 1.026s
success onPreInit - 0.026s
success delete html and css files from previous builds - 0.010s
success initialize cache - 0.009s
success copy gatsby files - 0.018s
success onPreBootstrap - 1.189s
success createSchemaCustomization - 0.003s
success source and transform nodes - 3.049s
success building schema - 0.242s
success createPages - 0.000s
error 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.057s
Action failed: see logs above for details

sarathm09 on 8 Jun 2020

I also upgraded everything today and getting this same error. Everything works in development.

For me, it is introduced in version 2.22.21.

raae on 8 Jun 2020

👍1

Same error here. I can confirm that yarn add [email protected] solves the problem.

janosh on 8 Jun 2020

👍5

Same error. Gatsby 2.22.20 did not work for me. I am building an MDX maintained site. I have modified the error message to give me the file which normally shows up as undefined. Site builds properly in gatsby develop.

Not sure if the order of the plugins matter, but posting them here just in case.

module.exports = ({ contentPath = `${__dirname}/src/pages` }) => {
  return {
    plugins: [
      {
        resolve: 'gatsby-source-filesystem',
        options: {
          name: 'content',
          path: contentPath,
        },
      },
      {
        resolve: 'gatsby-plugin-react-helmet', 
        options: {},
      },
      {
        resolve: 'gatsby-remark-static-images', 
        options: {},
      },
      {
        resolve: 'gatsby-plugin-page-creator',
        options: {
          path: contentPath,
        },
      },
      {
        resolve: 'gatsby-plugin-mdx',
        options: {
          defaultLayouts: {
            content: require.resolve('./src/components/ContentLayout.js'),
            default: require.resolve('./src/components/PageLayout.js'),
          },
          gatsbyRemarkPlugins: [
            {
              resolve: 'gatsby-remark-static-images',
              options: {},
            },
          ],
        },
      },
      {
        resolve: 'gatsby-plugin-sass',
        options: {},
      },
      {
        resolve: 'gatsby-plugin-meta-redirect',
        options: {},
      },
    ],
  };
};

apipkin on 8 Jun 2020

Sometimes you don’t want to include the layout in every file, so gatsby-plugin-mdx 
offers the option to set default layouts in the gatsby-config.js plugin config. Set 
the key to the name set in the gatsby-source-filesystem config. If no matching 
default  layout is found, the default default layout is used.

From https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#default-layouts states that you may not want to do an export default in every file (only way I can currently get a build to move past the file is to add export default ()=>{} to the file reported). This feels like maybe a plugin order or something expected to work isn't inside one of the plugins.

apipkin on 8 Jun 2020

The webpack loader automatically picks up files in src/pages. Do you really need gatsby-source-filesystem and gatsby-plugin-page-creator?

janosh on 8 Jun 2020

👀2

@janosh Great question! If I remove the gatsby-plugin-page-creator, the error moves to the [theme]/src/pages/index.mdx file. But it does skip over all the "content" pages

apipkin on 8 Jun 2020

@janosh in my case I believe I need gatsby-source-filesystem for the images that come with pages. It's easier to manage files when everything that belongs to a page is in a folder and kept together.

Swizec on 8 Jun 2020

I think this issue is affecting docz users as well.

mpeyper on 9 Jun 2020

Hey. Thanks for the report. This should be fixed in [email protected]

ascorbic on 9 Jun 2020

👍6 👎2 🚀1 ❤1 🎉1

All good with [email protected]

"dependencies": {
    "@mdx-js/mdx": "1.6.5",
    "@mdx-js/react": "1.6.5",
    "gatsby": "2.23.2",
    "gatsby-cli": "2.12.44",
    "gatsby-image": "2.4.6",
    "gatsby-plugin-manifest": "2.4.10",
    "gatsby-plugin-mdx": "1.2.14",
    "gatsby-plugin-offline": "2.2.10",
    "gatsby-plugin-react-helmet": "3.3.3",
    "gatsby-plugin-sharp": "2.6.10",
    "gatsby-plugin-styled-components": "3.3.3",
    "gatsby-plugin-typescript": "2.4.4",
    "gatsby-remark-autolink-headers": "2.3.4",
    "gatsby-source-filesystem": "2.3.10",
    "gatsby-transformer-json": "2.4.4",
    "gatsby-transformer-sharp": "2.5.4",
    "mdx-utils": "0.2.0",
    "polished": "3.4.1",
    "prism-react-renderer": "1.1.1",
    "react": ">= 16.10.2",
    "react-dom": ">= 16.10.2",
    "react-helmet": "5.2.0",
    "react-live": "2.2.2",
    "styled-components": "4.4.1"
}

karl-kallavus on 9 Jun 2020

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`],
      },
    },

ivoneijr on 11 Jul 2020

👍3

I have the same error

System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.2/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.2/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.75
Firefox: 79.0
Safari: 13.1.2
npmPackages:
gatsby: 2.24.75 => 2.24.75
gatsby-cli: ^2.12.107 => 2.12.107
gatsby-plugin-create-client-paths: ~2.3.13 => 2.3.13
gatsby-plugin-offline: ^3.2.31 => 3.2.31
gatsby-plugin-react-helmet: ~3.3.14 => 3.3.14
gatsby-plugin-root-import: ~2.0.5 => 2.0.5
gatsby-plugin-sass: ~2.3.16 => 2.3.16
gatsby-plugin-static-folders: ~1.0.1 => 1.0.1
gatsby-plugin-web-font-loader: ~1.0.4 => 1.0.4
npmGlobalPackages:
gatsby-cli: 2.12.107