Error on creating Pages on the build command

[williamcosta]

Description

My build not is created with error in creating pages.

I use Gatsby with TypeScript. My pages are created inside the pages folder with the tsx extension

Steps to reproduce

Run npm run build

Expected result

Build my sites page

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.058s

Environment

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - ~/.nvm/versions/node/v12.10.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.10.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 85.0.4183.121
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.67 => 2.24.67 
    gatsby-image: ^2.4.20 => 2.4.20 
    gatsby-plugin-asset-path: ^2.0.2 => 2.0.2 
    gatsby-plugin-emotion: ^4.3.12 => 4.3.12 
    gatsby-plugin-google-analytics: ^2.3.15 => 2.3.15 
    gatsby-plugin-google-tagmanager: ^2.3.14 => 2.3.14 
    gatsby-plugin-manifest: ^2.4.33 => 2.4.33 
    gatsby-plugin-offline: ^3.2.30 => 3.2.30 
    gatsby-plugin-react-helmet: ^3.3.12 => 3.3.12 
    gatsby-plugin-sharp: ^2.6.38 => 2.6.38 
    gatsby-plugin-sitemap: ^2.4.14 => 2.4.14 
    gatsby-plugin-typescript: ^2.4.18 => 2.4.21 
    gatsby-source-filesystem: ^2.3.32 => 2.3.32 
    gatsby-transformer-sharp: ^2.5.16 => 2.5.16 
  npmGlobalPackages:
    gatsby: 2.24.67

[herecydev]

It would help if you could provide a minimal reproduction. Have you imported react into the file?

[williamcosta]

Yes, I imported React into the file. Currently, my file looks like this:

import React from 'react'

// Here I importing some components to the page

const IndexPage = () => (
    <div>Index Page</div>
);

export default IndexPage

(I just removed some components that would not help in the example)

However, even with this simple example, the error occurred. I went back to a previous branch where I hadn't switched to TypeScript yet and the build happens.

I'm thinking it might be something with the integration of Gatsby with TypeScript

[herecydev]

I've create a repo that works; hopefully you can see any differences: https://github.com/herecydev/gatsby-starter

[williamcosta]

Thanks @herecydev

I'll look at this example and see what may be different about my project.

I'll be back soon with feedback.

[williamcosta]

@herecydev I found the build problem. I created some partials of my pages inside the pages folder, with the following path ./src/pages/partials/[partial_name]/index.tsx in the build I was trying to create pages from these partials as well.

The solution I saw is to put an underscore before the file names, correct?

In the npm run start the file names without underscore working, but in npm run build not working and cause a error build.

[herecydev]

Not sure, sounds like something I wouldn't recommend anyway. Pages should be very clear; each file corresponding to a public-facing route. I would then typically have a components folder that houses all other "partials" or react components

[pvdz]

@williamcosta maybe you could post the repository with the site so we can be of better service? It's a bit difficult to help when we don't see the code.

[williamcosta]

I will review how to do this, thank you @herecydev

@pvdz I will not be able to put the repository here as it is a private project of the company. But we have already discovered what the error was.