Elasticsearch JS & Next JS: Module not found: Can't resolve 'async

I want to create a simple NextJS frontend that communicates with elasticsearch backend. For that I am using the ElasticsearchJS library.

This is a vanilla NextJS project created with create-next-app that has the index.js, _app.js and app.js files. In pages/search/[searchQuery].js there is the following code:

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { Container, Header } from "semantic-ui-react";
import Layout from '../../components/Layout';

const Search = () => {
    const router = useRouter()
    const searchData = router.query.searchQuery
    let [searchText, setSearchText] = useState("")

    let searchTerm = async (event) => {
        const { Client } = require('@elastic/elasticsearch')
        const client = new Client({
            node: 'https://localhost:9200',
            auth: {
                username: 'elastic',
                password: 'mypassword'
            },
            caFingerprint: 'D8:A5:F2:98:7C:6D:05:D1:99:...',
            tls: {
                rejectUnauthorized: false
            }
        })
    }

    useEffect(() => {
        if (searchData == undefined) {
            return
        }
        setSearchText(Buffer.from(searchData, 'base64').toString())
    }, []);

    return (
        <Layout showTopBar={false}>
            <Container text>
                <Header as='h1'>{searchText}</Header>
            </Container>
        </Layout>
    );
}

export default Search;

This code does nothing, but to instantiate a Client object to be later used - I tried to isolate the problem as much as possible, so there is no functional code logic, just a Client object instantiation. But when I load the page I get:

wait  - compiling...
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/home/user/Work/search/node_modules/next/dist/compiled/stream-browserify/index.js'
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/home/user/Work/search/node_modules/next/dist/compiled/util/util.js'
error - ./node_modules/undici/lib/api/api-connect.js:4:24
Module not found: Can't resolve 'async_hooks'

Import trace for requested module:
./node_modules/undici/lib/api/index.js
./node_modules/undici/index.js
./node_modules/@elastic/transport/lib/connection/UndiciConnection.js
./node_modules/@elastic/transport/lib/connection/index.js
./node_modules/@elastic/transport/index.js
./node_modules/@elastic/elasticsearch/index.js
./pages/search/[searchQuery].js

https://nextjs.org/docs/messages/module-not-found

This is my package.json:

{
  "name": "decentrasearch",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@elastic/elasticsearch": "^8.2.1",
    "bootstrap": "^5.1.3",
    "fs": "^0.0.1-security",
    "next": "12.1.6",
    "react": "18.2.0",
    "react-bootstrap": "^2.4.0",
    "react-dom": "18.2.0",
    "react-select": "^5.3.2",
    "semantic-ui-react": "^2.1.3",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6"
  }
}

Is anybody able to suggest what is actually happening behind the scenes? I can't seem to be able to find any answers to this problem. As far as I've searched online, there shouldn't be a problem using the ElasticsearchJS library with NextJS.

My node --version is v16.15.1.

Any help would be greatly appreciated!

CodePudding user response：

As @juliomalves pointed out, @elastic/elasticsearch has no support for browser environments.

The solution to the problem is to create a separate server that uses the library and which serves results to the Next JS environment or use http requests to talk to the elasticsearch server directly.