Error: Can't resolve 'child_process' and Error: Can't resolve 'fs'

Question

I am trying to use the google-spreadsheet library to get data from google spreadsheets to my Vue application. But I am getting the following error

 error  in ./node_modules/google-auth-library/build/src/auth/googleauth.js

Module not found: Error: Can't resolve 'child_process' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'

 error  in ./node_modules/google-auth-library/build/src/auth/googleauth.js

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'

 error  in ./node_modules/google-p12-pem/build/src/index.js

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-p12-pem\build\src'

 error  in ./node_modules/gtoken/build/src/index.js

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\gtoken\build\src'

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 22:24-48
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'
 @ ./node_modules/google-auth-library/build/src/index.js 20:21-49
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 24:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-auth-library\build\src\auth'
 @ ./node_modules/google-auth-library/build/src/index.js 20:21-49
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

ERROR in ./node_modules/google-p12-pem/build/src/index.js 16:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\google-p12-pem\build\src'
 @ ./node_modules/gtoken/build/src/index.js 168:57-82
 @ ./node_modules/google-auth-library/build/src/auth/jwtclient.js 22:17-34
 @ ./node_modules/google-auth-library/build/src/index.js 74:18-45
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

ERROR in ./node_modules/gtoken/build/src/index.js 16:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\Internship\Draft1\draft1\node_modules\gtoken\build\src'
 @ ./node_modules/google-auth-library/build/src/auth/jwtclient.js 22:17-34
 @ ./node_modules/google-auth-library/build/src/index.js 74:18-45
 @ ./node_modules/google-spreadsheet/lib/GoogleSpreadsheet.js 9:4-34
 @ ./node_modules/google-spreadsheet/index.js 1:26-60
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&lang=ts 5:0-50 46:22-38
 @ ./src/views/HomeView.vue?vue&type=script&lang=ts 1:0-238 1:0-238 1:239-466 1:239-466
 @ ./src/views/HomeView.vue 2:0-59 3:0-54 3:0-54 8:49-55
 @ ./src/router/index.ts 2:0-45 6:13-21
 @ ./src/main.ts 3:0-30 17:8-14

webpack compiled with 4 errors

I have tried almost all the solutions I could find online (like this question ) but I am still getting this error. My package.json is

{
  "name": "draft1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "assert": "^2.0.0",
    "axios": "^0.27.2",
    "child_process": "^1.0.2",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "el-table-draggable": "^1.4.12",
    "element-plus": "^2.2.2",
    "fs": "0.0.1-security",
    "google-spreadsheet": "^3.3.0",
    "https": "^1.0.0",
    "lodash": "^4.17.21",
    "net": "^1.0.2",
    "node-polyfill-webpack-plugin": "^2.0.0",
    "node-sass": "^7.0.1",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "pouchdb": "^7.3.0",
    "primeicons": "^5.0.0",
    "primevue": "^3.12.6",
    "querystring-es3": "^0.2.1",
    "sass-loader": "^13.0.0",
    "stream-browserify": "^3.0.0",
    "tls": "0.0.1",
    "url": "^0.11.0",
    "util": "^0.12.4",
    "v-network-graph": "^0.5.17",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-good-table": "^2.21.11",
    "vue-gsheets": "^4.0.3",
    "vue-resizer": "^1.1.9",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3",
    "@types/pouchdb": "^6.4.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "vue/no-deprecated-slot-attribute": "off"
    }
  },
  "browser": {
    "fs": false,
    "child_process": false
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

I have also tried

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      new NodePolyfillPlugin()
    ]
  }
})

but this doesn't work either.

My main code where I am trying to use google-spreadsheets is (I was trying to follow this tutorial tutorial

<template>
<button @click="handlesheets">GOOGLE SHEETS</button>
</template>
<script lang='ts'>
import GoogleSpreadsheet from "google-spreadsheet"
export default defineComponent({
  name: 'HomeView',
  props: [],
  data(){
    return{
      
    };
  },
  components: {
    GraphComp,
    TableComp
  },
  methods: {  
    handlesheet(){
        const doc = new GoogleSpreadsheet('1*****')
        //await promisify(doc.useServiceAccountAuth)(creds)
        //const info = await promisify(doc.getInfo)()
        //const sheets = info.worksheets[0]
        //console.log(sheets.title)

    }

I am new to Javascript and vue, so if anyone can let me know my mistake or point to the direction of the solution I'll be grateful.

Answer 1

AFAIK google-spreadsheets is a node package that depends on node specific libraries like fs

Inferring from the error message you provided and the fact you are trying to use this package with Vue leads me to believe you are trying to use google-spreadsheets in the browser directly.

I'm not entirely sure what your use case is but, if you are set on using this package I would suggest making a separate node project to play with and potentially use that node project to send data to your vue project.