Angular项目集成Elasticsearch出现Uncaught ReferenceError: require未定义

Angular项目未引入Elasticsearch依赖时运行正常，添加Elasticsearch日志功能并修改angular.json、webpack.config.ts和tsconfig.ts后，构建无依赖问题，但浏览器加载失败，报错：

Uncaught ReferenceError: require is not defined
at 9172 (log.js":1:1)
at webpack_require (bootstrap:19:1)
at 9548 (WebSocketClient.js:50:4)
at webpack_require (bootstrap:19:1)
at webpack_exec (external commonjs "zone.js":1:1)
at external commonjs "zone.js":1:1

Uncaught ReferenceError: require is not defined
at 9780 (platform-browser":1:1)
at webpack_require (bootstrap:19:1)
at 4913 (elastic.service.ts:5:23)
at webpack_require (bootstrap:19:1)
at webpack_exec (log.js":1:1)
at log.js":1:

这个错误的核心原因是：你使用的Elasticsearch客户端（如@elastic/elasticsearch）是为Node.js环境开发的，依赖CommonJS规范的require语法，但浏览器环境不原生支持该语法。以下是具体修复方案：

方案1：改用浏览器兼容的实现（推荐） #

放弃Node.js版本的Elasticsearch客户端，选择两种更适合浏览器的方式：

• 直接调用Elasticsearch REST API：通过Angular的HttpClient发送HTTP请求与ES交互，无需额外客户端依赖。示例代码：

  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class ElasticService {
    private esBaseUrl = 'http://你的ES实例地址:9200';
  
    constructor(private http: HttpClient) {}
  
    // 示例：写入日志文档
    submitLog(logData: Record<string, any>) {
      return this.http.post(`${this.esBaseUrl}/logs/_doc`, logData);
    }
  }
  

• 使用浏览器专用客户端：如elasticsearch-browser（注意该包为社区维护，需确认版本兼容性），安装后直接导入使用即可。

方案2：调整Webpack配置兼容CommonJS模块 #

如果你必须使用Node.js版本的客户端，需要让Webpack将CommonJS模块转译为浏览器可识别的格式：

1. 修改webpack.config.ts，添加resolve配置优先加载浏览器适配版本：

   module.exports = {
     resolve: {
       mainFields: ['browser', 'module', 'main']
     }
   };
   

2. 安装Babel相关依赖转换CommonJS语法：

   npm install @babel/core @babel/preset-env babel-loader --save-dev
   

3. 在Webpack的module.rules中添加转换规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules\/(?!@elastic)/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }
   };
   

方案3：修正TypeScript配置 #

在tsconfig.ts中调整模块相关配置，确保与Webpack的处理逻辑匹配：

{
  "compilerOptions": {
    "module": "ESNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

最后：清理依赖重新安装 #

删除旧依赖文件后重新安装，避免缓存问题：

rm -rf node_modules package-lock.json
npm install

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