Nodachisoft Nodachisoft logo, Katana Sword Icon

@Amaji✎ Update January -24-2021

How to solve "A page component must export a React component for it to be valid. Please make sure this file exports a React component:" error message when building with Gatsby

What I write in this page

I use Gatsby to implement this blog and some web apps, but when we build it, I get an error message.

The error message "A page component must export a React component for it to be valid. Please make sure this file exports a React component:" was displayed and the build failed.

Please make sure that this file exports a React component:" was displayed and the build failed.

Environments

OS: Windows 10 Home, version 2004
node-js: v12.18.2
react: 16.13.1
react-dom : 16.13.1
react-headroom : 3.0.0
react-helmet : 6.1.0
react-redux : 7.2.2
redux : 4.0.5
typescript": 4.0.5

Error messages

I got the following error message when executing a build with the gatsby build command. This happened right after I had just integrated a small web app into Gatsby.

ErrorMessageLog

success createPages - 3.844s
success Checking for changed pages - 0.002s

 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.243s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nodachisoft_www@1.0.1 build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nodachisoft_www@1.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\amaji\scoop\persist\nodejs-lts\cache\_logs\2021-01-24T02_08_05_551Z-debug.log

From the error message (#11328), it looks like "You have to export the correct React Component for the Page component in Gatsby! Please make sure this file exports the correct React Component! Make sure this file exports the correct React Component: File is undefined" .

The error log does not tell us the component because it says undefined, but it seems that the build failed because the createPagesSatefully process was not done correctly during the build. It seems that the createPagesSatefully process during the build was not done correctly, and the build failed.

Also, at the end of the error log above, there is a message saying that a complete log is output to a separate file. If you look at it, you can see the details of the interrupted part and the problem. So, let's check.

debug.log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node.exe',
1 verbose cli   'C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.5
3 info using node@v12.18.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle nodachisoft_www@1.0.1~prebuild: nodachisoft_www@1.0.1
6 info lifecycle nodachisoft_www@1.0.1~build: nodachisoft_www@1.0.1
7 verbose lifecycle nodachisoft_www@1.0.1~build: unsafe-perm in lifecycle true
8 verbose lifecycle nodachisoft_www@1.0.1~build: PATH: xxxx
9 verbose lifecycle nodachisoft_www@1.0.1~build: CWD: C:\Users\amaji\Desktop\dev\htdocs\nodachisoft_www
10 silly lifecycle nodachisoft_www@1.0.1~build: Args: [ '/d /s /c', 'gatsby build' ]
11 silly lifecycle nodachisoft_www@1.0.1~build: Returned: code: 1  signal: null
12 info lifecycle nodachisoft_www@1.0.1~build: Failed to exec build script
13 verbose stack Error: nodachisoft_www@1.0.1 build: `gatsby build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\amaji\scoop\apps\nodejs-lts\12.18.2\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\amaji\scoop\apps\nodejs-lts\12.18.2\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid nodachisoft_www@1.0.1
15 verbose cwd C:\Users\amaji\Desktop\dev\htdocs\nodachisoft_www\deploy
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node.exe" "C:\\Users\\amaji\\scoop\\apps\\nodejs-lts\\current\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.18.2
19 verbose npm  v6.14.5
20 error code ELIFECYCLE
21 error errno 1
22 error nodachisoft_www@1.0.1 build: `gatsby build`
22 error Exit status 1
23 error Failed at the nodachisoft_www@1.0.1 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Hmm, from this debug log, it seems that the gatsby build command was executed and the child process (or some process) launched from the npm script stop abnormally. The only thing I can figure out is that the process stopped because of an abnormal exit code (Exit Status 1).

Check the codes.

To solve the problem. In order to solve the problem, I checked the React program that I had just created in Gatsby. In particular, Page Component seemed to be the target of the error, so I checked the Page Component related items and found something that looked bad.

Directory_Structure

pages
 +-webapp
   +-app1
     +-index.tsx
     +-app.ts

The folder structure was as shown above, and the ".ts" file (TypeScript file) was placed under "pages" path. And in this "app.ts" file, functions are exported.

The same thing probably happens with js.

This seems to be the cause of the problem, so I'll move it from under "pages" directory path to another location.

Result

After moving .ts files from under "pages" to the other path, gatsby build command was successful! yay.

Sucessful

success createPages - 4.094s
success Checking for changed pages - 0.002s
success createPagesStatefully - 0.420s
success updating schema - 0.082s

Good!

Websites and references that were very helpful.

Page update history

Update	Modified Content
	None

Message sent

Thank you for your message.

Something error has occured!

Sorry. The Error has occurred.We apologize for the inconvenience.Please try again in a few minutes or contact us via DM below.

Twitter:@NodachiSoft_eng

Name:

Replay To:

Message:

Back

Check the content!

Send the following information to us. If you are happy with your submission, please click "Send". If you want to modify it, please click "Back".

Name:

Reply To:

Message:

Enter a confirmation key to make sure that you are not operating from a Robot.

Confirmation Key is 95

Confirmation Key 2 digits: ^*required

Back

Go to Confirmation

Entry fields

Name ^*optional

Email, Twitter and other contact information ^*optional

Messasge ^{*Up to 1000 characters}

Go to Confirmation

There are 2 articles that may be relevant!

MyNote:Summary of changes in Gatsby versions, My website build time is changed

#Gatsby✎ 2021-12-19

MyNote:Summary of changes in Gatsby versions, My website build time is changed

Easily decorate markdown text in Gatsby (underline, highlight, bold, etc.)

#Gatsby✎ 2021-01-30

Describes an easy way to decorate with Gatsby markdown. Apply underlining, highlighting, bolding, dotted lines, etc. to a portion of text without omitting html tags.

Table Of Contents