Модуль не найден: путь к пакету. не экспортируется из пакета / Firebase не будет обновляться в приложении next.js

Я работаю над приложением Next.js, которое извлекает данные из коллекции Firebase. При подключении базы данных Firebase я сталкиваюсь со следующей ошибкой:

Не удалось скомпилировать. Модуль не найден

Кажется, это происходит из файла config.js с учетными данными firebase. Он находится здесь: корень > src > firebase > config.js

Когда я запускаю npm firebase -v я получаю, что установлена версия 8.19.2 Однако в package.json указано, что это ^ 9.8.0. Когда я пытаюсь обновить firebase, он ничего не делает.

Файл конфигурации выглядит следующим образом:

import firebase from 'firebase'; 
import { initializeApp } from 'firebase-admin';
import { getFirestore } from 'firebase/firestore';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  export default db;

Файл package.json выглядит так:

{
  "name": "with-redux-toolkit",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "@reduxjs/toolkit": "1.5.0",
    "@stripe/react-stripe-js": "^1.11.0",
    "@stripe/stripe-js": "^1.44.1",
    "@tailwindcss/line-clamp": "^0.2.0",
    "axios": "^1.1.3",
    "currency": "^4.1.0",
    "firebase": "^9.8.0",
    "firebase-admin": "^9.12.0",
    "micro": "^9.4.1",
    "moment": "^2.29.4",
    "next": "^13.0.3",
    "next-auth": "^4.16.4",
    "react": "^18.2.0",
    "react-currency-format": "^1.1.0",
    "react-dom": "^18.2.0",
    "react-redux": "7.2.2",
    "react-responsive-carousel": "^3.2.23",
    "stripe": "^10.17.0"
  },
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.15",
    "tailwindcss": "^2.1.2"
  }
}

Кто-нибудь знает, что может происходить?

Заранее спасибо.

Не могли бы вы предоставить код из вашего файла config.js и показать нам файл pacakge.json?

— 18.11.2022 12:02

Я добавил запрошенную информацию @MarioG8

— 18.11.2022 12:21

Я добавил свое решение! Проверьте это!

— 18.11.2022 12:50

javascript firebase npm next.js

18.11.2022 11:52

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript

Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...

учебник по Javascript

JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

Освоение принципов SOLID в JavaScript: Пошаговое руководство

Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...

JavaScript - For Loop

Наиболее используемая компактная форма оператора цикла.

Неделя 1 - Карточки с временной шкалой

Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...

146

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы используете "firebase": "^9.8.0" в своем проекте. Попробуйте использовать официальную документацию инструкцию для firebase 9 или вторую ссылку из npm о firebase 9 и :

Документы Firebase 9:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Вторая ссылка Npm:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

Ваш config.js должен выглядеть так:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };


const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export default db;

Эта команда:

npm firebase -v

Получает текущую версию npm :-P

Чтобы правильно проверить версию firebase на вашем компьютере, вам необходимо установить ее глобально! ссылка : https://firebase.google.com/docs/cli#install-cli-mac-linux

Затем вы можете проверить версию: