React中import导入时作用域规则导致useEffect未定义报错

你对ES模块的作用域规则理解错了：每个ES Module文件都是独立的私有作用域，作用域链查找不会跨模块访问导入方的变量。

• 你在a.jsx里导入的useEffect，只属于a.jsx自己的模块作用域，仅能被a.jsx文件内的代码直接访问。
• utils是完全独立的另一个模块，它内部代码执行时的作用域链查找顺序是：useMount函数内部作用域 → utils文件的顶层模块作用域 → 全局作用域，整个查找链路完全不会触达a.jsx的模块作用域，自然找不到你在a.jsx里导入的useEffect。

ESLint的no-undef规则本身就是检查当前文件作用域内是否存在未声明的变量，utils文件里既没有声明useEffect，也没有导入它，直接调用当然会抛错，和你在a.jsx里有没有提前导入useEffect没有任何关系。

在定义useMount的utils文件里单独导入useEffect即可，这也是React自定义Hook的标准写法，所有用到React API的模块都需要自行导入对应依赖：

// utils 文件
import { useEffect } from 'react';
export const useMount = (callback) => {
   useEffect(() => {
     console.log('I executed useMount');
     callback?.();
   }, [])
}

注意不要把ES Module和传统非模块化script标签的作用域逻辑搞混：普通script标签顶层声明的变量会挂载到全局window对象上，所有加载的脚本都能访问；但ES Module顶层声明的变量、import导入的绑定全是模块私有的，既不会泄露到全局，也无法被其他模块直接读取。

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