找不到模块：无法解析 @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添加