Any chance we might get this updated to the latest version of Next ?

I am trying to run npm run build , but the [slug].tsx is not being generated. It is throwing this error:

❯ npm run build

> [email protected] build /home/production-grade-nextjs
> next build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Loaded env from /home/production-grade-nextjs/.env.local
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[=   ] info  - Generating static pages (4/9)
Error occurred prerendering page "/blog/[slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot destructure property 'compiledSource' of 'undefined' as it is undefined.
    at hydrate (/home/production-grade-nextjs/node_modules/next-mdx-remote/hydrate.js:7:5)
    at BlogPost (/home/production-grade-nextjs/.next/server/pages/blog/[slug].js:2834:81)
    at d (/home/production-grade-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/home/production-grade-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/home/production-grade-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/home/production-grade-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/home/production-grade-nextjs/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at renderPage (/home/production-grade-nextjs/node_modules/next/dist/next-server/server/render.js:53:851)
    at Function.getInitialProps (/home/production-grade-nextjs/.next/server/pages/_document.js:787:18)
    at loadGetInitialProps (/home/production-grade-nextjs/node_modules/next/dist/next-server/lib/utils.js:5:101)
info  - Generating static pages (9/9)

> Build error occurred
Error: Export encountered errors on following paths:
        /blog/[slug]
    at exportApp (/home/production-grade-nextjs/node_modules/next/dist/export/index.js:30:1103)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async build (/home/production-grade-nextjs/node_modules/next/dist/build/index.js:39:69)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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!     /home/.npm/_logs/2021-08-14T15_20_39_882Z-debug.log

NOTE: This works on main branch though.

I left off in your course at running the signing to check if the call to github oauth works, and I get this error when I click the button to sign in with github :
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
wait - compiling...
event - compiled successfully
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
event - build page: /api/auth/[...nextauth]
wait - compiling...
event - compiled successfully
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)
TypeError: next_auth_providers__WEBPACK_IMPORTED_MODULE_1___default.a.Github is not a function
at module.exports../pages/api/auth/[...nextauth].ts.webpack_exports.default (C:\Users\PC\Desktop\production-grade-nextjs.next\server\pages\api\auth[...nextauth].js:118:74)
at apiResolver (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async DevServer.handleApiRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:63:403)
at async Object.fn (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:55:530)
at async Router.execute (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\router.js:24:67)
at async DevServer.run (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:65:1023)
at async DevServer.handleRequest (C:\Users\PC\Desktop\production-grade-nextjs\node_modules\next\dist\next-server\server\next-server.js:33:450)

it seems that this library has been taken down.

Trying to install the project from new (npm i), but the package Zoe 2.2.100 errors out. I had to remove the lint scripts to get the project to run. It seems the project doesn't exist anymore, as Zoe is now a starter project for Stencil.

npm ERR! code ETARGET
npm ERR! notarget No matching version found for zoe@^2.2.100.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'production-grade-nextjs'
npm ERR! notarget

Error: db/folder.ts (18:12) I get the message:
TypeError: db.collection is not a function

Call Stack:
getServerSideProps
pages/app/[[...id]].tsx (95:31)

The connection worked fine and tested with MongoDB compass as well.

This error prevents me from continuing this excellent course.

Thanks for the prompt attention

Yehuda

@Hendrixer I'm having issue after deploying to vercel and trying to update something from the editor. I found out that there is no NEXT_PUBLIC_API_HOST in production (based on FE Masters Video)

following frontend masters course had some node compatibility issues with dependencies and running next build. App was working with node version 14.6.0.

suggest adding node version to package.json if others facing the same problem.

Suggesting changes: #14

Hi there,
I have a mac with an m1 chip, and I had a problem with the installation, specifically with the sharp package. As the error message clearly says, sharp Prebuilt libvips binaries are note available for this architecture (darwin-arm64v8).

So I went to the sharp documentation and I was able to verify that there is support for macOS on ARM64 since sharp v0.29.0.

from the sharp documentation:

Apple M1
Prebuilt sharp and libvips binaries have been provided for macOS on ARM64 since sharp v0.29.0.

Adding sharp to the resolutions did the trick

  "resolutions": {
     "sharp": "^0.29.0",
     ...
   }

Hope this is useful for someone

Hello,

I'm at the first step in the tutorial (I downloaded the course repo, and ran npm i). I got an error stating that the version of React that the version of Evergreen UI wants to use cannot be resolved. Here is the console output:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/evergreen-ui
npm ERR!   evergreen-ui@"^5.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

It looks like running npm i --legacy-peer-deps worked, but the issue is probably due to the project using an outdated version of Evergreen (v5 as opposed to v6). However, I didn't want to just upgrade the version of Evergreen as it appears there are breaking changes.

Node version: 16.13.0
npm version: 8.1.0

Thank you!

Hi, just wanna ask
in section render content and getStaticProps on file [slug].tsx why in my code it keep saying module 'fs' not found but in blog list its working?

my node version is v14.17.6
and next is 10.0.3

./pages/blog/[slug].tsx:6:0
Module not found: Can't resolve 'fs'
4 | import Head from 'next/head'
5 | import { useRouter } from 'next/router'

6 | import fs from 'fs'
7 | import path from 'path'
8 | import matter from 'gray-matter'
9 | import renderToString from 'next-mdx-remote/render-to-string'

Hey!
Thanks for the course :)

can you publish here the finished code of the course?

Thanks again