What is the process for importing Buffer into a Quasar app that is using Vite as the build tool

I'm having issues with integrating the eth-crypto module into my Quasar app that utilizes Vite.

The errors I'm encountering are related to the absence of the Buffer object, which is expected since it's typically found in the front end.

Is there a recommended approach for importing a polyfill to address this issue?

Thus far, I've attempted the following modifications in my quasar.config.js file:

const { configure } = require('quasar/wrappers');
const path = require('path');
const buffer = require('buffer');

module.exports = configure(function (ctx) {
  return {
...
    build: {
      target: {
        browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
        node: 'node16'
      },

      vueRouterMode: 'hash', // available values: 'hash', 'history'

      env: {
        VUE_APP_API: ctx.dev
          ? 'http://localhost:3000'
          : 'https://prod.api.com'
      },
      rawDefine: {
        global: {},
        buffer: buffer,
        Buffer: buffer.Buffer
      },

      vitePlugins: [
        ['@intlify/vite-plugin-vue-i18n', {
          include: path.resolve(__dirname, './src/i18n/**')
        }],
        [
          'vite-plugin-bundle',
          {
            entries: [

            ]
          }
        ]
      ],
    }
}

Despite these adjustments, I'm unable to successfully import the Buffer object in order to make it accessible to npm modules.

Answer №1

I am encountering the same problem and have not had much success in resolving it with polyfill plugins.

One workaround I attempted was adding another boot file, setting it as a 0 index in the quasar boot files array. After making this change, I no longer received the error and it could potentially work for you as well.

Here is what I included inside:

import { Buffer } from "buffer";

// @ts-ignore
window.Buffer = Buffer;

In general, it may be advisable to search for a library that is compatible with your current environment.

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

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

Modify the divs in two separate occasions when submitting different forms

Within my form, I have radio buttons located inside div1, a captcha code to be solved in div2, and additional content in div3. My goal is to have div1 replaced by div2 when a radio button is checked and submitted. Then, after completing the captcha in div2 ...

How can I use jQuery to set the text in a select element in HTML?

I have come across more examples of this, but unfortunately they do not seem to work. $(window).load(function () { $("#country").html('Please make a selection from the options below'); }); <select id="country"> <option value="None"> ...

can a computed property be delayed in its calculation?

Within the code snippet below, we can see that in the compPropsIsBtnDigitizePolygonDisabled function, it initially checks if the digitizePolygonInteractions variable is initialized. If it is not initialized, an error will be triggered. During execution, w ...

Show the chosen value from the dropdown menu on all JSP pages

I have a header.jsp file containing a dropdown box labeled "Role". This header.jsp is designed to be included in all other JSP files using a directive. Once a user logs in, they are directed to a homepage where they must select a value from the dropdown ...

Investigating TLS client connections with node.js for troubleshooting purposes

I am currently facing an issue while setting up a client connection to a server using node.js and TLS. My query revolves around how I can gather more information regarding the reason behind the connection failure. It would be great if there is a way to ob ...

Locate the nearest date (using JavaScript)

Searching for the nearest date from an XML file. <?xml version="1.0" encoding="UTF-8"?> <schedule> <layout fromdt="2014-01-01 00:00:00" todt="2014-01-01 05:30:00"/> <layout fromdt="2014-02-01 00:00:00" todt="2014-01-01 05 ...

Is there a method available to incorporate a scroller into an nvd3 chart?

I am encountering an issue with my nvd3 chart. When I have a large amount of data that exceeds the width of the chart container, there is no scroll bar present and I'm struggling to figure out how to add one. I attempted to include overflow:scroll wi ...

Retrieving the text or value of an ASP.NET label using JavaScript

One of my challenges is transferring a string of data from C# to JavaScript in ASP web forms. My plan involves setting the data as a text for an ASP label in C#, then extracting the label's text by ID in JS. This is the C# code (ascx.cs file): L ...

What purpose does the symbol '$' serve in React component properties?

While delving into the world of styled-component, I encountered some difficulties with the 'adapting based on props' aspect. import './App.css'; import styled from 'styled-components' const PrimaryButton = styled.button` co ...

Having issues with your JQuery code?

I am attempting to locate a cell within a table that contains the class 'empty'. My goal is to then utilize a code snippet to obtain the id (cell number) and determine which cells are adjacent to it. As part of my test, I am experimenting with t ...

Switching from constructors to Hooks in REACT

I am currently working on adding a modal example within a function in my project. I have a specific requirement to incorporate hooks instead of using the constructor in a class-based component. This is the code snippet with the class-based implementation: ...

avoidable constructor in a react component

When it comes to specifying initial state in a class, I've noticed different approaches being used by people. class App extends React.Component { constructor() { super(); this.state = { user: [] } } render() { return <p>Hi</p> ...

What Happens When You Click on a Link in Google News Using the Mobile Chrome Browser

When using the Chrome Browser on mobile to open a news link from Google News, a new tab is opened. To return to Google News, users can click on the white-highlighted "left arrow" below or find a small header with a "<" symbol above to navigate back. Ho ...

When utilizing the @Prop decorator in TypeScript, the compiler throws an error prompting the need to initialize the prop

Currently, I am utilizing Vue in combination with TypeScript along with the 'vue-property-decorator' package. When attempting to utilize a prop as shown below: @Prop({ default: '' }) private type: string An error is triggered by the ...

What is the best way to change a JSON string into an array of mysterious objects?

I am currently working on a flashcard generator project and I am dealing with a JSON String that is quite complex. The JSON String contains multiple arrays and objects structured like this: data = [{"front":"What is your name?","back":"Billy"},{"front":"H ...

Extremely sluggish change identification in combination Angular application

We are encountering consistent issues with slow change detection in our hybrid AngularJS / Angular 8 app, especially when dealing with components from different versions of the framework. The problem seems to arise when using older AngularJS components wit ...

Guide to adjusting the color of Fluent UI icon when hovering with mouse?

I've been implementing Fluent UI in my current project. When initializing my button, I use this straightforward JavaScript code: iconProps: { iconName: 'NewFolder', styles: { root: { color: 'orang ...

Can you explain the purpose of using 'created' and 'activated' with keep-alive components in Vue.js?

At first, I am retrieving data from the api within the created hook and it is functioning perfectly. created() { this.fetchInformation() } While exploring best practices for lifecycle hooks, I stumbled upon this advice: You need to fetch some data f ...

Loop through the array and eliminate the identification solely

{ "productGroupVariantss": [ { "id": 1378, "name": "No oF Poles", "variantsAttributeses": [ { "id": 391, "variantsId": null, "variantsValue": "1p" }, { "id": 392, ...