Next.js新手求助：Error: createContext is not a function错误

问题详情 #

作为Next.js新手，连续两天遇到以下错误：

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

已尝试添加'use client'指令，但错误依然存在。我的package.json依赖配置如下：

"dependencies": {
    "@toruslabs/eccrypto": "^5.0.1",
    "@walletconnect/ethereum-provider": "2.13.3",
    "@web3auth/web3auth": "2.1.3",
    "bn.js": "^5.2.1",
    "ethers": "5.7.0",
    "magic-sdk": "^28.0.7",
    "moralis": "^2.26.7",
    "moralis-v1": "^1.13.0",
    "next": "14.2.4",
    "pino-pretty": "^11.2.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-moralis": "^1.4.2"
},
"devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "yarn-deduplicate": "^6.0.2"
}

解决方案 #

1. 移除冲突的Moralis依赖 #

你同时安装了moralis（v2）和moralis-v1（v1），且搭配了仅支持v1的react-moralis，这会导致依赖冲突，甚至加载多个React实例。执行以下命令清理：

yarn remove moralis-v1 react-moralis

如果需要使用Moralis的React绑定，建议安装适配v2的官方包：

yarn add @moralisweb3/react

2. 去重React依赖 #

多个React实例是触发该错误的常见原因，用yarn-deduplicate合并重复依赖：

yarn yarn-deduplicate --strategy highest

3. 彻底清理缓存并重装 #

# 删除依赖和锁文件
rm -rf node_modules yarn.lock
# 重新安装依赖
yarn install
# 清理Next.js缓存
yarn next clean
# 重启开发服务器
yarn dev

4. 确认客户端组件配置 #

确保所有使用React Context、hooks或web3客户端库的组件，都在文件最顶部添加'use client'指令，例如：

'use client';

import { useMoralis } from '@moralisweb3/react';

// 组件代码...

内容的提问来源于stack exchange，提问作者Abdul Basit