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! 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.logFrom 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 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).
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.tsThe 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.082sGood!
| Update | Modified Content |
|---|---|
| None |
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: