Encountering an issue with googleapis in Vue.js: Error - The argument labeled as "original" must be of type Function

Attempting to retrieve rows from a Google Spreadsheet using googleapis for a Vue project. I have set up the necessary project and service account credentials in the Google console. However, upon clicking the button, I encounter this error:

TypeError: The "original" argument must be of type Function
. Below is the code snippet I am using:

<template>
  <div id="app" class="container">
    <button class="button" @click="getData">Get data</button>
  </div>
</template>

<script>
export default {
  name: 'app',

  methods: {
    getData: async function() {
      const { google } = require('googleapis');
      const range = 'Data!A2:C999';
    }
  }
}
</script>

The error seems to stem from the line

const { google } = require('googleapis');
, but I'm unable to pinpoint the issue.

Answer №1

After encountering the same issue, I found a solution by implementing the workaround mentioned here. This resolved the problem for me.

It appears that there may be an issue when running readFile() on the browser.

To address this, you will need to make changes to your webpack.config.js file as follows:

module.exports = {
resolve: {
    extensions: ['.js'],
    alias: {
        fs: path.resolve(__dirname, 'src/mock-fs.js')
    }
  }
};

If you are utilizing Vue CLI 3, you must create a vue.config.js file at the root directory because the webpack.config.js file is not generated during project setup (it gets created dynamically). Make modifications to it as described (more info)

module.exports = {
configureWebpack: {
    resolve: {
        extensions: ['.js'],
        alias: {
            fs: path.resolve(__dirname, 'src/mock-fs.js')
        }
    }
  }
}

The content of mock-fs.js should be like this:

module.exports = {
readFile () {}
}

Answer №2

const { google } = require('googleapis');
is not the appropriate syntax to use.

The correct statement should be:

import { google } from 'googleapis';

placed below the starting script tag

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

The attribute "value" for Material-UI autocomplete cannot be used in conjunction with the "getOptionLabel" attribute

<Autocomplete id="license-select" options={licReqList} value = {licReqList[0] ? licReqList[0].licReqStr : null} getOptionLabel={(option) => option.licReqStr} onChange={ha ...

Tips for gathering an array of checkboxes within a dynamic array of items using Vue.js and Vuetify

I am currently working on a role permission system where I have defined a resource array containing items that users can access, as well as checks representing the permissions for each resource. My goal is to dynamically assign a role with these resources ...

steps to remove the border of the select box in MUI component

i am struggling to disable the border on the select box and change the color of the label text when focused or blurred i have attempted it but have been unsuccessful i am not very skilled at Mui component customization this is the image that i desire ht ...

Is it possible to show a pop-up window containing aggregated data when the jQuery double-click event

How can I create a pop-up window to display aggregated data when the Double-click event is triggered in jQuery? In my code, each questionId has multiple related reasons. When a user clicks or selects a questionId button/event, the selected questionId will ...

Ways to dynamically link a JSON response object to an entity?

In my ng2 implementation, I have a user.service.ts file that calls a REST service and returns JSON data. The code snippet below shows how the getUser function retrieves the user information: getUser(id: number): Promise<User> { return this.http. ...

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

Getting a blank request body error while receiving data from an Angular 4 application in Express

My express route is indicating that the body of the request being sent is empty, according to req.body. The main node file looks like this - var express = require('express'); var bluebird = require('bluebird') const bodyParser = requ ...

A step-by-step guide on setting up flow types for @material-ui/core version 4

Is there a way to install flow types for material-ui/core version 4.x.x? It seems like the last update was for version 1.x.x here. The documentation on this topic is quite limited here. I'm unsure if there is still support for this, especially since t ...

Unforeseen behavior in event binding causing knockout knockout

I implemented an event binding for the scroll event on a DIV. To add debounce functionality to the handler, I created a function on my model that generates the debounced handler. Then, in my view, I bind this factory function. I assumed that my factory fu ...

Display a loading indicator or progress bar when creating an Excel file using PHPExcel

I am currently using PHPExcel to create excel files. However, some of the files are quite large and it takes a significant amount of time to generate them. During the file generation process, I would like to display a popup with a progress bar or a waitin ...

Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

I have a task that runs asynchronously and takes a long time to complete. When the task starts, I display a mat-spinner with a timeout set at 60000 milliseconds. However, we now have a notification service that provides updates on the job status. I would l ...

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

I recently encountered a scenario where I needed to select a video on one page and have it automatically play on another page without any redirection. The initial page displays a list of videos for selection, like this: FirstPage Once a video is chosen on ...

Designating a certain function to a designated button

On my page, I have three different forms with submit buttons in each. There is a code that is supposed to change the value of a button in a specific form when clicked. However, whenever I click on any submit button, all the values in the buttons of the v ...

What is the most efficient method for sending query parameters through a URL in Vue.js with Axios?

My goal is to use Axios upon page load to retrieve a JSON object from the base URL. When a button is clicked, I want to append query parameters to the URL and fetch a different JSON object. For example, if the base URL is 'test.com', clicking the ...

Exploring the Potential of Using ngIf-else Expressions in Angular 2

Here is a code snippet that I wrote: <tr *ngFor="let sample of data; let i = index" [attr.data-index]="i"> <ng-container *ngIf="sample.configuration_type == 1; then thenBlock; else elseBlock"></ng-container> <ng-template #t ...

Update the iframe URL to direct the user to a new tab instead of opening a popup

I have created the following script, but I am facing a challenge as I realize that the URL I want to use opens in a new tab instead of just forwarding: <script> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.sp ...

Tips on altering the color of a circle's radius within Google Maps

I'm trying to add a circular radius on a Google Map. Even after reviewing the Google Maps API documentation, I'm still unsure of how to accomplish this task. Below is the code snippet I have been working with: const MyMapComponent = compose( ...

Transforming user-entered date/time information across timezones into a UTC timezone using Moment JS

When working on my Node.js application, I encounter a scenario where a user inputs a date, time, and timezone separately. To ensure the date is saved without any offset adjustments (making it timezone-independent), I am utilizing Moment Timezone library. ...

The inclusion of <script> tag within the response received from an Ajax

Is there a way to update an element's innerHTML using Ajax.request that includes <script> tags? <div><script type="text/javascript">javascript</script></div> I want to update the content of a div with code from above wi ...

Problem with deleting or substituting symbols and character codes within a String

I am attempting to send an object called dataO from Node.js/Express/EJS to the client side. On the Node.js script side: var dataO = {"first":[20000, 14000, 12000, 15000, 18000, 19000, 22000], "second":[12000, 11000, 18000, 12000, 19000, 14000, 26000]}; var ...