The entry for "./standalone" in the "@firebase/database-compat" package does not have any documented conditions

Upon running npm run build for my sveltekit project, I encountered the following error generated by vite:

7:55:49 PM [vite-plugin-svelte] When trying to import svelte components from a package, an error occurred due to missing `package.json` files. Contact the author to resolve this issue.
- firebase-admin
✓ 47 modules transformed.
[commonjs] No known conditions found for "./standalone" entry in "@firebase/database-compat" package
> No known conditions found for "./standalone" entry in "@firebase/database-compat" package
Error: No known conditions found for "./standalone" entry in "@firebase/database-compat" package
    at bail (/home/vincent/repos/sveltekit/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:29712:8)
    at resolve$1 (/home/vincent/repos/sveltekit/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:29768:32)
    at resolveExports (/home/vincent/repos/sveltekit/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:30285:12)
    at resolveDeepImport (/home/vincent/repos/sveltekit/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:30301:26)
    at tryNodeResolve (/home/vincent/repos/sveltekit/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:30043:11)
    at Object.resolveId (/home/vincent/repos/sveltekit/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:29910:28)
    at /home/vincent/repos/sveltekit/node_modules/rollup/dist/shared/rollup.js:22697:251

After checking in the node_modules, it was confirmed that the package @firebase/database-compat does export its package.json file. This is perplexing.

Below is my package.json:

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build --verbose",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@sveltejs/adapter-vercel": "next",
    "@sveltejs/kit": "next",
    "@tsconfig/svelte": "^2.0.1",
    "@types/body-parser": "^1.19.1",
    "@types/cookie": "^0.4.1",
    "sass": "^1.39.2",
    "svelte": "^3.38.3",
    "typescript": "^4.4.3"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie": "^0.4.1",
    "firebase": "^9.4.1",
    "firebase-admin": "^10.0.0",
    "prettier": "^2.3.2",
    "prettier-plugin-svelte": "^2.3.1",
    "svelte-preprocess": "^4.9.4"
  },
  "prettier": {
    "arrowParens": "always",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "none"
  }
}

Answer №1

I needed to modify the import style from CommonJS (CJS) to ECMAScript Module (ESM) format.

Original:

const { Pkg } = require('package/sub')

Updated:

import { Pkg } from 'package/sub'

It seems like Vite might be having trouble resolving the export and import syntax for this specific package in this scenario?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating a reference into a styled component div in a React application using TypeScript

Looking to include a reference to a styled component div. Here is the code snippet: const DragAndDrop: React.FC<any> = props => { const divRef= React.createRef(); return ( <Zone ref={divRef}/> ); } Encountering thi ...

Updating expo causes issues with running npm install

As I embark on the gradual upgrade of my Expo project from version 36.0.0 to 40.0.0, I carefully update one version at a time to avoid any disruptions to the app's functionality. However, I have encountered an obstacle that is hindering my progress. ...

What strategies can be implemented to maximize the efficiency of Firebase when designing an admin-only page, in order to minimize unnecessary data reads and

Currently, I have established a secure page within our website that is exclusively accessible to administrators. The technology stack being used includes React Next.js and Cloud Firestore for managing data. As the page is loaded, a read operation in Firest ...

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

Transferring node_modules to Nexus's NPM repository for hosting

We are currently constructing our project on an offline build server. This requires us to keep and manage all of our project dependencies within a local network Nexus. After following this guide, I have successfully set up a hosted NPM registry in Nexus w ...

When intercepted, the HttpRequest is being canceled

Solution Needed for Request Cancellation Issue Encountering a problem with the usage of HttpInterceptor to include the Authorize header in all HTTP requests sent to AWS API Gateway. The issue arises as all these requests are getting cancelled when interce ...

Tips for showcasing information submitted by diverse individuals in a universal roster via Firebase

I'm currently working on an app that requires user authentication and data storage, specifically related to food details. Firebase is the chosen platform for storing this information under each unique userID. My goal is to display a list of all food d ...

What is the best method for excluding attributes from a nested model in sequelize?

In my project, there are 2 models called User and Role, and they have a many-to-many relationship. To manage this connection, I introduced a third model named UserRole. The issue arises when the UserRole is also retrieved in the query below: async getUser ...

A function injected into a constructor of a class causes an undefined error

As I delve into learning about utilizing typescript for constructing API's, I have encountered a couple of challenges at the moment. Initially, I have developed a fairly straightforward PostController Class that has the ability to accept a use-case wh ...

Bringing tex2max.js into an angular application using npm and index.html

Every time I attempt to import tex2max with the command declare var tex2max: any;, I encounter a ReferenceError: tex2max is not defined. Interestingly, this issue does not arise with other npm packages. Despite trying various methods such as installing the ...

The Redux Toolkit Slice is encountering an issue where it generates the incorrect type of "WritableDraft<AppApiError> when the extraReducer is

I defined my initial state as MednannyAppointments[] for data and AppApiError for error. However, when I hover over state.error or state.data in my extraReducer calls, the type is always WritableDraft. This behaviour is confusing to me. Even though I have ...

Challenges when it comes to exporting files using Firebase Cloud Functions

I've been working with Firebase Cloud Functions using JavaScript, but I'm encountering issues with the import and export statements. Is there a solution to replace them? const firebase = require('firebase'); const config = { apiKe ...

Ways to set a default value for Subject RxJS observable

Currently working on developing an Angular 2 application where I need to enable the reordering of columns in a List by clicking on the title, similar to how data-tables work. I came across some examples in the Angularfire 2 documentation which gave me an i ...

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

I'm facing an issue with firebase's auth templates not supporting my native language. Is there a way to customize the password reset template to also handle verification and email address change emails? ...

Retrieve the overall number of job openings from the Github Job API

I have successfully created an Angular application that mirrors the functionality of However, I encountered a limitation where only 50 positions are available per page, To fetch additional jobs beyond the initial 50, I need to append "?page=X" to another ...

The global declaration of Typescript is only accessible within the node_modules/@types directory

Scenario As I develop an npm package using Typescript, I include types that are shipped alongside the library in the following structure: my-package |- index.js |- index.d.ts |- package.json The index.d.ts file includes global declarations like: declare ...

To trigger a Bootstrap 5 modal in a child component from a button click in the parent component in Angular without the need to install ng-bootstrap is possible with the following approach

To achieve the functionality of opening a modal in a child component upon clicking a button in the parent component without using ngx-bootstrap due to restrictions, one approach is to add data-bs-target and data-bs-toggle attributes to the button. Addition ...

A tool on npm designed to recognize the morphology of images through closing analysis

Currently in search of an npm package that can break down an image into outlines of objects within the image, with each object being identifiable programmatically (such as by index or id). I came across a module with similar traits called skimage.morpholog ...

Middleware transformation pipeline implemented using Typescript types

In my quest to create a function that empowers middlewares (specifically Express ones) to enhance the Request object by adding properties to it, I aim for subsequent middlewares in the chain to utilize these additions while preserving data types. An examp ...

Executing `npm run install` with the `--prefix` flag will generate a new directory named `etc`

Within my package.json file (located in the Scripts folder), I have a script defined as follows: "scripts": { "install:prod": "npm i" } Running this script from the Scripts folder works perfectly fine, creating only the node_modules directory. Howeve ...