React项目中eval执行ObservablePlot代码时Plot未定义的问题求助

你遇到的ReferenceError: Plot is not defined是因为eval执行用户代码时，无法访问组件模块作用域中导入的Plot变量——虽然你在组件顶部导入了* as Plot，但eval的执行上下文默认不会自动包含这个局部变量。

推荐方案：使用new Function替代eval（更安全且作用域可控） #

new Function允许你显式指定函数参数，把Plot和data传入用户代码的执行上下文，既解决了作用域问题，又能限制代码可访问的变量，提升安全性。

修改你的useEffect代码如下：

useEffect(() => {
  if (data === undefined || !props.plot) return;
  
  try {
    // 创建接收Plot和data为参数的函数，函数体为用户输入的代码
    const generateMark = new Function('Plot', 'data', `return ${props.plot};`);
    // 执行函数，传入实际的Plot和data变量
    const mark = generateMark(Plot, data);
    
    const plot = Plot.plot({
      marks: [mark],
    });
    containerRef.current.append(plot);
    
    return () => plot?.remove();
  } catch (error) {
    console.error('用户代码执行失败:', error);
  }
}, [data, props.plot]); // 新增props.plot到依赖数组，确保代码更新时重新执行

方案说明 #

用户输入的代码（比如Plot.lineY(data, { x: "Date", y: "Close" })）会被包裹在函数中，函数参数Plot和data对应你导入的模块和请求到的数据，执行时能正确访问这两个变量，不会出现未定义错误。

备选方案：修改eval的执行上下文（不推荐，安全风险高） #

如果一定要使用eval，可以通过自执行函数把Plot和data传入eval上下文：

useEffect(() => {
  if (data === undefined || !props.plot) return;
  
  try {
    // 通过自执行函数传递Plot和data到eval上下文
    const mark = eval(`(function(Plot, data) { return ${props.plot}; })(Plot, data)`);
    
    const plot = Plot.plot({
      marks: [mark],
    });
    containerRef.current.append(plot);
    
    return () => plot?.remove();
  } catch (error) {
    console.error('用户代码执行失败:', error);
  }
}, [data, props.plot]);

注意：这种方式保留了eval的安全风险，用户代码可访问当前作用域的所有变量，不建议在面向公开用户的应用中使用。

额外注意事项 #

1. 错误处理：添加try-catch捕获用户代码的语法或运行时错误，避免组件崩溃。
2. 依赖数组：必须把props.plot加入useEffect依赖数组，确保用户修改代码时组件能重新生成图表。
3. 安全防护：如果应用面向外部用户，必须对用户代码做沙箱隔离（如iframe或专门的沙箱库），防止恶意代码破坏应用或窃取数据。

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