React动态添加script标签报Uncaught SyntaxError错误的解决问询

错误根源 #

你遇到的问题核心是静态资源路径配置错误：

• create-react-app（CRA）规定，只有public目录下的文件会被当作可直接访问的静态资源。
• 你把editor.js放在项目根目录，开发服务器无法识别这个路径，请求/editor.js时返回的是404页面的HTML代码，浏览器把HTML当成JS解析，自然会报语法错误。

修复步骤 #

1. 调整文件位置 #

把根目录的editor.js移动到public目录下，调整后的项目结构如下：

/
package.json
public/
  editor.js
src/
  App.js
  index.js

2. 正确实现动态加载脚本 #

在App.jsx中用useEffect动态加载脚本时，需要注意路径正确性、重复渲染的清理逻辑，以及加载状态监听：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 创建script标签
    const script = document.createElement('script');
    script.src = '/editor.js';
    script.type = 'text/javascript';

    // 监听加载成功/失败事件，便于调试
    script.onload = () => console.log('脚本加载成功');
    script.onerror = () => console.error('脚本加载失败');

    // 插入到页面
    document.body.appendChild(script);

    // 组件卸载时移除脚本，避免冗余标签
    return () => {
      document.body.removeChild(script);
    };
  }, []); // 空依赖数组确保只执行一次

  return <div>测试动态加载脚本</div>;
}

export default App;

为什么之前的尝试无效？ #

• 添加type="text/javascript"/async=true：这些属性不影响资源的查找路径，本质问题是没加载到正确的JS文件，所以毫无作用。
• 使用type="text/babel"：浏览器默认不会解析这种类型的脚本（除非额外引入Babel浏览器端编译脚本），所以不会报错，但也不会执行你的代码。

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