ThingsBoard中CDN引入NanoID作为资源无法正常工作如何解决

两个报错本质都是加载的NanoID资源模块格式和ThingsBoard Widget的脚本加载规则不匹配，和业务代码、引入方式（平台入口/HTML标签）无关：

• 4.0版本选用的index.browser.min.js是ESM规范构建产物，文件内使用export语法导出方法。ThingsBoard默认将外部引入的JS作为普通脚本加载，普通脚本不支持ESM模块语法，解析到export关键字时直接抛出Unexpected token export错误。
• 3.3.4版本选用的非UMD入口文件内部保留了import语句，同样因为加载时未被识别为模块，触发Cannot use import statement outside a module报错。
• 同类型的uuid库能正常运行，是因为你选择的cdnjs资源是UMD格式构建包，加载后会自动挂载到全局作用域，不依赖模块导入导出语法，适配普通脚本加载规则。
• 哪怕手动给script标签加type="module"属性加载ESM版本也无法正常使用：ThingsBoard Widget做了沙箱隔离，模块作用域内的变量不会暴露到Widget的JS执行上下文，就算不报语法错误，也拿不到NanoID的方法引用。

按优先级从高到低选择即可：

• 方案1（最符合平台外部资源加载要求）：在cdnjs的NanoID资源列表里选择对应版本的UMD构建产物，路径为umd/index.umd.min.js，通过平台自带的cdnjs入口引入即可。资源加载完成后NanoID会直接挂载到全局window.nanoid，不需要额外写导入语句，直接调用就能生成指定长度ID：

  // 生成10位长度ID
  const shortId = nanoid(10);
  

• 方案2（稳定性最高）：如果平台资源入口无法筛选UMD路径，直接把NanoID对应版本的UMD压缩源码粘贴到Widget的自定义全局JS区域，完全绕开外部资源加载的格式适配问题。
• 方案3（零外部依赖）：如果不想引入外部库，可以直接使用NanoID官方精简实现，代码体积不到100字节，直接贴到Widget业务代码里即可调用，生成的ID和官方库规则完全一致：

  const genShortId = (size = 10) => {
    const charSet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
    let id = '';
    const randomBuffer = new Uint8Array(size);
    crypto.getRandomValues(randomBuffer);
    for (let i = 0; i < size; i++) {
      id += charSet[randomBuffer[i] & 63];
    }
    return id;
  };
  
  // 调用生成10位ID
  const bizId = genShortId(10);
  

注意：不要尝试通过修改script标签type属性、配置打包工具转译等方式适配ESM版本，Widget沙箱的作用域隔离机制会导致这类方案出现偶发的引用不存在问题，线上环境稳定性极差。

内容的提问来源于stack exchange，提问作者Manuel Romano