Next.js中调用未赋值给变量的数组字面量方法为何报错

这个报错和Next.js环境本身无关，是JavaScript**自动分号插入（ASI）**机制导致的代码解析错误。
当你直接写数组字面量调用方法的代码时，如果这段代码的上一行语句没有手动添加分号结尾，JS解析器不会自动在上一行末尾插入分号，反而会把当前行开头的[识别为上一行语句的属性访问语法，将两段代码合并解析。
最常见的触发场景如下：

// 上一行代码未加分号结尾
const temp = undefined
// 直接调用数组字面量的方法
[1,2,3].forEach(i=>i)

上述代码会被JS解析器错误解析为：

const temp = undefined[1,2,3].forEach(i=>i)

代码里的1,2,3会被识别为逗号表达式，最终返回最后一个值3，等价于尝试读取undefined的3属性，和你遇到的TypeError: Cannot read properties of undefined (reading '3')报错完全匹配。

如果先把数组赋值给变量再调用方法，代码开头是const/let/var这类变量声明关键字，JS解析器能明确识别这是一段新的独立语句，不会和上一行未加分号的代码合并解析，因此不会触发解析异常。

• 日常编码时手动给每条语句末尾添加分号，从根源避免ASI机制带来的解析异常
• 如果习惯不写分号，所有以[、(开头的语句前手动补一个前置分号，强制标记这是独立语句，比如你的代码可以修改为：

;[1,2,3].forEach(i=>i)

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