找不到模塊：無法解析 @google-cloud/storage 上的“fs”

Question

獲取Module not found: Can't resolve 'fs'錯誤。

import { Storage } from '@google-cloud/storage';

const googleCloud = new Storage({
  keyFilename: '../../my-project-c1a44bf80be3.json',
  projectId: 'my-project',
});

googleCloud.getBuckets().then((x: any) => console.log(x));

my-project-c1a44bf80be3.json （從GCP下載）存在並且是項目級別

錯誤：

event - compiled successfully
event - build page: /
wait  - compiling...
error - ./node_modules/@google-cloud/storage/build/src/file.js:24:0
Module not found: Can't resolve 'fs'
null
Could not find files for / in .next/build-manifest.json
event - compiled successfully

使用googleapis時出現相同的錯誤。 但是，它不是./node_modules/@google-cloud/storage/build/src/file.js:24:0它位於googleapis附帶的google-auth-library模塊中。

使用yarn添加。

Answer 1

這通常發生在您在客戶端導入或引用 firebase-admin 時，請檢查您的代碼是否存在您可能調用的錯誤導入

import * as firebase from "firebase-admin";

代替

import firebase from "firebase";

Answer 2

發布評論中提供的解決方案以獲得可見性。

在你的 webpack 配置中，你可以指明某些模塊如 fs 應該被剔除； 此時您應該能夠在客戶端運行這個庫。 例如：

node: {
        // Some libraries import Node modules but don't use them in the browser.
        // Tell Webpack to provide empty mocks for them so importing them works.
        ...config.node,
        fs: 'empty',
        child_process : 'empty',
        net : 'empty',
        tls: 'empty',
      }

Answer 3

我遇到了同樣的問題，但本指南是我的解決方案。 如前所述，問題在於firebase-admin包被設計為在 NodeJs 環境中運行，而不是在客戶端上運行。 使用某些條目擴展webpack.config.js或next.config.js並沒有解決我的問題。

解決方案是將 firebase firebase-admin調用移動到您可以在/pages/api文件夾中創建的NextJS API 。

這是一個從客戶端獲取單個用戶數據的示例。

你需要：

• /src/lib/firebase.ts : firebase 初始化
• /src/pages/api/user.ts ：NextJS API 處理程序
• /src/components/xyz.tsx : 客戶端組件，調用API

// /src/lib/firebase.ts
import admin from "firebase-admin";
import { cert } from "firebase-admin/app";
import certConfig from "./firebase-adminsdk-config.json"

admin.initializeApp({
  credential: cert(certConfig)
});
console.log("Firebase initialized.");


export default admin;

// /src/pages/api/user.ts
import admin from 'lib/firebase'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const firebase = admin.firestore()
  const collection = firebase.collection('users')

  // get any data from requests body
  const { user } = req.body

  // perform your firebase collection call
  const data = await collection.get(user.id)

  // return data to client
  res.status(200)
  res.json({ 
      success: true, 
      result: data 
  });
    
  return res
}

在客戶端，您只需對自己的 API 執行 GET

// /src/components/xyz.tsx
...
  const onLogin = async (user) => {
    const response = await fetch(`/api/users`, {
      method: "GET",
      body: JSON.stringify({ user }),
    });

    // data => { success: boolean, result: any }
    const data = await response.json(); 
    return data;
  }
...

Answer 4

Module not found: Can't resolve 'fs'嘗試從 GCP 存儲中列出存儲桶時， Module not found: Can't resolve 'fs'錯誤。

import { Storage } from '@google-cloud/storage';

const googleCloud = new Storage({
  keyFilename: '../../my-project-c1a44bf80be3.json',
  projectId: 'my-project',
});

googleCloud.getBuckets().then((x: any) => console.log(x));

my-project-c1a44bf80be3.json （從 GCP 下載）存在並且是項目級別

錯誤：

event - compiled successfully
event - build page: /
wait  - compiling...
error - ./node_modules/@google-cloud/storage/build/src/file.js:24:0
Module not found: Can't resolve 'fs'
null
Could not find files for / in .next/build-manifest.json
event - compiled successfully

使用googleapis ( https://www.npmjs.com/package/googleapis ) 時會出現相同的錯誤。 但是，它位於googleapis附帶的google-auth-library模塊中，而不是./node_modules/@google-cloud/storage/build/src/file.js:24:0 。

使用yarn添加