Next.js使用useContext报UserContext未定义ReferenceError排查

这个报错和Webpack配置、Next.js服务端渲染机制都没有关系，是纯代码编写错误：子组件中使用UserContext前没有导入对应变量，触发了引用错误。
除此之外你的代码还存在两个容易引发后续异常的小问题：

• Context直接定义在页面组件文件内，跨组件导入时容易出现路径错误、循环依赖问题
• 父组件给子组件传参时直接展开数组对象，子组件解构的cards属性无法正确匹配取值，即使修复Context错误也会出现内容不渲染的问题

快速修复（临时可用） #

直接在子组件ArtSelctions的顶部导入区，补全UserContext的导入即可，注意根据你的文件目录写对相对路径：

// 子组件 ArtSelctions 顶部新增导入
// 假设父组件Gallery是pages目录下的页面文件，按你当前的目录结构路径如下
import { UserContext } from '../../pages/gallery';

同时修正父组件传参的属性名，确保子组件能拿到卡片数据：

// 父组件Gallery中给ArtSelctions传参时明确指定cards属性
<ArtSelctions cards={props.liberatedT} user={user} />
<ArtSelctions cards={props.servicesLineOne}/>

规范修复（推荐长期使用） #

为了避免路径混乱、循环导入问题，不要把Context定义在业务组件/页面文件里，单独抽离全局Context文件：

1. 新建context/UserContext.js文件，统一存放Context定义：

import { createContext } from 'react';
// 单独导出Context
export const UserContext = createContext();

2. 父组件Gallery中删除原有的UserContext定义代码，改为从单独的Context文件导入：

// 父组件顶部导入区修改
import { useState } from "react";
import { UserContext } from '../context/UserContext'; // 注意匹配你的文件路径
// 删掉原来的 export const UserContext = createContext() 这行

3. 子组件ArtSelctions中也从统一的Context文件导入UserContext：

// 子组件顶部导入区修改
import { useState, useContext } from "react"; // 这里不需要再导入createContext
import { UserContext } from '../../context/UserContext'; // 注意匹配你的文件路径

改完之后重启Next.js开发服务，报错就会消失，Context可以正常取值。

内容的提问来源于stack exchange，提问作者Naroto-Hasaka