Блог

Получение Module not found: Can't resolve 'fs' ошибки при попытке перечислить корзины из хранилища GCP.

 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 .

Обычно это происходит, когда вы импортируете или ссылаетесь на firebase-admin на стороне клиента, проверьте свой код на наличие неправильного импорта, в котором вы, возможно, вызываете

 import * as firebase from "firebase-admin";
  

вместо

 import firebase from "firebase";
  

Я столкнулся с той же проблемой, но это руководство было решением в моем случае. Как упоминалось ранее, проблема в том, что firebase-admin пакет предназначен для запуска в среде NodeJS, а не на клиенте. Расширение webpack.config.js или next.config.js с определенными записями не решило проблему для меня.

Я заметил, что вы используете NextJS. Итак, решение состоит в том, чтобы переместить firebase-admin вызовы в API NextJS, который вы можете создать в /pages/api папке.

Вот простой пример извлечения пользовательских данных из клиента.

Вам нужно:

• /src/lib/firebase.ts : инициализация firebase
• /src/pages/api/user.ts : Обработчик API NextJS
• /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

 // /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;
  }
...
  

Публикуем решение, представленное в комментариях для наглядности.

В вашей конфигурации 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',
      }
  

Сценарий, который вы описываете, в настоящее время обрабатывается Google. Несмотря на отсутствие ETA, проблема является приоритетной.