錯誤：無法解析“child_process”和錯誤：無法解析“fs”

Question

我正在嘗試使用google-spreadsheet庫將數據從 google 電子表格獲取到我的 Vue 應用程序。 但我收到以下錯誤

 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

我已經嘗試了幾乎所有可以在網上找到的解決方案（比如這個問題），但我仍然收到這個錯誤。 我的 package.json 是

{
  "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"
  ]
}

我也試過

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()
    ]
  }
})

但這也不起作用。

我嘗試使用google-spreadsheets的主要代碼是（我試圖按照本教程

<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)

    }

我是 Javascript 和 vue 的新手，所以如果有人可以讓我知道我的錯誤或指出解決方案的方向，我將不勝感激。

Answer 1

AFAIK google-spreadsheets 是一個node包，它依賴於節點特定的庫，如fs

從您提供的錯誤消息以及您嘗試將此包與Vue一起使用的事實推斷，我相信您正在嘗試直接在瀏覽器中使用 google-spreadsheets。

我不完全確定您的用例是什么，但是，如果您打算使用這個包，我建議您制作一個單獨的節點項目來玩，並可能使用該節點項目將數據發送到您的 vue 項目。