Encountering a problem with Vue when running the node-rdkafka package

I added node-rdkafka to my project using the command npm install node-rdkafka.

Then, I included it in my code like this:

import Kafka from 'node-rdkafka';

  created() {
    console.log(Kafka.features);
  }

An error occurred when running npm run dev.

    ERROR in ./node_modules/node-rdkafka/lib/kafka-consumer-stream.js 14:15-41
Module not found: Error: Can't resolve 'stream' in '/root/Sites/NDE-Frontend/node_modules/node-rdkafka/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/node-rdkafka/lib/producer-stream.js 14:15-41
Module not found: Error: Can't resolve 'stream' in '/root/Sites/NDE-Frontend/node_modules/node-rdkafka/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/node-rdkafka/node_modules/bindings/bindings.js 5:9-22
Module not found: Error: Can't resolve 'fs' in '/root/Sites/NDE-Frontend/node_modules/node-rdkafka/node_modules/bindings'

ERROR in ./node_modules/node-rdkafka/node_modules/bindings/bindings.js 6:9-24
Module not found: Error: Can't resolve 'path' in '/root/Sites/NDE-Frontend/node_modules/node-rdkafka/node_modules/bindings'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

ERROR in ./node_modules/node-rdkafka/node_modules/file-uri-to-path/index.js 6:10-29
Module not found: Error: Can't resolve 'path' in '/root/Sites/NDE-Frontend/node_modules/node-rdkafka/node_modules/file-uri-to-path'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

webpack compiled with 5 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @neubus/nde-frontend@ development: `mix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @neubus/nde-frontend@ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-11-16T14_25_47_382Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @neubus/nde-frontend@ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @neubus/nde-frontend@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Has anyone else experienced the same issue?

Answer №1

To address the issue, I simply included the code snippet in my webpack.config.js.

        fallback: {
            "stream": false,
            "fs": false,
            "tls": false,
            "net": false,
            "path": false,
            "zlib": false,
            "http": false,
            "https": false,
            "stream": false,
            "crypto": false,
            "crypto-browserify": require.resolve('crypto-browserify'),
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to properly format letters with accents (such as French letters)?

I have encountered a challenge where I created a PHP file to display French text and then utilized this text in an AJAX file (specifically the responseText). The issue arises when trying to show the French responseText in an alert using JavaScript, as ac ...

Exploring VueJS Child Component Navigation

Currently facing a challenge with my initial Vue application, which is part of a larger ASP MVC .net app. I have an application consisting of three pages. <router-link to="/Controller/FirstPage" class="list-numbered-item"> FirstPage </router-li ...

Can you explain the concept of asynchronous in the context of Ajax?

Can you explain the concept of Asynchronous in Ajax? Additionally, how does Ajax determine when to retrieve data without constantly polling the server? ...

Can the URL be updated in Vue Router without navigating to a new page?

I am working on a Nuxt.js website and trying to implement a "Load more" button on the /catalog page. When clicking on the button, I want to load more products without navigating to a new URL like /catalog/page_2 (?page=2 is not an option). If I use $router ...

What's the best way to incorporate a clear options icon when choosing an option in a MaterialUI select component?

I am looking to enhance the user experience by adding a clear options icon that appears when a selection is made from the list of options. <Select InputProps={{ startAdornment: ( <InputAdornment position='end'> <Cl ...

Configuring RingoJS to search for necessary modules within the node_modules folder

Currently, I am in the process of transitioning a service from nodejs to ringojs. My main hurdle involves the usage of require(). To illustrate, take a look at this snippet: var restify = require('restify'); The issue arises when RingoJS is una ...

Tips for dynamically updating the value of a variable in Vue by importing a JavaScript file

There is a file for an app that imports ymaps.js where YmapsComponent.vue is declared. import '../js/ymaps.js'; import { createApp } from 'vue'; const app = createApp({}); import YmapsComponent from './components/YmapsComponent.vue ...

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

Having a background in PHP, I am accustomed to using a PHP file to handle all of my ajax calls. Recently, I have been introduced to ASP.NET controls and the overall environment. I am curious about the correct method for handling ajax requests when they n ...

How do I include an icon on the far left of my NavBar menu? I'm having trouble figuring out how to add an icon to the header NavBar

How can I add an icon to the left of my NavBar header? I am struggling with adding an icon on the far left side of my NavBar. The NavBar is a custom class from NavBar.js. I want to include an icon in this bar on the leftmost side. I have already added b ...

Notifier - The Best HTML Notification System for Web Applications

Currently, I am developing a notification system using Play Framework 2.3 (Java) in combination with MySQL. The system is designed to retrieve notifications from a "notifications" table stored in MySQL database. I initially attempted to use AJAX polling ...

Retrieve the input field value using JavaScript within a PHP iteration loop

I've implemented an input box inside a while loop to display items from the database as IDs like 001,002,003,004,005 and so on. Each input box is accompanied by a button beneath it. My Desired Outcome 1) Upon clicking a button, I expect JavaScript t ...

Styling JSON data in a jQuery Mobile list display

Currently working on a jQuery Mobile application that aims to achieve a similar output as shown in this image: The HTML code responsible for generating the image is as follows: <ul data-role="listview" data-inset="true"> <li data-rol ...

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

Introducing Block Insert feature in React Draft-js - a powerful

How the Process Works: Upon hitting the spacebar, the Draft-JS editor queries the text content for a specific word. Subsequently, all instances of that word are enveloped in tags. The HTML is then converted back and the state of the Draft-JS editor is upd ...

retrieve the identification number associated with a specific value

How can I retrieve the value of this ID, which is sent from the controller and displayed in the table? This is my HTML code: <tbody class="no-border-x"> <tr> <td id="id"></td> <td id="nm_kegiatan"></td> ...

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Utilize MaterialUI's Shadows Type by importing it into your project

In our project, we're using Typescript which is quite particular about the use of any. There's a line of code that goes like this: const shadowArray: any = Array(25).fill('none') which I think was taken from StackOverflow. Everything s ...

The functionality of Jquery AJAX is operational, however, the message being displayed appears to

Inside the file changename.php, there is a DIV element: <div id="resultDiv"></div> Within the same file, PHP code can be found: <?php include_once ('connect.php'); if(isset($_POST['name'])) { $postedname = $_POST[&ap ...

Refresh a particular element using javascript

I'm new to Javascript and I am trying to refresh a specific element (a div) using only Javascript when that div is clicked. I came across the location.reload() function, but it reloads the entire page which doesn't fit my requirements. Upon clic ...

How can you utilize jQuery to iterate through nested JSON and retrieve a specific matching index?

In the scenario where I have a nested JSON object like this: var library = { "Gold Rush": { "slides": ["Slide 1 Text","Slide 2 Text","Slide 3 Text","Slide 4 Text"], "bgs":["<img src='1.jpg' />","","<img src='2.j ...