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.
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.
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! email@example.com build: `gatsby build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the firstname.lastname@example.org 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.
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 email@example.com 3 info using firstname.lastname@example.org 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle email@example.com~prebuild: firstname.lastname@example.org 6 info lifecycle email@example.com~build: firstname.lastname@example.org 7 verbose lifecycle email@example.com~build: unsafe-perm in lifecycle true 8 verbose lifecycle firstname.lastname@example.org~build: PATH: xxxx 9 verbose lifecycle email@example.com~build: CWD: C:\Users\amaji\Desktop\dev\htdocs\nodachisoft_www 10 silly lifecycle firstname.lastname@example.org~build: Args: [ '/d /s /c', 'gatsby build' ] 11 silly lifecycle email@example.com~build: Returned: code: 1 signal: null 12 info lifecycle firstname.lastname@example.org~build: Failed to exec build script 13 verbose stack Error: email@example.com 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 firstname.lastname@example.org 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 email@example.com build: `gatsby build` 22 error Exit status 1 23 error Failed at the firstname.lastname@example.org 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).
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.
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.
After moving .ts files from under "pages" to the other path,
gatsby build command was successful! yay.
success createPages - 4.094s success Checking for changed pages - 0.002s success createPagesStatefully - 0.420s success updating schema - 0.082s
Thank you for your message.
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_engName:
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: