gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js

[tiagofsanchez]

Description

I run gatsby build on CLI for my blog (I am using gatsby-theme-blog and you can find it in the following link, the repo for my blog.

This was done following your tutorial link to prepare your site to be publish. The fist time I did it, it did run well, however after running the audit with Lighthouse and going through adding manifest and all the other good stuff, it is not working.

I have the following error on my console

ERROR #11328

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

/Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js

If I go a couple of commits back (cf09d3e986c4b01efc0941d5192c7fd47d4be24e) to this one I am able to run gatsby build.

After further testing I notice that gatsby-plugin-offlineis the cause of the issue, not sure why that is the case.

Could you please point me in the right direction?

[moniac]

I have the exact same issue, down to the same path, have you found a solution?

[dkthehuman]

It seems that this error only started in the latest release, so you can install an older release to get your build working until this stops being an issue.

Quick Fix Instructions

1. In package.json, change the line "gatsby-plugin-offline": "^2.2.10" to "gatsby-plugin-offline": "2.2.9"
2. Run npm install to update the package
3. Run gatsby build

[tiagofsanchez]

@moniac, you can do 2 things, do what @dkthehuman suggested to do or uninstall the gatsby-plugin-offline.

Will be closing the issue for now.
Thank you!

[tiagofsanchez]

Had to reopened the issue as this is persisting and only works without the gatsby-plugin-offline
@dkthehuman , it didn't work as intended.
However, without the plugin gets build.

[dkthehuman]

@tiagofsanchez Can you check your package-lock.json and verify that "gatsby-plugin-offline" has version 2.2.9? (Checking there makes sure that you specified the version correctly and also ran npm install to update the package.)

FWIW, I faced the same problem and the issue disappeared after downgrading from 2.2.10 to 2.2.9. Also, regardless of whether downgrading fixes the build for you as well, I think it's worth keeping this issue open so that the maintainers knows that 2.2.10 is causing problems.

[moniac]

@dkthehuman I did as you suggested with the downgrading and reinstalling and can confirm it builds now without issue, the service worker appears to be registered. Does it work for you functionality wise with the offline support? Thank you for the help.

[dkthehuman]

@moniac Yup, offline support seems to work correctly for me.

[tiagofsanchez]

Yes, it does work for me as well.

[davidbailey00]

Really weird, I've checked this out and only experiencing that issue when I attempt to deploy to Now, but not locally. Might be something to do with Node.js versions

[davidbailey00]

Could you run gatsby info --clipboard and paste the result here? Still not having this issue testing locally with Node 8, 10 and 12

[davidbailey00]

I think if you run npm upgrade --latest it should fix this error - seems to be caused by a version mismatch of some kind. Could you try this and confirm? If not, would love to see your gatsby info output!

[tiagofsanchez]

Hi @davidbailey00, thank you for jumping in.
So the gatsby-info returns the following

 System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.1 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 66.0.1
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.67 => 2.13.67
    gatsby-plugin-manifest: ^2.2.9 => 2.2.9
    gatsby-plugin-offline: ^2.2.9 => 2.2.10
    gatsby-theme-blog: ^1.0.2 => 1.0.2
  npmGlobalPackages:
    gatsby-cli: 2.7.30

After upgrading npm I am go to go, and it did work.
__So, to your point it is a version mismatch__

Thank you!

[dkthehuman]

Running npm upgrade fixed it for me, too. Thanks @davidbailey00!

[adhanadeepak]

@dkthehuman Thanks man, I was on ^3.0.10 and was facing the same issue. I also fixed it by downgrading gatsby-plugin-offline to ^2.2.9

[smakosh]

@adhanadeepak 's suggestion didn't work out for me

[madrus]

In my case, I have had the same issue. Accidentally found the following solution. When I had the error, my relevant folder structure was

blog
-> blog.js
-> index.js

My index.js had just this one line: export * from './blog'. When I removed index.js and renamed blog.js to index.js, the error was gone.

[fidiego]

I had this issue and it was due to use of a file, pages/components.js, that didn't export a default. I modified it to export a dummy component and it resolved the issue.

[JamesDelfini]

I had this issue and it was due to use of a file, pages/components.js, that didn't export a default. I modified it to export a dummy component and it resolved the issue.

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

@fidiego same error and has similar issue, fix by checking all pages has export default export and found one in components that has none.

[GGrassiant]

I had a similar issue because in pages I had a file in which I was defining types for interfaces etc. used in the various pages.
Locally gatsby develop worked but when building (either through the console or deploying to Heroku) it was failing.
Moving it to another folder and making sure all pages are default exported solved the issue.

[Alecell]

I think is useful to tell that in my case the error was happening because of the gatsby-plugin-page-creator on the ignore property. I was using file ignoring as this *.png, *.ts, *.scss and so on. But this don't work on build (despite the docs shows examples like this), the way I made it work was switching from this:

ignore:  [ 
          '*.png',
          '*.jpg',
          '*.svg',
          '*.ts', 
          '*.scss',
          '*.json',
],

to that:

ignore:  [ 
          '**/**.png',
          '**/**.jpg',
          '**/**.svg',
          '**/**.ts', 
          '**/**.scss',
          '**/**.json',
],

[hzburki]

gatsby info --clipboard returns the following for me;

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0.1
    Safari: 14.0
  npmPackages:
    gatsby: ^2.3.24 => 2.24.47
    gatsby-image: ^2.4.9 => 2.4.16
    gatsby-link: ^2.0.16 => 2.4.13
    gatsby-paginate: ^1.0.17 => 1.1.1
    gatsby-plugin-google-analytics: ^2.0.18 => 2.3.13
    gatsby-plugin-intercom-spa: ^0.2.0 => 0.2.0
    gatsby-plugin-netlify: ^2.0.13 => 2.3.13
    gatsby-plugin-react-helmet: ^3.0.5 => 3.3.10
    gatsby-plugin-remove-trailing-slashes: ^2.0.11 => 2.3.11
    gatsby-plugin-sass: ^2.0.11 => 2.3.12
    gatsby-plugin-sharp: ^2.0.37 => 2.6.27
    gatsby-plugin-smoothscroll: ^1.1.0 => 1.2.0
    gatsby-source-filesystem: ^2.3.14 => 2.3.24
    gatsby-source-graphql: ^2.1.34 => 2.7.1
    gatsby-source-instagram: 0.8.0-beta.0 => 0.8.0-beta.0
    gatsby-source-wordpress: ^3.0.61 => 3.3.28
    gatsby-transformer-sharp: ^2.1.19 => 2.5.13
  npmGlobalPackages:
    gatsby-cli: 2.12.101

I am getting the same error. npm upgrade did not fix it for me. All my components and pages are exported with the default option.

[Cassianosch]

Same error!

[Dakojr]

Same Error !

[hzburki]

For me, it wasn't a bug in Gatsby or any of the packages. I was exporting a schema object for yup validation for a form. Moving that inside the Form Component fixed the issue.