Next.js搭配webpack使用时报WEBPACK_DEFAULT_EXPORT初始化前访问错误求助

修复方案 #

该错误本质是模块初始化顺序异常，绝大多数情况由theme.js循环引用、导出不规范或依赖引入不全导致，可按以下步骤排查：

• 首先补全ColorModeScript的导入语句，你当前代码中未引入该组件就直接使用，是高频触发该错误的原因：

// 在document.js顶部添加导入，以Chakra UI场景为例
import { ColorModeScript } from '@chakra-ui/react'

• 检查../libs/theme.js是否存在循环引用：确认theme.js中没有导入其他反过来依赖当前document文件、或者依赖仅客户端运行模块的代码，不要在theme.js中引入组件、Hooks类的运行时代码。
• 避免从完整theme对象中读取初始配置，你可以直接硬写初始色模式值，或者把初始配置单独抽成常量文件引入：

// 直接写固定值，不需要导入theme
<ColorModeScript initialColorMode='light'  />

如果需要和theme里的配置保持一致，就在theme.js中单独导出初始配置：

// theme.js内新增导出
export const initialColorMode = 'dark'
export default {
  config: { initialColorMode },
  // 其余theme配置
}

之后在document中单独导入常量即可：

import { initialColorMode } from '../libs/theme.js'
// 调用时直接使用变量
<ColorModeScript initialColorMode={initialColorMode}  />

• 若上述方案都无效，检查webpack配置中是否存在针对theme.js的异常打包规则，比如错误配置tree shaking导致模块导出顺序异常。

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