Unable to build lesson 14 (exercise 13) in the course

[JESii]

When I attempt to build exercise 13, it throws an error about a problem in exercise 7 -- even though I completed that exercise successfully some time ago

npm run build

jseidel@edp34:[exercise-13--use-the-server-side-rendering-method->]~/dev/egghead-beginners-guide-nextjs/exercises/exercise-13--use-the-server-side-rendering-method$ npm run build

> exercise-13@1.0.0 build /Users/jseidel/dev/egghead-beginners-guide-nextjs/exercises/exercise-13--use-the-server-side-rendering-method
> next build

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

../exercise-07--override-the-app-component/pages/_app.tsx:4:11. // <===== Exercise 7?
Type error: 'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.

  2 |
  3 | const App = ({ Component, pageProps }: AppProps) => {
> 4 |   return <Component {...pageProps} title="My Crazy Title" />
    |           ^
  5 | }
  6 |
  7 | export default App
info  - Checking validity of types .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! exercise-13@1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the exercise-13@1.0.0 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!     /Users/jseidel/.npm/_logs/2022-10-29T12_59_25_123Z-debug.log

Debug log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/jseidel/.nvm/versions/node/v14.17.0/bin/node',
1 verbose cli   '/Users/jseidel/.nvm/versions/node/v14.17.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.13
3 info using node@v14.17.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle exercise-13@1.0.0~prebuild: exercise-13@1.0.0
6 info lifecycle exercise-13@1.0.0~build: exercise-13@1.0.0
7 verbose lifecycle exercise-13@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle exercise-13@1.0.0~build: PATH: /Users/jseidel/.nvm/versions/node/v14.17.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/jseidel/dev/egghead-beginners-guide-nextjs/exercises/exercise-13--use-the-server-side-rendering-method/node_modules/.bin:/Users/jseidel/.rvm/gems/ruby-2.7.6/bin:/Users/jseidel/.rvm/gems/ruby-2.7.6@global/bin:/Users/jseidel/.rvm/rubies/ruby-2.7.6/bin:/Users/jseidel/.rvm/bin:/Users/jseidel/.nvm/versions/node/v14.17.0/bin:~/.dotfiles/bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin::/usr/local/opt/android-sdk/tools:/usr/local/opt/android-sdk/platform-tools:/Users/jseidel/bin:/Users/jseidel/perl5/bin:/usr/local/mysql/bin:/Users/jseidel/dev/Mongodb/bin:/usr/local/heroku/bin:/usr/local/go/bin
9 verbose lifecycle exercise-13@1.0.0~build: CWD: /Users/jseidel/dev/egghead-beginners-guide-nextjs/exercises/exercise-13--use-the-server-side-rendering-method
10 silly lifecycle exercise-13@1.0.0~build: Args: [ '-c', 'next build' ]
11 silly lifecycle exercise-13@1.0.0~build: Returned: code: 1  signal: null
12 info lifecycle exercise-13@1.0.0~build: Failed to exec build script
13 verbose stack Error: exercise-13@1.0.0 build: `next build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/jseidel/.nvm/versions/node/v14.17.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:376:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/jseidel/.nvm/versions/node/v14.17.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:376:20)
13 verbose stack     at maybeClose (internal/child_process.js:1055:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid exercise-13@1.0.0
15 verbose cwd /Users/jseidel/dev/egghead-beginners-guide-nextjs/exercises/exercise-13--use-the-server-side-rendering-method
16 verbose Darwin 20.6.0
17 verbose argv "/Users/jseidel/.nvm/versions/node/v14.17.0/bin/node" "/Users/jseidel/.nvm/versions/node/v14.17.0/bin/npm" "run" "build"
18 verbose node v14.17.0
19 verbose npm  v6.14.13
20 error code ELIFECYCLE
21 error errno 1
22 error exercise-13@1.0.0 build: `next build`
22 error Exit status 1
23 error Failed at the exercise-13@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Why is it looking at exercise 7 when I'm trying to build exercise 13?

So I figured, what the heck, I'll just remove exercise-07 completely so that it can't cause a problem.

But now, when I try to build exercise-13, it's complaining about exercise-09!

npm run build

> exercise-13@1.0.0 build /Users/jseidel/dev/egghead-beginners-guide-nextjs/exercises/exercise-13--use-the-server-side-rendering-method
> next build

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

../exercise-09--create-custom-style/pages/_app.tsx:7:11
Type error: 'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.

   5 |
   6 | const App = ({ Component, pageProps }: AppProps) => {
>  7 |   return <Component {...pageProps} />
     |           ^
   8 | }
   9 |
  10 | export default App
info  - Checking validity of types .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! exercise-13@1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the exercise-13@1.0.0 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!     /Users/jseidel/.npm/_logs/2022-10-29T13_06_41_926Z-debug.log

[nikolovlazar]

Thanks for opening this issue @JESii. I'll be taking a look one of these days and will let you know.

[nikolovlazar]

@JESii which node/npm versions did you use? I just ran npm build inside exercises/exercise-13--use-the-server-side-rendering-method and it didn't fail. I'm using node version v16.14.2 and npm version 8.5.0. Can you try with these versions, and if it works I'll update the README.md file to let other students know about the node/npm versions.

Also, sorry for the late reply.

[nikolovlazar]

@JESii I pushed a new comment that fixes the package versions and resolutions. I think the issue might be in the resolutions property in the package.json file. Can you pull the latest change and try again?

Fix: https://github.com/nikolovlazar/egghead-beginners-guide-nextjs/commit/3bd9d211b5550c6d49c83e18d3fac088235badde

[JESii]

I’ve been on 14; I’ll try 16… thanks

Jon Seidel, CMC® EDP Consulting, Inc. / www.edpci.com http://www.edpci.com/ http://www.4mypasswords.com/Effective Decisions... Priceless! Linked In Profile http://www.linkedin.com/in/jonseidel Technology that means Business - Since 1979 mobile: 510-599-6130

Results that Make the Difference! The Certified Management Consultant (CMC) mark is awarded to consultants who meet the strict standards defined by the Institute of Management Consultants USA (an ISO/IEC 17024:2003 Certifying Body), including examination by their peers, client evaluations, and a written examination evidencing their understanding of the IMC USA's Code of Ethics. The CMC is the only consulting certification that has been ISO-accredited and recognized by the insurance industry as reducing risk. Check out IMC USA http://www.imcusa.org/?page=WHYHIREACMC for more information.

On Dec 30, 2022, at 3:11 AM, Lazar Nikolov @.***> wrote:

@JESii https://github.com/JESii which node/npm versions did you use? I just ran npm build inside exercises/exercise-13--use-the-server-side-rendering-method and it didn't fail. I'm using node version v16.14.2 and npm version 8.5.0. Can you try with these versions, and if it works I'll update the README.md file to let other students know about the node/npm versions.

— Reply to this email directly, view it on GitHub https://github.com/nikolovlazar/egghead-beginners-guide-nextjs/issues/5#issuecomment-1367863142, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAADZVFN64KDRNTMB6VB5LWP27OXANCNFSM6AAAAAARRZAT2Q. You are receiving this because you were mentioned.