React Hook中引入外部JS文件报错，求解决方案（Node.js后端）

报错原因 #

你遇到的Identifier 'MyObjektlist' has already been declared错误，核心原因是外部JS文件中的MyObjektlist类是全局作用域声明的，而你通过Helmet或useEffect动态引入JS时，组件重复渲染/挂载会导致该JS被多次加载，全局作用域中重复声明同一个标识符，触发语法错误。

排查步骤 #

1. 检查外部JS代码：确认MyObjektlist是否直接暴露在全局（比如直接写class MyObjektlist { ... }，没有模块化包裹）。
2. 检查项目其他地方：确认是否在index.html、其他组件中已经引入过该外部JS，导致重复加载。

可行解决方案 #

方案1：将外部JS改为ES模块（最优）

如果有权限修改外部JS，将其改为模块化格式，避免全局污染：

// 外部JS文件（objektlist.js）
export class MyObjektlist {
  // 原类的业务逻辑
  getData() {
    // 返回数据的逻辑
  }
}

在React组件中直接导入使用：

import { useEffect } from 'react';
import { MyObjektlist } from './path/to/objektlist.js';

function ObjektlistPreview() {
  useEffect(() => {
    const instance = new MyObjektlist();
    const data = instance.getData();
    // 将data渲染到目标div中
    document.getElementById('preview-container').textContent = JSON.stringify(data);
  }, []);

  return <div id="preview-container"></div>;
}

export default ObjektlistPreview;

方案2：动态引入时避免重复加载（无法修改外部JS时用）

通过判断全局变量是否存在，仅在未加载时引入外部JS：

import { useEffect } from 'react';

function ObjektlistPreview() {
  useEffect(() => {
    // 检查全局是否已存在MyObjektlist
    if (window.MyObjektlist) {
      initComponent();
      return;
    }

    // 动态创建script标签
    const script = document.createElement('script');
    script.src = '/path/to/your-external.js';
    script.onload = initComponent;
    script.onerror = () => console.error('外部JS加载失败');
    document.body.appendChild(script);

    // 组件卸载时清理script标签
    return () => document.body.removeChild(script);

    // 初始化组件的逻辑
    function initComponent() {
      const instance = new window.MyObjektlist();
      const data = instance.getData();
      // 渲染数据到div
      document.getElementById('preview-container').textContent = JSON.stringify(data);
    }
  }, []); // 空依赖数组确保仅执行一次

  return <div id="preview-container"></div>;
}

export default ObjektlistPreview;

方案3：全局单次引入（适合静态外部JS）

将外部JS放在项目public目录，在index.html中仅引入一次，组件直接使用全局变量：

<!-- public/index.html -->
<script src="/path/to/your-external.js"></script>

组件中直接调用：

import { useEffect } from 'react';

function ObjektlistPreview() {
  useEffect(() => {
    const instance = new window.MyObjektlist();
    const data = instance.getData();
    // 渲染数据
    document.getElementById('preview-container').textContent = JSON.stringify(data);
  }, []);

  return <div id="preview-container"></div>;
}

export default ObjektlistPreview;

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