Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

[ypszn]

Hey guys. I am on lesson 10 and i have been running into an error and i think it has something to do with Moralis. I have been on it for the past 2 days and i have not yet found a solution. Please help!!!!

This is the error

Warning: You're using `next/head` inside the `app` directory, please migrate to the M
etadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-
router-migration#step-3-migrating-nexthead for more details.

warn - No utility classes were detected in your source files. If this is unexpected,
double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 ⚠ ./node_modules/moralis-v1/lib/browser/Web3Connector/MagicWeb3Connector.js
Module not found: Can't resolve 'magic-sdk' in 'C:\Users\user\hh-fcc\nextjs-smartcont
ract-lottery-fcc\node_modules\moralis-v1\lib\browser\Web3Connector'

⨯ node_modules\react-moralis\lib\index.esm.js (3153:35) @ eval
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/react-moralis/lib/index.esm.js:
4694:88)
    at (rsc)/./node_modules/react-moralis/lib/index.esm.js (C:\Users\user\hh-fcc\next
js-smartcontract-lottery-fcc\.next\server\vendor-chunks\react-moralis.js:20:1)
    at __webpack_require__ (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\.ne
xt\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/components/ManualHeader.js:7:71)
    at (rsc)/./src/components/ManualHeader.js (C:\Users\user\hh-fcc\nextjs-smartcontr
act-lottery-fcc\.next\server\app\page.js:315:1)
    at __webpack_require__ (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\.ne
xt\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/layout.js:7:82)
    at (rsc)/./src/app/layout.js (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-f
cc\.next\server\app\page.js:293:1)
    at Function.__webpack_require__ (C:\Users\user\hh-fcc\nextjs-smartcontract-lotter
y-fcc\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)
    at process.processTimers (node:internal/timers:512:7)
    at async eq (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\node_modules\n
ext\dist\compiled\next-server\app-page.runtime.dev.js:35:401280)
    at async tr (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\node_modules\n
ext\dist\compiled\next-server\app-page.runtime.dev.js:35:405046)
    at async tn (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\node_modules\n
ext\dist\compiled\next-server\app-page.runtime.dev.js:35:405596)
    at async tu (C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\node_modules\n
ext\dist\compiled\next-server\app-page.runtime.dev.js:35:409938)
    at async C:\Users\user\hh-fcc\nextjs-smartcontract-lottery-fcc\node_modules\next\
dist\compiled\next-server\app-page.runtime.dev.js:35:410457 {
  digest: '380738211'
}

This is my package.json

{
  "name": "nextjs-smartcontract-lottery-fcc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "moralis": "^2.23.2",
    "moralis-v1": "^1.13.0",
    "next": "14.0.3",
    "react": "^18.2.0",
    "react-dom": "^18",
    "react-moralis": "^1.4.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "prettier": "^3.1.0",
    "tailwindcss": "^3.3.0"
  }
}

[Nlferu]

Hello @youngpriince

As you are using next.js 14 structure of your project is totally different than that on course. You can either downgrade next.js to match course version (actually make sure you are matching whole package.json) or you can adjust your folders structure to match course, but this can still lead to tons of errors if you are using different packages versions.

[ypszn]

Okay, i guess i’ll just downgrade everything. Thanks. Patrick is using next.js 12, right?

[Nlferu]

@youngpriince

Just enter course lesson that you want to check and vie it's source code, then check this lesson package.json file. There you will find all packages and their versions.

[ypszn]

Thanks!

[Nlferu]

@youngpriince

If that answered your issue please mark this as answer :)