React中动态加载外部Script后externalFunction未定义问题求解

问题描述 #

在普通React环境中使用以下组件时，会抛出externalFunction is not defined错误，但该组件在Next.js环境中可正常运行：

const Example=()=>{
    const ref = useRef(null);

    useEffect(() => {
        let refValue;   

        if (ref.current) {
            const script = document.createElement("script");
            script.src = "https://externalsource.com/hey.js";

            script.async = true;
            script.type = "text/javascript";

            const onScriptLoad=()=>{
                 externalFunction();
               };

            script.onload = onScriptLoad;
            ref.current.appendChild(script);
            refValue = ref.current;
        };

        return () => {
            if (refValue) {
                while (refValue.firstChild) {
                    refValue.removeChild(refValue.firstChild);
                };
            };
        };
    }, [ref,]);

    return (
        <div className="..." >
            <div ref={ref} className="..."  />
        </div>
    );
};

问题原因 #

1. 全局变量访问规则差异：
   • Next.js默认编译及ESLint配置对全局变量的访问限制更宽松，允许直接调用未在本地声明的全局函数。
   • 普通React项目（如create-react-app创建的项目）的ESLint规则默认会将未声明的变量访问标记为错误，而外部脚本注入的externalFunction属于挂载到window的全局变量，直接调用会触发检查报错。
2. 严格模式强化检查：部分React项目启用的严格模式会进一步强化变量声明校验，放大该问题。

解决方法 #

方法1：通过window对象访问全局函数 #

外部脚本的全局函数会挂载到浏览器window对象上，明确通过window调用可绕过未声明变量的检查：

const onScriptLoad=()=>{
    window.externalFunction();
};

方法2：声明全局变量（适配ESLint） #

在组件文件顶部添加注释，告知ESLintexternalFunction为全局变量：

/* global externalFunction */
const Example=()=>{
    // 组件原有代码
};

方法3：全局配置ESLint（多组件复用场景） #

若多个组件需调用该全局函数，可在项目ESLint配置文件（如.eslintrc.js）中添加全局变量声明：

module.exports = {
  // 其他配置项
  globals: {
    externalFunction: true
  }
};

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