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

Question

尝试从 GCP Storage 列出存储桶时出现

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

，而是位于

google-auth-library

附带的

googleapis

模块中。

使用

yarn

添加。

Answer 1

当您在客户端导入或引用 firebase-admin 时，通常会发生这种情况，请检查您的代码是否有可能调用的错误导入

import * as firebase from "firebase-admin";

而不是

import firebase from "firebase";

Answer 2

我遇到了同样的问题，但本指南是我案例的解决方案。 如前所述，问题在于

firebase-admin

包被设计为在 NodeJs 环境中运行，而不是在客户端上运行。使用某些条目扩展

webpack.config.js

或

next.config.js

并没有解决我的问题。

我注意到您正在使用 NextJS。因此，解决方案是将

firebase-admin

调用移至 NextJS API，您可以在

/pages/api

文件夹中创建该 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 3

发布评论中提供的解决方案以提高可见性。

在你的 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 4

是的，在尝试在 firebase 包中使用 api 时遇到了这个问题，例如

firestore

、@

google-cloud/firestore

、

firebase-admin

等。

@Mo.W 上面的答案最好地解释了这一点 - 问题是 firebase-admin 包被设计为在 NodeJs 环境中运行，而不是在客户端上运行。您可以阅读他的解决方案，将其移至

pages/api

但是，在我的情况下 - 我只是指定在我的

package.json

中使用

browser

配置为浏览器环境捆绑项目时应排除某些Node.js模块：

// package.json
{
    "name": "my-app-name",
    "dependencies": {
        "@google-cloud/firestore": "^6.7.0",
        "firebase": "^10.3.1",
        "firebase-admin": "^11.10.1",
        ...
    },
    "browser": {
        "fs": false,
        "os": false,
        "path": false,
        "child_process": false,
        "net": false,
        "tls": false
    }
}

Answer 5

您所描述的场景目前正在由 Google 处理。虽然没有预计到达时间，但该问题正在优先处理。