在Gatsby [ReactJS]中生成CSR时遭遇意外ReferenceError

你遇到的问题根源在于：pkijs在ES模块环境（比如React/Gatsby）下不会暴露全局的org对象，而你参考的AngularJS项目大概率是通过全局脚本引入pkijs，所以能直接调用org.pkijs.simpl.PKCS10。下面是具体的解决步骤：

• 第一步：修正pkijs的导入方式
  如果你是通过npm安装的pkijs，需要使用ES模块的导入语法，而非依赖全局变量。根据pkijs的版本不同，导入方式略有差异：

  // 新版本pkijs（v3+）支持直接导入核心类
  import { PKCS10 } from 'pkijs';
  
  // 旧版本可能需要指定具体路径
  import { PKCS10 } from 'pkijs/src/simpl/PKCS10';
  

• 第二步：调整实例化代码
  导入完成后，直接用导入的类创建实例，无需再通过org全局对象：

  let pkcs10_simpl = new PKCS10();
  

• 额外注意：Gatsby中的客户端执行限制
  生成CSR的逻辑依赖浏览器的Web Crypto API，无法在Gatsby的服务端渲染（SSR）阶段运行。你可以用useEffect钩子确保代码只在客户端执行：

  import { useEffect } from 'react';
  import { PKCS10 } from 'pkijs';
  
  function CSRGenerator() {
    useEffect(() => {
      async function generateCSR() {
        let pkcs10_simpl = new PKCS10();
        // 在这里编写你的CSR生成逻辑
      }
      generateCSR();
    }, []);
  
    return <div>正在生成证书签名请求...</div>;
  }
  
  export default CSRGenerator;
  

• 排查导入路径问题
  如果导入时出现模块找不到的错误，可以查看node_modules/pkijs目录下的文件结构，确认PKCS10的正确路径（比如旧版本可能在pkijs/dist/simpl/PKCS10）。

本质上就是把原来依赖全局变量的写法，切换到ES模块的标准导入方式，这样就能解决org is not defined的错误了。

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