Popular New Releases in Storage
localForage
Avoid dropInstance uncaught errors
seaweedfs
Cloudreve
3.5.0-beta2
go-ipfs
v0.11.1
thanos
v0.25.2
Popular Libraries in Storage
by localForage 
javascript
19416 Apache-2.0
💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
by chrislusf go
14297 Apache-2.0
SeaweedFS is a fast distributed storage system for blobs, objects, files, and data lake, for billions of files! Blob store has O(1) disk seek, cloud tiering. Filer supports Cloud Drive, cross-DC active-active replication, Kubernetes, POSIX FUSE mount, S3 API, S3 Gateway, Hadoop, WebDAV, encryption, Erasure Coding.
by cloudreve go
14265 GPL-3.0
🌩支持多家云存储的云盘系统 (Self-hosted file management and sharing system, supports multiple storage providers)
by marcuswestin javascript
13575 MIT
Cross-browser storage for all use cases, used across the web.
by ipfs go
13201 NOASSERTION
IPFS implementation in Go
by ceph c++
10429 NOASSERTION
Ceph is a distributed object, block, and file storage platform
by thanos-io go
10255 Apache-2.0
Highly available Prometheus setup with long term storage capabilities. A CNCF Incubating project.
by haiwen c
9606 NOASSERTION
High performance file syncing and sharing, with also Markdown WYSIWYG editing, Wiki, file label and other knowledge management features.
by happyfish100 c
7877 GPL-3.0
FastDFS is an open source high performance distributed file system (DFS). It's major functions include: file storing, file syncing and file accessing, and design for high capacity and load balance. Wechat/Weixin public account (Chinese Language): fastdfs
Trending New libraries in Storage
by juicedata go
5231 Apache-2.0
JuiceFS is a distributed POSIX file system built on top of Redis and S3.
by Tencent c++
2127 NOASSERTION
Tendis is a high-performance distributed storage system fully compatible with the Redis protocol.
by bytedance c++
1606 NOASSERTION
A RocksDB compatible KV storage engine with better performance
by ethersphere go
1335 BSD-3-Clause
Bee is a Swarm client implemented in Go. It’s the basic building block for the Swarm network: a private; decentralized; and self-sustaining network for permissionless publishing and access to your (application) data.
by kubernetes-sigs shell
965 Apache-2.0
Dynamic sub-dir volume provisioner on a remote NFS server.
by google kotlin
952 Apache-2.0
ModernStorage is a group of libraries that provide an abstraction layer over storage on Android to simplify its interactions
by cloudflare go
746 BSD-3-Clause
UtahFS is an encrypted storage system that provides a user-friendly FUSE drive backed by cloud storage.
by astoilkov typescript
649 MIT
React hook that persists data in localStorage
by Seagate jupyter notebook
548 Apache-2.0
CORTX Community Object Storage is 100% open source object storage uniquely optimized for mass capacity storage devices.
Top Authors in Storage
1
57 Libraries
29583
2
45 Libraries
5580
3
27 Libraries
413
4
18 Libraries
4797
5
16 Libraries
7535
6
16 Libraries
68
7
15 Libraries
1067
8
14 Libraries
472
9
14 Libraries
3707
10
13 Libraries
4684
1
57 Libraries
29583
2
45 Libraries
5580
3
27 Libraries
413
4
18 Libraries
4797
5
16 Libraries
7535
6
16 Libraries
68
7
15 Libraries
1067
8
14 Libraries
472
9
14 Libraries
3707
10
13 Libraries
4684
Trending Kits in Storage
LocalStorage is a browser-native API that helps to store data in the user's browser. It's a widely supported Web Storage API specification interface. In Node.js, the "localStorage" module wraps the browser's native localStorage API.
LocalStorage enables client-side content storage, persisting data even after the browser window closes. It offers a simple API with various methods to manipulate data items asynchronously. Dot-property syntax allows easy data access and modification using JavaScript functions.
When working with LocalStorage, remember that it has a read-only property. The client-side code can only access and modify the data stored by itself. Moreover, implement error handlers for any access or modification issues.
In Node.js, LocalStorage stores user data and application data for specific functionalities. It's useful for temporary data during asynchronous tasks or operations.
Using LocalStorage in Node.js applications can enhance performance. Caching retrieved data from a web server improves application responsiveness, reducing HTTP requests. It benefits frequent data fetching, code editors, and file manipulation.
A web server can cache data using LocalStorage, improving load and response times. The LocalStorage stores authentication tokens or session info for user authentication.
Conclusion:
LocalStorage in Node.js provides efficient client-side data storage and retrieval. It enhances application performance, offers a simple API, and supports various browsers. Node.js and Linux developers enjoy LocalStorage's versatility in browser and server-side technologies.
localForage
- It helps in storing data locally within the browser.
- It supports key-value pair storage for small to medium-sized data.
- It stores user preferences, session data, or caching.
lowdb:
- It helps create and manage a lightweight JSON database on the local file system.
- It supports querying, filtering, and updating data using a familiar syntax.
- It is useful for small to medium-sized applications that require a simple database.
nedb:
- It helps in creating an in-memory or persistent embedded database.
- It supports indexing, querying, and sorting data.
- It is suitable for small to medium-sized apps requiring lightweight database solutions.
store:
- It helps in managing a simple key-value stored in memory.
- It supports storing and retrieving data with an easy-to-use API.
- It is used for temporary storage or caching data within a Node.js application.
keyv:
- It helps create a key-value store that supports various storage backends (e.g., memory, Redis, SQLite).
- It supports TTL (Time-to-Live) for automatic data expiration.
- It is suitable for distributed applications or scenarios with different storage options.
level:
- It helps in creating a fast and simple key-value store.
- It supports various storage backends, including in-memory, disk-based, and cloud-based options.
- It is useful for applications that require efficient data storage and retrieval.
memcached:
- It helps in utilizing a Memcached server for distributed caching.
- It supports storing and retrieving data using a simple API.
- It is helpful for applications with high read-intensive workloads or caching requirements.
node-persist:
- It helps in persisting data on the local file system.
- It supports automatic serialization and deserialization of JavaScript objects.
- It is suitable for storing larger data sets or complex data structures.
keyv-file:
- It helps in creating a file-based key-value store.
- It supports the persistence and synchronization of data across multiple instances.
- It is suitable for scenarios where a file-based storage solution is preferred.
FAQ
1. What is the localStorage API, and what are its advantages?
The localStorage API is a browser-native API that allows web apps to store data on the client side. Its simple key-value storage mechanism helps developers save user browser data. The advantages of using the localStorage API include:
Simplicity:
The API offers a straightforward interface with methods like setItem(), getItem(), and removeItem(). This helps with storing, retrieving, and removing data.
Persistence:
Data stored using localStorage persists even after the browser window is closed. This provides a reliable storage solution for web applications.
Larger Storage Capacity:
localStorage allows for larger storage capacity compared to other client-side storage options.
Better Performance:
Accessing data from localStorage is faster than making server requests. Thus, it helps in improving the performance of the web application.
Security:
Data stored in localStorage is only accessible by the web application itself. This is because it is tied to the origin and cannot be accessed by other websites or scripts.
2. How does browser local storage work with Web Storage API?
Browser local storage works hand in hand with the Web Storage API. It includes two storage mechanisms: localStorage and sessionStorage. Both mechanisms provide a key-value storage interface but differ in data persistence. localStorage stores data that remains available even after the browser window is closed. On the other hand, sessionStorage stores data for the duration of the page session.
To use local browser storage, you can interact with it through the Web Storage API methods. These can include localStorage.setItem(), localStorage.getItem(), and localStorage.removeItem(). These methods allow storing, retrieving, and removing data from the localStorage object. Data is stored as strings and can be accessed using unique keys.
3. What are the considerations for JavaScript files when using the Node.js LocalStorage library?
Considerations when using JavaScript files with the Node.js localStorage library:
- Firstly, ensure to import the localStorage library into your JavaScript file. Do this using the require() function or include it in your project dependencies.
- Secondly, localStorage being browser-native API, is default unavailable in Node.js runtime environment. To use localStorage in Node.js, install & import a library emulating browser functionality.
4. What browser support is available for the nodejs localstorage library?
The browser support for Node.js localStorage library depends on the chosen module. Libraries vary in compatibility with browsers. Some support major browsers, and others have limitations or specific requirements.
Check the localStorage library documentation for the browser support matrix. Modern browsers have good support for localStorage, including Chrome, Firefox, Safari, and more. However, testing your application across different browsers is good to ensure consistency.
5. How do web requests interact with the nodejs localstorage library?
The nodejs localStorage library does not interact with web requests. Node.js LocalStorage enables local storage within a runtime environment, like the browser localStorage. It stores and retrieves server data locally, avoiding external HTTP requests.
When using web requests in Node.js, the localStorage library can cache fetched data. Storing frequently accessed data locally minimizes repetitive requests. This enhances performance and reduces network latency.
Thus, the nodejs localStorage library provides local storage functionality within its runtime environment. Web requests in Node.js can use local storage to optimize data fetching and performance.
Trending Discussions on Storage
Why is std::aligned_storage to be deprecated in C++23 and what to use instead?
`Firebase` package was successfully found. However, this package itself specifies a `main` module field that could not be resolved
After upgrading from Angular 12 to 13, cache is too large for Github
android:exported added but still getting error Apps targeting Android 12 and higher are required to specify an explicit value for android:exported
How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular
How to solve FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore problem?
How is optional assignment constexpr in C++ 20?
No analytics cookies is set upon a consent was updated
Do not nest files in rails active storage
What should happen if one calls `std::exit` in a global object's destructor?
QUESTION
Why is std::aligned_storage to be deprecated in C++23 and what to use instead?
Asked 2022-Apr-11 at 14:18I just saw that C++23 plans to deprecate both std::aligned_storage and std::aligned_storage_t as well as std::aligned_union and std::aligned_union_t.
Placement new'd objects in aligned storage are not particularly constexpr friendly as far as I understand, but that doesn't appear to be a good reason to throw out the type completely. This leads me to assume that there is some other fundamental problem with using std::aligned_storage and friends that I am not aware of. What would that be?
And is there a proposed alternative to these types?
ANSWER
Answered 2022-Apr-11 at 14:18Here are three excerpts from P1413R3:
Background
aligned_*are harmful to codebases and should not be used. At a high level:
- Using
aligned_*invokes undefined behavior (The types cannot provide storage.)- The guarantees are incorrect (The standard only requires that the type be at least as large as requested but does not put an upper bound on the size.)
- The API is wrong for a plethora of reasons (See "On the API".)
- Because the API is wrong, almost all usage involves the same repeated pre-work (See "Existing usage".)
On the API
std::aligned_*suffer from many poor API design decisions. Some of these are shared, and some are specific to each. As for what is shared, there are three main problems [only one is included here for brevity]:
- Using
reinterpret_castis required to access the valueThere is no
.data()or even.dataonstd::aligned_*instances. Instead, the API requires you to take the address of the object, callreinterpret_cast<T*>(...)with it, and then finally indirect the resulting pointer giving you aT&. Not only does this mean that it cannot be used inconstexpr, but at runtime it's much easier to accidentally invoke undefined behavior.reinterpret_castbeing a requirement for use of an API is unacceptable.
Suggested replacementThe easiest replacement for
aligned_*is actually not a library feature. Instead, users should use a properly-aligned array ofstd::byte, potentially with a call tostd::max(std::initializer_list<T>). These can be found in the<cstddef>and<algorithm>headers, respectively (with examples at the end of this section). Unfortunately, this replacement is not ideal. To access the value ofaligned_*, users must callreinterpret_caston the address to read the bytes asTinstances. Using a byte array as a replacement does not avoid this problem. That said, it's important to recognize that continuing to usereinterpret_castwhere it already exists is not nearly as bad as newly introducing it where it was previously not present. ...
The above section from the accepted proposal to retire aligned_* is then followed with a number of examples, like these two replacement suggestions:
1// To replace std::aligned_storage
2template <typename T>
3class MyContainer {
4private:
5 //std::aligned_storage_t<sizeof(T), alignof(T)> t_buff;
6 alignas(T) std::byte t_buff[sizeof(T)];
7};
81// To replace std::aligned_storage
2template <typename T>
3class MyContainer {
4private:
5 //std::aligned_storage_t<sizeof(T), alignof(T)> t_buff;
6 alignas(T) std::byte t_buff[sizeof(T)];
7};
8// To replace std::aligned_union
9template <typename... Ts>
10class MyContainer {
11private:
12 //std::aligned_union_t<0, Ts...> t_buff;
13 alignas(Ts...) std::byte t_buff[std::max({sizeof(Ts)...})];
14};
15QUESTION
`Firebase` package was successfully found. However, this package itself specifies a `main` module field that could not be resolved
Asked 2022-Apr-02 at 17:19I'm trying to read and write to firestore, use firebase's authentication, and firebase's storage within a expo managed react-native application.
Full Error:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5My firebase config file:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5import firebase from "firebase";
6import { initializeApp } from "firebase/app";
7import "firebase/firestore";
8import "firebase/auth";
9import "firebase/storage";
10
11// I'm using the example key here, I have the correct config
12const firebaseConfig = {
13 apiKey: "api-key",
14 authDomain: "project-id.firebaseapp.com",
15 databaseURL: "https://project-id.firebaseio.com",
16 projectId: "project-id",
17 storageBucket: "project-id.appspot.com",
18 messagingSenderId: "sender-id",
19 appId: "app-id",
20 measurementId: "G-measurement-id",
21};
22
23if (firebase.apps.length === 0) {
24 initializeApp(firebaseConfig);
25}
26
27const db = firebase.firestore();
28const auth = firebase.auth();
29const storage = firebase.storage();
30
31export { db, auth, storage };
32I installed the firebase package with:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5import firebase from "firebase";
6import { initializeApp } from "firebase/app";
7import "firebase/firestore";
8import "firebase/auth";
9import "firebase/storage";
10
11// I'm using the example key here, I have the correct config
12const firebaseConfig = {
13 apiKey: "api-key",
14 authDomain: "project-id.firebaseapp.com",
15 databaseURL: "https://project-id.firebaseio.com",
16 projectId: "project-id",
17 storageBucket: "project-id.appspot.com",
18 messagingSenderId: "sender-id",
19 appId: "app-id",
20 measurementId: "G-measurement-id",
21};
22
23if (firebase.apps.length === 0) {
24 initializeApp(firebaseConfig);
25}
26
27const db = firebase.firestore();
28const auth = firebase.auth();
29const storage = firebase.storage();
30
31export { db, auth, storage };
32expo install firebase
33Any help would be greatly appreciated. Thank you!
ANSWER
Answered 2021-Nov-03 at 05:52To reduce the size of the app, firebase SDK (v9.0.0) became modular. You can no longer do the import statement like before on v8.
You have two options.
- Use the backwards compatible way. (it will be later removed):
This:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5import firebase from "firebase";
6import { initializeApp } from "firebase/app";
7import "firebase/firestore";
8import "firebase/auth";
9import "firebase/storage";
10
11// I'm using the example key here, I have the correct config
12const firebaseConfig = {
13 apiKey: "api-key",
14 authDomain: "project-id.firebaseapp.com",
15 databaseURL: "https://project-id.firebaseio.com",
16 projectId: "project-id",
17 storageBucket: "project-id.appspot.com",
18 messagingSenderId: "sender-id",
19 appId: "app-id",
20 measurementId: "G-measurement-id",
21};
22
23if (firebase.apps.length === 0) {
24 initializeApp(firebaseConfig);
25}
26
27const db = firebase.firestore();
28const auth = firebase.auth();
29const storage = firebase.storage();
30
31export { db, auth, storage };
32expo install firebase
33import firebase from 'firebase/app';
34import 'firebase/auth';
35import 'firebase/firestore';
36Should be changed to:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5import firebase from "firebase";
6import { initializeApp } from "firebase/app";
7import "firebase/firestore";
8import "firebase/auth";
9import "firebase/storage";
10
11// I'm using the example key here, I have the correct config
12const firebaseConfig = {
13 apiKey: "api-key",
14 authDomain: "project-id.firebaseapp.com",
15 databaseURL: "https://project-id.firebaseio.com",
16 projectId: "project-id",
17 storageBucket: "project-id.appspot.com",
18 messagingSenderId: "sender-id",
19 appId: "app-id",
20 measurementId: "G-measurement-id",
21};
22
23if (firebase.apps.length === 0) {
24 initializeApp(firebaseConfig);
25}
26
27const db = firebase.firestore();
28const auth = firebase.auth();
29const storage = firebase.storage();
30
31export { db, auth, storage };
32expo install firebase
33import firebase from 'firebase/app';
34import 'firebase/auth';
35import 'firebase/firestore';
36// v9 compat packages are API compatible with v8 code
37import firebase from 'firebase/compat/app';
38import 'firebase/compat/auth';
39import 'firebase/compat/firestore';
40- Refactor your code now.
From this:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5import firebase from "firebase";
6import { initializeApp } from "firebase/app";
7import "firebase/firestore";
8import "firebase/auth";
9import "firebase/storage";
10
11// I'm using the example key here, I have the correct config
12const firebaseConfig = {
13 apiKey: "api-key",
14 authDomain: "project-id.firebaseapp.com",
15 databaseURL: "https://project-id.firebaseio.com",
16 projectId: "project-id",
17 storageBucket: "project-id.appspot.com",
18 messagingSenderId: "sender-id",
19 appId: "app-id",
20 measurementId: "G-measurement-id",
21};
22
23if (firebase.apps.length === 0) {
24 initializeApp(firebaseConfig);
25}
26
27const db = firebase.firestore();
28const auth = firebase.auth();
29const storage = firebase.storage();
30
31export { db, auth, storage };
32expo install firebase
33import firebase from 'firebase/app';
34import 'firebase/auth';
35import 'firebase/firestore';
36// v9 compat packages are API compatible with v8 code
37import firebase from 'firebase/compat/app';
38import 'firebase/compat/auth';
39import 'firebase/compat/firestore';
40import firebase from "firebase/compat/app";
41import "firebase/compat/auth";
42
43const auth = firebase.auth();
44auth.onAuthStateChanged(user => {
45 // Check for user status
46});
47To this:
1While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:
2
3 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
4 * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
5import firebase from "firebase";
6import { initializeApp } from "firebase/app";
7import "firebase/firestore";
8import "firebase/auth";
9import "firebase/storage";
10
11// I'm using the example key here, I have the correct config
12const firebaseConfig = {
13 apiKey: "api-key",
14 authDomain: "project-id.firebaseapp.com",
15 databaseURL: "https://project-id.firebaseio.com",
16 projectId: "project-id",
17 storageBucket: "project-id.appspot.com",
18 messagingSenderId: "sender-id",
19 appId: "app-id",
20 measurementId: "G-measurement-id",
21};
22
23if (firebase.apps.length === 0) {
24 initializeApp(firebaseConfig);
25}
26
27const db = firebase.firestore();
28const auth = firebase.auth();
29const storage = firebase.storage();
30
31export { db, auth, storage };
32expo install firebase
33import firebase from 'firebase/app';
34import 'firebase/auth';
35import 'firebase/firestore';
36// v9 compat packages are API compatible with v8 code
37import firebase from 'firebase/compat/app';
38import 'firebase/compat/auth';
39import 'firebase/compat/firestore';
40import firebase from "firebase/compat/app";
41import "firebase/compat/auth";
42
43const auth = firebase.auth();
44auth.onAuthStateChanged(user => {
45 // Check for user status
46});
47import { getAuth, onAuthStateChanged } from "firebase/auth";
48
49const auth = getAuth(firebaseApp);
50onAuthStateChanged(auth, user => {
51 // Check for user status
52});
53You should definitely check the documentation
QUESTION
After upgrading from Angular 12 to 13, cache is too large for Github
Asked 2022-Mar-28 at 18:10I recently upgraded all of my dependencies in package.json to the latest. I went from Angular 12.2.0 to 13.0.1 and github is now rejecting my push with the following file size error. Is there some setting I need to define in angular.json build profile that will help minimize these cache file sizes?
1remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 54.01 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
2remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack is 56.42 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
3remote: error: Trace: 0b9557fffbe30aac33f6d9858ef97559341c5c1614ace35524fcba85ac99ca76
4remote: error: See http://git.io/iEPt8g for more information.
5remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 122.06 MB; this exceeds GitHub's file size limit of 100.00 MB
6remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/5.pack is 123.92 MB; this exceeds GitHub's file size limit of 100.00 MB
7remote: error: File .angular/cache/angular-webpack/f48e9bc724ec0d5ae9a9d2fed858970d0a503f10/0.pack is 154.05 MB; this exceeds GitHub's file size limit of 100.00 MB
8remote: error: File .angular/cache/angular-webpack/9327900b3187f0b6351b4801d208e7b58f1af17e/0.pack is 165.50 MB; this exceeds GitHub's file size limit of 100.00 MB
9remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.56 MB; this exceeds GitHub's file size limit of 100.00 MB
10remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.55 MB; this exceeds GitHub's file size limit of 100.00 MB
11remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
12Edit:
I created this repo with Angular cli and have been maintaining and updating through many versions of Angular and had no issue until this latest update.
The .gitignore file is in the root of the application and matches the suggested example:
When adding
/.angular/cacheto the gitignore file, I rungit rm -rf --cached . && git add . && git commit -m 'fix(gitignore): add angular cache' && git push --set-upstream origin chore/bump-depsbut still get the file size error.
ANSWER
Answered 2021-Nov-24 at 16:53Make sure your .gitignore is in the parent folder of .angular.
In that .gitignore file, a simple .angular/cache/ should be enough to ignore that subfolder content.
Check it with:
1remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 54.01 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
2remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack is 56.42 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
3remote: error: Trace: 0b9557fffbe30aac33f6d9858ef97559341c5c1614ace35524fcba85ac99ca76
4remote: error: See http://git.io/iEPt8g for more information.
5remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 122.06 MB; this exceeds GitHub's file size limit of 100.00 MB
6remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/5.pack is 123.92 MB; this exceeds GitHub's file size limit of 100.00 MB
7remote: error: File .angular/cache/angular-webpack/f48e9bc724ec0d5ae9a9d2fed858970d0a503f10/0.pack is 154.05 MB; this exceeds GitHub's file size limit of 100.00 MB
8remote: error: File .angular/cache/angular-webpack/9327900b3187f0b6351b4801d208e7b58f1af17e/0.pack is 165.50 MB; this exceeds GitHub's file size limit of 100.00 MB
9remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.56 MB; this exceeds GitHub's file size limit of 100.00 MB
10remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.55 MB; this exceeds GitHub's file size limit of 100.00 MB
11remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
12git check-ignore -v -- .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack
13You can see an example in ganatan/angular-starter/.gitignore (from an Angular 13 Example Starter project), where /.angular/cache/ is used, to anchor the rule to the top folder of the repository.
The OP S. Taylor confirms in the comments:
I'm pretty sure that was my issue.
I abandoned thedevbranch and updated my dependencies without using the compound commands likegit add . && git commit -m 'fix(gitignore): add angular cache'.
Making sure to note what was staged.
QUESTION
android:exported added but still getting error Apps targeting Android 12 and higher are required to specify an explicit value for android:exported
Asked 2022-Mar-24 at 15:30I have added android:exported="true" to my only activity in manifest but still getting below error after updating compile sdk and target sdk version to 31.I also tried rebuilding the project , invalidating cache and restart but that didn't helped
Error- Apps targeting Android 12 and higher are required to specify an explicit value for android:exported when the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details.
1<?xml version="1.0" encoding="utf-8"?>
2<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3 package="com.xyz.abc">
4
5 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
6 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
7
8 <application
9 android:name=".framework.presentation.BaseApplication"
10 android:allowBackup="true"
11 android:icon="@mipmap/ic_launcher"
12 android:label="@string/app_name"
13 android:roundIcon="@mipmap/ic_launcher_round"
14 android:supportsRtl="true"
15 android:theme="@style/AppTheme">
16 <activity android:name="com.xyz.presentation.MainActivity"
17 android:exported="true">
18 <intent-filter>
19 <action android:name="android.intent.action.MAIN" />
20
21 <category android:name="android.intent.category.LAUNCHER" />
22 </intent-filter>
23 </activity>
24 </application>
25
26</manifest>
27Other Manifest Files (Included in merge, but did not contribute any elements) firebase-installations:17.0.0 manifest, versionedparcelable:1.1.1 manifest, runtime:1.0.1 manifest, test:core:1.2.0 manifest, loader:1.0.0 manifest, facebook-share:11.1.0 manifest, leakcanary:leaksentry:2.0-alpha-3 manifest, material-dialogs:input:3.2.1 manifest, material-icons-extended:1.0.0 manifest, play-services-stats:17.0.0 manifest, interpolator:1.0.0 manifest, activity-compose:1.3.1 manifest, material-ripple:1.0.0 manifest, foundation:1.0.0 manifest, asynclayoutinflater:1.0.0 manifest, savedstate-ktx:1.1.0 manifest, navigation-dynamic-features-fragment:2.3.5 manifest, firebase-ui-auth:7.2.0 manifest, animation:1.0.1 manifest, animation-core:1.0.1 manifest, installreferrer:1.0 manifest, firebase-crashlytics:18.0.0 manifest, ui:1.0.1 manifest, lifecycle-viewmodel-savedstate:2.3.1 manifest, play-services-auth-base:17.0.0 manifest, hilt-android:2.35.1 manifest, material-dialogs:core:3.2.1 manifest, AndroidManifest.xml navigation file, savedstate:1.1.0 manifest, cursoradapter:1.0.0 manifest, sqlite-framework:2.0.1 manifest, room-ktx:2.1.0 manifest, leakcanary-android-core:2.0-alpha-3 manifest, AndroidManifest.xml navigation file, media:1.0.0 manifest, coordinatorlayout:1.1.0 manifest, legacy-support-core-utils:1.0.0 manifest, lifecycle-runtime:2.3.1 manifest, coil-kt:coil:1.3.1 manifest, ui-tooling-preview:1.0.0 manifest, facebook-core:11.1.0 manifest, core:1.6.0 manifest, material:1.0.0 manifest, firebase-common:20.0.0 manifest, documentfile:1.0.0 manifest, lifecycle-viewmodel-compose:2.4.0-beta01 manifest, play-services-base:17.1.0 manifest, ui-tooling-data:1.0.0 manifest, coil-base:1.3.1 manifest, firebase-analytics-ktx:19.0.0 manifest, localbroadcastmanager:1.0.0 manifest, swiperefreshlayout:1.1.0-alpha03 manifest, constraintlayout-compose:1.0.0-beta02 manifest, core-ktx:1.6.0 manifest, firebase-database-collection:18.0.0 manifest, coil-compose-base:1.3.1 manifest, activity:1.3.1 manifest, AndroidManifest.xml navigation file, facebook-messenger:11.1.0 manifest, print:1.0.0 manifest, customview:1.1.0 manifest, material-icons-core:1.0.0 manifest, play-services-measurement-sdk:19.0.0 manifest, fragment:1.3.4 manifest, firebase-appcheck-interop:16.0.0-beta01 manifest, facebook-login:11.1.0 manifest, cardview:1.0.0 manifest, runtime-rxjava2:1.0.0 manifest, viewpager2:1.0.0 manifest, play-services-ads-identifier:17.0.0 manifest, play-services-measurement-impl:19.0.0 manifest, lifecycle-livedata-core:2.3.1 manifest, play-services-safetynet:17.0.0 manifest, AndroidManifest.xml navigation file, lifecycle-viewmodel-ktx:2.3.1 manifest, transport-backend-cct:3.0.0 manifest, fragment-ktx:1.2.4 manifest, appcompat:1.3.0 manifest, transport-runtime:3.0.0 manifest, lifecycle-livedata-core-ktx:2.2.0 manifest, firebase-firestore-ktx:23.0.0 manifest, legacy-support-v4:1.0.0 manifest, play-services-basement:17.1.1 manifest, firebase-storage:20.0.0 manifest, play-services-auth-api-phone:17.4.0 manifest, leakcanary-android:2.0-alpha-3 manifest, firebase-auth-interop:20.0.0 manifest, lifecycle-viewmodel:2.3.1 manifest, browser:1.0.0 manifest, firebase-auth:21.0.1 manifest, material:1.2.1 manifest, slidingpanelayout:1.0.0 manifest, vectordrawable:1.1.0 manifest, recyclerview:1.1.0 manifest, play-services-auth:19.0.0 manifest, room-runtime:2.1.0 manifest, dagger-lint-aar:2.35.1 manifest, navigation-dynamic-features-runtime:2.3.5 manifest, play-services-measurement-api:19.0.0 manifest, firebase-encoders-json:18.0.0 manifest, sqlite:2.0.1 manifest, facebook-android-sdk:11.1.0 manifest, firebase-components:17.0.0 manifest, transport-api:3.0.0 manifest, protolite-well-known-types:18.0.0 manifest, markdown-processor:0.1.3 manifest, play-services-measurement-base:19.0.0 manifest, firebase-common-ktx:20.0.0 manifest, activity-ktx:1.3.1 manifest, firebase-crashlytics-ktx:18.0.0 manifest, coil-compose:1.3.1 manifest, multidex:2.0.1 manifest, core-runtime:2.1.0 manifest, fragment-testing:1.2.0 manifest, ui-graphics:1.0.1 manifest, AndroidManifest.xml navigation file, ui-tooling:1.0.0 manifest, grpc-android:1.28.0 manifest, ui-unit:1.0.1 manifest, play-services-measurement:19.0.0 manifest, play:core:1.9.1 manifest, annotation-experimental:1.1.0 manifest, play-services-measurement-sdk-api:19.0.0 manifest, play-services-tasks:17.0.0 manifest, firebase-analytics:19.0.0 manifest, facebook-common:11.1.0 manifest, drawerlayout:1.1.1 manifest, AndroidManifest.xml navigation file, navigation-compose:2.4.0-alpha09 manifest, facebook-gamingservices:11.1.0 manifest, firebase-firestore:23.0.0 manifest, lifecycle-livedata:2.2.0 manifest, legacy-support-core-ui:1.0.0 manifest, test:monitor:1.2.0 manifest, AndroidManifest.xml navigation file, facebook-applinks:11.1.0 manifest, viewpager:1.0.0 manifest, ui-geometry:1.0.1 manifest, lifecycle-runtime-ktx:2.3.1 manifest, constraintlayout:2.0.4 manifest, ui-text:1.0.1 manifest, AndroidManifest.xml navigation file, firebase-installations-interop:17.0.0 manifest, transition:1.3.0 manifest, foundation-layout:1.0.1 manifest, appcompat-resources:1.3.1 manifest, runtime-livedata:1.0.0 manifest, runtime-saveable:1.0.1 manifest, firebase-measurement-connector:19.0.0 manifest, vectordrawable-animated:1.1.0 manifest, main nav_graph.xml navigation file Merging Errors: Error: android:exported needs to be explicitly specified for . Apps targeting Android 12 and higher are required to specify an explicit value for
android:exportedwhen the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details. Dairy.app main manifest (this file) Error: android:exported needs to be explicitly specified for . Apps targeting Android 12 and higher are required to specify an explicit value forandroid:exportedwhen the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details. Dairy.app main manifest (this file) Error: android:exported needs to be explicitly specified for . Apps targeting Android 12 and higher are required to specify an explicit value forandroid:exportedwhen the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details. Dairy.app main manifest (this file)
ANSWER
Answered 2021-Oct-05 at 10:38After the build has failed go to AndroidManifest.xml and in the bottom click merged manifest see which activities which have intent-filter but don't have exported=true attribute. Or you can just get the activities which are giving error.
Add these activities to your App manifest with android:exported="true" and app tools:node="merge" this will add exported attribute to the activities giving error.
Example:
1<?xml version="1.0" encoding="utf-8"?>
2<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3 package="com.xyz.abc">
4
5 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
6 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
7
8 <application
9 android:name=".framework.presentation.BaseApplication"
10 android:allowBackup="true"
11 android:icon="@mipmap/ic_launcher"
12 android:label="@string/app_name"
13 android:roundIcon="@mipmap/ic_launcher_round"
14 android:supportsRtl="true"
15 android:theme="@style/AppTheme">
16 <activity android:name="com.xyz.presentation.MainActivity"
17 android:exported="true">
18 <intent-filter>
19 <action android:name="android.intent.action.MAIN" />
20
21 <category android:name="android.intent.category.LAUNCHER" />
22 </intent-filter>
23 </activity>
24 </application>
25
26</manifest>
27 <activity
28 android:name="<activity which is giving error>"
29 android:exported="true"
30 tools:node="merge" />
31You will have to do this once, you can remove this once the library developers update their libs.
QUESTION
How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular
Asked 2022-Feb-11 at 07:31I'm trying to connect my app with a firebase db, but I receive 4 error messages on app.module.ts:
1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5here is my package.json file:
1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6 "name": "gescable",
7 "version": "0.0.1",
8 "author": "Ionic Framework",
9 "homepage": "https://ionicframework.com/",
10 "scripts": {
11 "ng": "ng",
12 "start": "ng serve",
13 "build": "ng build",
14 "test": "ng test",
15 "lint": "ng lint",
16 "e2e": "ng e2e"
17 },
18 "private": true,
19 "dependencies": {
20 "@angular-devkit/architect": "^0.1202.5",
21 "@angular-devkit/architect-cli": "^0.1202.5",
22 "@angular/common": "~12.1.1",
23 "@angular/core": "~12.1.1",
24 "@angular/fire": "^7.0.4",
25 "@angular/forms": "~12.1.1",
26 "@angular/platform-browser": "~12.1.1",
27 "@angular/platform-browser-dynamic": "~12.1.1",
28 "@angular/router": "~12.1.1",
29 "@ionic/angular": "^5.5.2",
30 "ajv": "^8.6.2",
31 "angularfire2": "^5.4.2",
32 "firebase": "^7.24.0",
33 "rxfire": "^6.0.0",
34 "rxjs": "~6.6.0",
35 "tslib": "^2.2.0",
36 "zone.js": "~0.11.4"
37 },
38 "devDependencies": {
39 "@angular-devkit/build-angular": "~12.1.1",
40 "@angular-eslint/builder": "~12.0.0",
41 "@angular-eslint/eslint-plugin": "~12.0.0",
42 "@angular-eslint/eslint-plugin-template": "~12.0.0",
43 "@angular-eslint/template-parser": "~12.0.0",
44 "@angular/cli": "~12.1.1",
45 "@angular/compiler": "~12.1.1",
46 "@angular/compiler-cli": "~12.1.1",
47 "@angular/language-service": "~12.0.1",
48 "@ionic/angular-toolkit": "^4.0.0",
49 "@types/jasmine": "~3.6.0",
50 "@types/jasminewd2": "~2.0.3",
51 "@types/node": "^12.11.1",
52 "@typescript-eslint/eslint-plugin": "4.16.1",
53 "@typescript-eslint/parser": "4.16.1",
54 "eslint": "^7.6.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsdoc": "30.7.6",
57 "eslint-plugin-prefer-arrow": "1.2.2",
58 "jasmine-core": "~3.8.0",
59 "jasmine-spec-reporter": "~5.0.0",
60 "karma": "~6.3.2",
61 "karma-chrome-launcher": "~3.1.0",
62 "karma-coverage": "~2.0.3",
63 "karma-coverage-istanbul-reporter": "~3.0.2",
64 "karma-jasmine": "~4.0.0",
65 "karma-jasmine-html-reporter": "^1.5.0",
66 "protractor": "~7.0.0",
67 "ts-node": "~8.3.0",
68 "typescript": "~4.2.4",
69 "@angular-devkit/architect": "^0.1200.0",
70 "firebase-tools": "^9.0.0",
71 "fuzzy": "^0.1.3",
72 "inquirer": "^6.2.2",
73 "inquirer-autocomplete-prompt": "^1.0.1",
74 "open": "^7.0.3",
75 "jsonc-parser": "^3.0.0"
76 },
77 "description": "An Ionic project"
78}
79And here is my app.module.ts:
1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6 "name": "gescable",
7 "version": "0.0.1",
8 "author": "Ionic Framework",
9 "homepage": "https://ionicframework.com/",
10 "scripts": {
11 "ng": "ng",
12 "start": "ng serve",
13 "build": "ng build",
14 "test": "ng test",
15 "lint": "ng lint",
16 "e2e": "ng e2e"
17 },
18 "private": true,
19 "dependencies": {
20 "@angular-devkit/architect": "^0.1202.5",
21 "@angular-devkit/architect-cli": "^0.1202.5",
22 "@angular/common": "~12.1.1",
23 "@angular/core": "~12.1.1",
24 "@angular/fire": "^7.0.4",
25 "@angular/forms": "~12.1.1",
26 "@angular/platform-browser": "~12.1.1",
27 "@angular/platform-browser-dynamic": "~12.1.1",
28 "@angular/router": "~12.1.1",
29 "@ionic/angular": "^5.5.2",
30 "ajv": "^8.6.2",
31 "angularfire2": "^5.4.2",
32 "firebase": "^7.24.0",
33 "rxfire": "^6.0.0",
34 "rxjs": "~6.6.0",
35 "tslib": "^2.2.0",
36 "zone.js": "~0.11.4"
37 },
38 "devDependencies": {
39 "@angular-devkit/build-angular": "~12.1.1",
40 "@angular-eslint/builder": "~12.0.0",
41 "@angular-eslint/eslint-plugin": "~12.0.0",
42 "@angular-eslint/eslint-plugin-template": "~12.0.0",
43 "@angular-eslint/template-parser": "~12.0.0",
44 "@angular/cli": "~12.1.1",
45 "@angular/compiler": "~12.1.1",
46 "@angular/compiler-cli": "~12.1.1",
47 "@angular/language-service": "~12.0.1",
48 "@ionic/angular-toolkit": "^4.0.0",
49 "@types/jasmine": "~3.6.0",
50 "@types/jasminewd2": "~2.0.3",
51 "@types/node": "^12.11.1",
52 "@typescript-eslint/eslint-plugin": "4.16.1",
53 "@typescript-eslint/parser": "4.16.1",
54 "eslint": "^7.6.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsdoc": "30.7.6",
57 "eslint-plugin-prefer-arrow": "1.2.2",
58 "jasmine-core": "~3.8.0",
59 "jasmine-spec-reporter": "~5.0.0",
60 "karma": "~6.3.2",
61 "karma-chrome-launcher": "~3.1.0",
62 "karma-coverage": "~2.0.3",
63 "karma-coverage-istanbul-reporter": "~3.0.2",
64 "karma-jasmine": "~4.0.0",
65 "karma-jasmine-html-reporter": "^1.5.0",
66 "protractor": "~7.0.0",
67 "ts-node": "~8.3.0",
68 "typescript": "~4.2.4",
69 "@angular-devkit/architect": "^0.1200.0",
70 "firebase-tools": "^9.0.0",
71 "fuzzy": "^0.1.3",
72 "inquirer": "^6.2.2",
73 "inquirer-autocomplete-prompt": "^1.0.1",
74 "open": "^7.0.3",
75 "jsonc-parser": "^3.0.0"
76 },
77 "description": "An Ionic project"
78}
79import { NgModule } from '@angular/core';
80import { BrowserModule } from '@angular/platform-browser';
81import { RouteReuseStrategy } from '@angular/router';
82import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
83import { AppRoutingModule } from './app-routing.module';
84import { AppComponent } from './app.component';
85import { ClientPageModule } from './client/client.module';
86import { environment } from '../environments/environment';
87import { AngularFireModule } from '@angular/fire';
88import { AngularFireAuthModule } from '@angular/fire/auth';
89import { AngularFireStorageModule } from '@angular/fire/storage';
90import { AngularFireDatabaseModule } from '@angular/fire/database';
91
92@NgModule({
93 declarations: [AppComponent],
94 entryComponents: [],
95 imports: [
96 BrowserModule,
97 IonicModule.forRoot(),
98 AppRoutingModule,
99 ClientPageModule,
100 AngularFireModule.initializeApp(environment.firebaseConfig),
101 AngularFireAuthModule,
102 AngularFireStorageModule,
103 AngularFireDatabaseModule
104 ],
105 providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
106 bootstrap: [AppComponent],
107})
108export class AppModule {}
109Here is my tsonfig.ts file
1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6 "name": "gescable",
7 "version": "0.0.1",
8 "author": "Ionic Framework",
9 "homepage": "https://ionicframework.com/",
10 "scripts": {
11 "ng": "ng",
12 "start": "ng serve",
13 "build": "ng build",
14 "test": "ng test",
15 "lint": "ng lint",
16 "e2e": "ng e2e"
17 },
18 "private": true,
19 "dependencies": {
20 "@angular-devkit/architect": "^0.1202.5",
21 "@angular-devkit/architect-cli": "^0.1202.5",
22 "@angular/common": "~12.1.1",
23 "@angular/core": "~12.1.1",
24 "@angular/fire": "^7.0.4",
25 "@angular/forms": "~12.1.1",
26 "@angular/platform-browser": "~12.1.1",
27 "@angular/platform-browser-dynamic": "~12.1.1",
28 "@angular/router": "~12.1.1",
29 "@ionic/angular": "^5.5.2",
30 "ajv": "^8.6.2",
31 "angularfire2": "^5.4.2",
32 "firebase": "^7.24.0",
33 "rxfire": "^6.0.0",
34 "rxjs": "~6.6.0",
35 "tslib": "^2.2.0",
36 "zone.js": "~0.11.4"
37 },
38 "devDependencies": {
39 "@angular-devkit/build-angular": "~12.1.1",
40 "@angular-eslint/builder": "~12.0.0",
41 "@angular-eslint/eslint-plugin": "~12.0.0",
42 "@angular-eslint/eslint-plugin-template": "~12.0.0",
43 "@angular-eslint/template-parser": "~12.0.0",
44 "@angular/cli": "~12.1.1",
45 "@angular/compiler": "~12.1.1",
46 "@angular/compiler-cli": "~12.1.1",
47 "@angular/language-service": "~12.0.1",
48 "@ionic/angular-toolkit": "^4.0.0",
49 "@types/jasmine": "~3.6.0",
50 "@types/jasminewd2": "~2.0.3",
51 "@types/node": "^12.11.1",
52 "@typescript-eslint/eslint-plugin": "4.16.1",
53 "@typescript-eslint/parser": "4.16.1",
54 "eslint": "^7.6.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsdoc": "30.7.6",
57 "eslint-plugin-prefer-arrow": "1.2.2",
58 "jasmine-core": "~3.8.0",
59 "jasmine-spec-reporter": "~5.0.0",
60 "karma": "~6.3.2",
61 "karma-chrome-launcher": "~3.1.0",
62 "karma-coverage": "~2.0.3",
63 "karma-coverage-istanbul-reporter": "~3.0.2",
64 "karma-jasmine": "~4.0.0",
65 "karma-jasmine-html-reporter": "^1.5.0",
66 "protractor": "~7.0.0",
67 "ts-node": "~8.3.0",
68 "typescript": "~4.2.4",
69 "@angular-devkit/architect": "^0.1200.0",
70 "firebase-tools": "^9.0.0",
71 "fuzzy": "^0.1.3",
72 "inquirer": "^6.2.2",
73 "inquirer-autocomplete-prompt": "^1.0.1",
74 "open": "^7.0.3",
75 "jsonc-parser": "^3.0.0"
76 },
77 "description": "An Ionic project"
78}
79import { NgModule } from '@angular/core';
80import { BrowserModule } from '@angular/platform-browser';
81import { RouteReuseStrategy } from '@angular/router';
82import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
83import { AppRoutingModule } from './app-routing.module';
84import { AppComponent } from './app.component';
85import { ClientPageModule } from './client/client.module';
86import { environment } from '../environments/environment';
87import { AngularFireModule } from '@angular/fire';
88import { AngularFireAuthModule } from '@angular/fire/auth';
89import { AngularFireStorageModule } from '@angular/fire/storage';
90import { AngularFireDatabaseModule } from '@angular/fire/database';
91
92@NgModule({
93 declarations: [AppComponent],
94 entryComponents: [],
95 imports: [
96 BrowserModule,
97 IonicModule.forRoot(),
98 AppRoutingModule,
99 ClientPageModule,
100 AngularFireModule.initializeApp(environment.firebaseConfig),
101 AngularFireAuthModule,
102 AngularFireStorageModule,
103 AngularFireDatabaseModule
104 ],
105 providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
106 bootstrap: [AppComponent],
107})
108export class AppModule {}
109 "compileOnSave": false,
110 "compilerOptions": {
111 "baseUrl": "./",
112 "outDir": "./dist/out-tsc",
113 "sourceMap": true,
114 "declaration": false,
115 "downlevelIteration": true,
116 "experimentalDecorators": true,
117 "moduleResolution": "node",
118 "importHelpers": true,
119 "target": "es2015",
120 "module": "es2020",
121 "lib": ["es2018", "dom"]
122 },
123 "angularCompilerOptions": {
124 "enableI18nLegacyMessageIdFormat": false,
125 "strictInjectionParameters": true,
126 "strictInputAccessModifiers": true,
127 "strictTemplates": true,
128 "skipLibCheck": true
129 }
130}
131ANSWER
Answered 2021-Sep-10 at 12:47You need to add "compat" like this
1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6 "name": "gescable",
7 "version": "0.0.1",
8 "author": "Ionic Framework",
9 "homepage": "https://ionicframework.com/",
10 "scripts": {
11 "ng": "ng",
12 "start": "ng serve",
13 "build": "ng build",
14 "test": "ng test",
15 "lint": "ng lint",
16 "e2e": "ng e2e"
17 },
18 "private": true,
19 "dependencies": {
20 "@angular-devkit/architect": "^0.1202.5",
21 "@angular-devkit/architect-cli": "^0.1202.5",
22 "@angular/common": "~12.1.1",
23 "@angular/core": "~12.1.1",
24 "@angular/fire": "^7.0.4",
25 "@angular/forms": "~12.1.1",
26 "@angular/platform-browser": "~12.1.1",
27 "@angular/platform-browser-dynamic": "~12.1.1",
28 "@angular/router": "~12.1.1",
29 "@ionic/angular": "^5.5.2",
30 "ajv": "^8.6.2",
31 "angularfire2": "^5.4.2",
32 "firebase": "^7.24.0",
33 "rxfire": "^6.0.0",
34 "rxjs": "~6.6.0",
35 "tslib": "^2.2.0",
36 "zone.js": "~0.11.4"
37 },
38 "devDependencies": {
39 "@angular-devkit/build-angular": "~12.1.1",
40 "@angular-eslint/builder": "~12.0.0",
41 "@angular-eslint/eslint-plugin": "~12.0.0",
42 "@angular-eslint/eslint-plugin-template": "~12.0.0",
43 "@angular-eslint/template-parser": "~12.0.0",
44 "@angular/cli": "~12.1.1",
45 "@angular/compiler": "~12.1.1",
46 "@angular/compiler-cli": "~12.1.1",
47 "@angular/language-service": "~12.0.1",
48 "@ionic/angular-toolkit": "^4.0.0",
49 "@types/jasmine": "~3.6.0",
50 "@types/jasminewd2": "~2.0.3",
51 "@types/node": "^12.11.1",
52 "@typescript-eslint/eslint-plugin": "4.16.1",
53 "@typescript-eslint/parser": "4.16.1",
54 "eslint": "^7.6.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsdoc": "30.7.6",
57 "eslint-plugin-prefer-arrow": "1.2.2",
58 "jasmine-core": "~3.8.0",
59 "jasmine-spec-reporter": "~5.0.0",
60 "karma": "~6.3.2",
61 "karma-chrome-launcher": "~3.1.0",
62 "karma-coverage": "~2.0.3",
63 "karma-coverage-istanbul-reporter": "~3.0.2",
64 "karma-jasmine": "~4.0.0",
65 "karma-jasmine-html-reporter": "^1.5.0",
66 "protractor": "~7.0.0",
67 "ts-node": "~8.3.0",
68 "typescript": "~4.2.4",
69 "@angular-devkit/architect": "^0.1200.0",
70 "firebase-tools": "^9.0.0",
71 "fuzzy": "^0.1.3",
72 "inquirer": "^6.2.2",
73 "inquirer-autocomplete-prompt": "^1.0.1",
74 "open": "^7.0.3",
75 "jsonc-parser": "^3.0.0"
76 },
77 "description": "An Ionic project"
78}
79import { NgModule } from '@angular/core';
80import { BrowserModule } from '@angular/platform-browser';
81import { RouteReuseStrategy } from '@angular/router';
82import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
83import { AppRoutingModule } from './app-routing.module';
84import { AppComponent } from './app.component';
85import { ClientPageModule } from './client/client.module';
86import { environment } from '../environments/environment';
87import { AngularFireModule } from '@angular/fire';
88import { AngularFireAuthModule } from '@angular/fire/auth';
89import { AngularFireStorageModule } from '@angular/fire/storage';
90import { AngularFireDatabaseModule } from '@angular/fire/database';
91
92@NgModule({
93 declarations: [AppComponent],
94 entryComponents: [],
95 imports: [
96 BrowserModule,
97 IonicModule.forRoot(),
98 AppRoutingModule,
99 ClientPageModule,
100 AngularFireModule.initializeApp(environment.firebaseConfig),
101 AngularFireAuthModule,
102 AngularFireStorageModule,
103 AngularFireDatabaseModule
104 ],
105 providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
106 bootstrap: [AppComponent],
107})
108export class AppModule {}
109 "compileOnSave": false,
110 "compilerOptions": {
111 "baseUrl": "./",
112 "outDir": "./dist/out-tsc",
113 "sourceMap": true,
114 "declaration": false,
115 "downlevelIteration": true,
116 "experimentalDecorators": true,
117 "moduleResolution": "node",
118 "importHelpers": true,
119 "target": "es2015",
120 "module": "es2020",
121 "lib": ["es2018", "dom"]
122 },
123 "angularCompilerOptions": {
124 "enableI18nLegacyMessageIdFormat": false,
125 "strictInjectionParameters": true,
126 "strictInputAccessModifiers": true,
127 "strictTemplates": true,
128 "skipLibCheck": true
129 }
130}
131import { AngularFireModule } from "@angular/fire/compat";
132import { AngularFireAuthModule } from "@angular/fire/compat/auth";
133import { AngularFireStorageModule } from '@angular/fire/compat/storage';
134import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
135import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
136QUESTION
How to solve FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore problem?
Asked 2022-Jan-11 at 15:08I am trying to set up Firebase with next.js. I am getting this error in the console.
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
This is one of my custom hook
1import { onAuthStateChanged, User } from '@firebase/auth'
2import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
3import { useEffect, useState } from 'react'
4import { auth, fireStore } from './firebase'
5
6export const useUserData = () => {
7 const [username, setUsername] = useState<string | null>(null)
8
9 const [currentUser, setCurrentUser] = useState<User | null>(null)
10
11 useEffect(() => {
12 let unsubscribe: void | Unsubscribe
13
14 onAuthStateChanged(auth, (user) => {
15 if (user) {
16 setCurrentUser(user)
17 // The Problem is inside this try blog
18 try {
19 // the onsnapshot function is causing the problem
20 console.log('firestore: ', fireStore)
21 unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) => {
22 setUsername(doc.data()?.username)
23 })
24 } catch (e) {
25 console.log(e.message)
26 }
27 } else {
28 setCurrentUser(null)
29 setUsername(null)
30 }
31 })
32
33 return unsubscribe
34 }, [currentUser])
35
36 return { currentUser, username }
37}
38I also have this firebase.ts file where I initialized my firebase app
1import { onAuthStateChanged, User } from '@firebase/auth'
2import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
3import { useEffect, useState } from 'react'
4import { auth, fireStore } from './firebase'
5
6export const useUserData = () => {
7 const [username, setUsername] = useState<string | null>(null)
8
9 const [currentUser, setCurrentUser] = useState<User | null>(null)
10
11 useEffect(() => {
12 let unsubscribe: void | Unsubscribe
13
14 onAuthStateChanged(auth, (user) => {
15 if (user) {
16 setCurrentUser(user)
17 // The Problem is inside this try blog
18 try {
19 // the onsnapshot function is causing the problem
20 console.log('firestore: ', fireStore)
21 unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) => {
22 setUsername(doc.data()?.username)
23 })
24 } catch (e) {
25 console.log(e.message)
26 }
27 } else {
28 setCurrentUser(null)
29 setUsername(null)
30 }
31 })
32
33 return unsubscribe
34 }, [currentUser])
35
36 return { currentUser, username }
37}
38import { FirebaseApp, getApps, initializeApp } from 'firebase/app'
39import { getAuth } from 'firebase/auth'
40import { getFirestore } from 'firebase/firestore/lite'
41import { getStorage } from 'firebase/storage'
42
43const firebaseConfig = {
44 apiKey: 'some-api',
45 authDomain: 'some-auth-domain',
46 projectId: 'some-project-id',
47 storageBucket: 'some-storage-bucket',
48 messagingSenderId: 'some-id',
49 appId: 'some-app-id',
50 measurementId: 'some-measurement-id',
51}
52
53let firebaseApp: FirebaseApp
54
55if (!getApps.length) {
56 firebaseApp = initializeApp(firebaseConfig)
57}
58
59const fireStore = getFirestore(firebaseApp)
60const auth = getAuth(firebaseApp)
61const storage = getStorage(firebaseApp)
62
63export { fireStore, auth, storage }
64I don't know whether the problem is in the project initialization. I am pretty sure the error is generated from my custom hook file. I also found out that there must be something wrong with onSnapshot function. Am I passing the docRef wrong or something? What am I doing wrong here?
The console.log(firestore) log:
1import { onAuthStateChanged, User } from '@firebase/auth'
2import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
3import { useEffect, useState } from 'react'
4import { auth, fireStore } from './firebase'
5
6export const useUserData = () => {
7 const [username, setUsername] = useState<string | null>(null)
8
9 const [currentUser, setCurrentUser] = useState<User | null>(null)
10
11 useEffect(() => {
12 let unsubscribe: void | Unsubscribe
13
14 onAuthStateChanged(auth, (user) => {
15 if (user) {
16 setCurrentUser(user)
17 // The Problem is inside this try blog
18 try {
19 // the onsnapshot function is causing the problem
20 console.log('firestore: ', fireStore)
21 unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) => {
22 setUsername(doc.data()?.username)
23 })
24 } catch (e) {
25 console.log(e.message)
26 }
27 } else {
28 setCurrentUser(null)
29 setUsername(null)
30 }
31 })
32
33 return unsubscribe
34 }, [currentUser])
35
36 return { currentUser, username }
37}
38import { FirebaseApp, getApps, initializeApp } from 'firebase/app'
39import { getAuth } from 'firebase/auth'
40import { getFirestore } from 'firebase/firestore/lite'
41import { getStorage } from 'firebase/storage'
42
43const firebaseConfig = {
44 apiKey: 'some-api',
45 authDomain: 'some-auth-domain',
46 projectId: 'some-project-id',
47 storageBucket: 'some-storage-bucket',
48 messagingSenderId: 'some-id',
49 appId: 'some-app-id',
50 measurementId: 'some-measurement-id',
51}
52
53let firebaseApp: FirebaseApp
54
55if (!getApps.length) {
56 firebaseApp = initializeApp(firebaseConfig)
57}
58
59const fireStore = getFirestore(firebaseApp)
60const auth = getAuth(firebaseApp)
61const storage = getStorage(firebaseApp)
62
63export { fireStore, auth, storage }
64
65 type: "firestore-lite"
66 _app: FirebaseAppImpl
67 _automaticDataCollectionEnabled: false
68 _config: {name: "[DEFAULT]", automaticDataCollectionEnabled: false}
69 _container: ComponentContainer {name: "[DEFAULT]", providers: Map(15)}
70 _isDeleted: false
71 _name: "[DEFAULT]"
72 _options:
73 apiKey: 'some-api'
74 authDomain: 'some-auth-domain'
75 projectId: 'some-project-id'
76 storageBucket: 'some-storage-bucket'
77 messagingSenderId: 'some-id'
78 appId: 'some-app-id'
79 measurementId: 'some-measurement-id'
80 [[Prototype]]: Object
81 automaticDataCollectionEnabled: (...)
82 config: (...)
83 container: (...)
84 isDeleted: (...)
85 name: (...)
86 options: (...)
87 [[Prototype]]: Object
88 _credentials: Q {auth: AuthInterop}
89 _databaseId: H {projectId: "next-firebase-fireship", database: "(default)"}
90 _persistenceKey: "(lite)"
91 _settings: ee {host: "firestore.googleapis.com", ssl: true, credentials: undefined, ignoreUndefinedProperties: false, cacheSizeBytes: 41943040, …}
92 _settingsFrozen: false
93 app: (...)
94 _initialized: (...)
95 _terminated: (...)
96
97ANSWER
Answered 2022-Jan-07 at 19:07Using getFirestore from lite library will not work with onSnapshot. You are importing getFirestore from lite version:
1import { onAuthStateChanged, User } from '@firebase/auth'
2import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
3import { useEffect, useState } from 'react'
4import { auth, fireStore } from './firebase'
5
6export const useUserData = () => {
7 const [username, setUsername] = useState<string | null>(null)
8
9 const [currentUser, setCurrentUser] = useState<User | null>(null)
10
11 useEffect(() => {
12 let unsubscribe: void | Unsubscribe
13
14 onAuthStateChanged(auth, (user) => {
15 if (user) {
16 setCurrentUser(user)
17 // The Problem is inside this try blog
18 try {
19 // the onsnapshot function is causing the problem
20 console.log('firestore: ', fireStore)
21 unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) => {
22 setUsername(doc.data()?.username)
23 })
24 } catch (e) {
25 console.log(e.message)
26 }
27 } else {
28 setCurrentUser(null)
29 setUsername(null)
30 }
31 })
32
33 return unsubscribe
34 }, [currentUser])
35
36 return { currentUser, username }
37}
38import { FirebaseApp, getApps, initializeApp } from 'firebase/app'
39import { getAuth } from 'firebase/auth'
40import { getFirestore } from 'firebase/firestore/lite'
41import { getStorage } from 'firebase/storage'
42
43const firebaseConfig = {
44 apiKey: 'some-api',
45 authDomain: 'some-auth-domain',
46 projectId: 'some-project-id',
47 storageBucket: 'some-storage-bucket',
48 messagingSenderId: 'some-id',
49 appId: 'some-app-id',
50 measurementId: 'some-measurement-id',
51}
52
53let firebaseApp: FirebaseApp
54
55if (!getApps.length) {
56 firebaseApp = initializeApp(firebaseConfig)
57}
58
59const fireStore = getFirestore(firebaseApp)
60const auth = getAuth(firebaseApp)
61const storage = getStorage(firebaseApp)
62
63export { fireStore, auth, storage }
64
65 type: "firestore-lite"
66 _app: FirebaseAppImpl
67 _automaticDataCollectionEnabled: false
68 _config: {name: "[DEFAULT]", automaticDataCollectionEnabled: false}
69 _container: ComponentContainer {name: "[DEFAULT]", providers: Map(15)}
70 _isDeleted: false
71 _name: "[DEFAULT]"
72 _options:
73 apiKey: 'some-api'
74 authDomain: 'some-auth-domain'
75 projectId: 'some-project-id'
76 storageBucket: 'some-storage-bucket'
77 messagingSenderId: 'some-id'
78 appId: 'some-app-id'
79 measurementId: 'some-measurement-id'
80 [[Prototype]]: Object
81 automaticDataCollectionEnabled: (...)
82 config: (...)
83 container: (...)
84 isDeleted: (...)
85 name: (...)
86 options: (...)
87 [[Prototype]]: Object
88 _credentials: Q {auth: AuthInterop}
89 _databaseId: H {projectId: "next-firebase-fireship", database: "(default)"}
90 _persistenceKey: "(lite)"
91 _settings: ee {host: "firestore.googleapis.com", ssl: true, credentials: undefined, ignoreUndefinedProperties: false, cacheSizeBytes: 41943040, …}
92 _settingsFrozen: false
93 app: (...)
94 _initialized: (...)
95 _terminated: (...)
96
97import { getFirestore } from 'firebase/firestore/lite'
98Change the import to:
1import { onAuthStateChanged, User } from '@firebase/auth'
2import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
3import { useEffect, useState } from 'react'
4import { auth, fireStore } from './firebase'
5
6export const useUserData = () => {
7 const [username, setUsername] = useState<string | null>(null)
8
9 const [currentUser, setCurrentUser] = useState<User | null>(null)
10
11 useEffect(() => {
12 let unsubscribe: void | Unsubscribe
13
14 onAuthStateChanged(auth, (user) => {
15 if (user) {
16 setCurrentUser(user)
17 // The Problem is inside this try blog
18 try {
19 // the onsnapshot function is causing the problem
20 console.log('firestore: ', fireStore)
21 unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) => {
22 setUsername(doc.data()?.username)
23 })
24 } catch (e) {
25 console.log(e.message)
26 }
27 } else {
28 setCurrentUser(null)
29 setUsername(null)
30 }
31 })
32
33 return unsubscribe
34 }, [currentUser])
35
36 return { currentUser, username }
37}
38import { FirebaseApp, getApps, initializeApp } from 'firebase/app'
39import { getAuth } from 'firebase/auth'
40import { getFirestore } from 'firebase/firestore/lite'
41import { getStorage } from 'firebase/storage'
42
43const firebaseConfig = {
44 apiKey: 'some-api',
45 authDomain: 'some-auth-domain',
46 projectId: 'some-project-id',
47 storageBucket: 'some-storage-bucket',
48 messagingSenderId: 'some-id',
49 appId: 'some-app-id',
50 measurementId: 'some-measurement-id',
51}
52
53let firebaseApp: FirebaseApp
54
55if (!getApps.length) {
56 firebaseApp = initializeApp(firebaseConfig)
57}
58
59const fireStore = getFirestore(firebaseApp)
60const auth = getAuth(firebaseApp)
61const storage = getStorage(firebaseApp)
62
63export { fireStore, auth, storage }
64
65 type: "firestore-lite"
66 _app: FirebaseAppImpl
67 _automaticDataCollectionEnabled: false
68 _config: {name: "[DEFAULT]", automaticDataCollectionEnabled: false}
69 _container: ComponentContainer {name: "[DEFAULT]", providers: Map(15)}
70 _isDeleted: false
71 _name: "[DEFAULT]"
72 _options:
73 apiKey: 'some-api'
74 authDomain: 'some-auth-domain'
75 projectId: 'some-project-id'
76 storageBucket: 'some-storage-bucket'
77 messagingSenderId: 'some-id'
78 appId: 'some-app-id'
79 measurementId: 'some-measurement-id'
80 [[Prototype]]: Object
81 automaticDataCollectionEnabled: (...)
82 config: (...)
83 container: (...)
84 isDeleted: (...)
85 name: (...)
86 options: (...)
87 [[Prototype]]: Object
88 _credentials: Q {auth: AuthInterop}
89 _databaseId: H {projectId: "next-firebase-fireship", database: "(default)"}
90 _persistenceKey: "(lite)"
91 _settings: ee {host: "firestore.googleapis.com", ssl: true, credentials: undefined, ignoreUndefinedProperties: false, cacheSizeBytes: 41943040, …}
92 _settingsFrozen: false
93 app: (...)
94 _initialized: (...)
95 _terminated: (...)
96
97import { getFirestore } from 'firebase/firestore/lite'
98import { getFirestore } from 'firebase/firestore'
99From the documentation,
The
onSnapshotmethod andDocumentChange,SnapshotListenerOptions,SnapshotMetadata,SnapshotOptionsandUnsubscribeobjects are not included inliteversion.
Another reason for this error to show up could be passing invalid first argument to collection() or doc() functions. They both take a Firestore instance as first argument.
1import { onAuthStateChanged, User } from '@firebase/auth'
2import { doc, onSnapshot, Unsubscribe } from 'firebase/firestore'
3import { useEffect, useState } from 'react'
4import { auth, fireStore } from './firebase'
5
6export const useUserData = () => {
7 const [username, setUsername] = useState<string | null>(null)
8
9 const [currentUser, setCurrentUser] = useState<User | null>(null)
10
11 useEffect(() => {
12 let unsubscribe: void | Unsubscribe
13
14 onAuthStateChanged(auth, (user) => {
15 if (user) {
16 setCurrentUser(user)
17 // The Problem is inside this try blog
18 try {
19 // the onsnapshot function is causing the problem
20 console.log('firestore: ', fireStore)
21 unsubscribe = onSnapshot(doc(fireStore, 'users', user.uid), (doc) => {
22 setUsername(doc.data()?.username)
23 })
24 } catch (e) {
25 console.log(e.message)
26 }
27 } else {
28 setCurrentUser(null)
29 setUsername(null)
30 }
31 })
32
33 return unsubscribe
34 }, [currentUser])
35
36 return { currentUser, username }
37}
38import { FirebaseApp, getApps, initializeApp } from 'firebase/app'
39import { getAuth } from 'firebase/auth'
40import { getFirestore } from 'firebase/firestore/lite'
41import { getStorage } from 'firebase/storage'
42
43const firebaseConfig = {
44 apiKey: 'some-api',
45 authDomain: 'some-auth-domain',
46 projectId: 'some-project-id',
47 storageBucket: 'some-storage-bucket',
48 messagingSenderId: 'some-id',
49 appId: 'some-app-id',
50 measurementId: 'some-measurement-id',
51}
52
53let firebaseApp: FirebaseApp
54
55if (!getApps.length) {
56 firebaseApp = initializeApp(firebaseConfig)
57}
58
59const fireStore = getFirestore(firebaseApp)
60const auth = getAuth(firebaseApp)
61const storage = getStorage(firebaseApp)
62
63export { fireStore, auth, storage }
64
65 type: "firestore-lite"
66 _app: FirebaseAppImpl
67 _automaticDataCollectionEnabled: false
68 _config: {name: "[DEFAULT]", automaticDataCollectionEnabled: false}
69 _container: ComponentContainer {name: "[DEFAULT]", providers: Map(15)}
70 _isDeleted: false
71 _name: "[DEFAULT]"
72 _options:
73 apiKey: 'some-api'
74 authDomain: 'some-auth-domain'
75 projectId: 'some-project-id'
76 storageBucket: 'some-storage-bucket'
77 messagingSenderId: 'some-id'
78 appId: 'some-app-id'
79 measurementId: 'some-measurement-id'
80 [[Prototype]]: Object
81 automaticDataCollectionEnabled: (...)
82 config: (...)
83 container: (...)
84 isDeleted: (...)
85 name: (...)
86 options: (...)
87 [[Prototype]]: Object
88 _credentials: Q {auth: AuthInterop}
89 _databaseId: H {projectId: "next-firebase-fireship", database: "(default)"}
90 _persistenceKey: "(lite)"
91 _settings: ee {host: "firestore.googleapis.com", ssl: true, credentials: undefined, ignoreUndefinedProperties: false, cacheSizeBytes: 41943040, …}
92 _settingsFrozen: false
93 app: (...)
94 _initialized: (...)
95 _terminated: (...)
96
97import { getFirestore } from 'firebase/firestore/lite'
98import { getFirestore } from 'firebase/firestore'
99// Ensure that "db" is defined and initialized
100const db = getFirestore();
101// console.log(db);
102
103const colRef = collection(db, "collection_name");
104QUESTION
How is optional assignment constexpr in C++ 20?
Asked 2021-Dec-26 at 03:03To the internal content of an optional, doesn't the optional require placement new in order to reconstruct the internal in place storage or union? Is there some new feature like placement new in C++ 20 that allows for constexpr assignment of std::optional?
1template< class U = T >
2optional& operator=( U&& value );
3(since C++17)
4(until C++20)
5template< class U = T >
6constexpr optional& operator=( U&& value );
7(since C++20)
8ANSWER
Answered 2021-Dec-26 at 03:03To the internal content of an optional, doesn't the optional require placement new in order to reconstruct the internal in place storage or union?
For assignment, yes it does.
But while we still cannot do actual placement new during constexpr time, we did get a workaround for its absence: std::construct_at (from P0784). This is a very limited form of placement new, but it's enough to get optional assignment working.
The other change was that we also needed to be able to actually change the active member of a union - since it wouldn't matter if we could construct the new object if we couldn't actually switch. That also happened in C++20 (P1330).
Put those together, and you get a functional implementation of optional assignment: P2231. An abbreviated implementation would look like this:
1template< class U = T >
2optional& operator=( U&& value );
3(since C++17)
4(until C++20)
5template< class U = T >
6constexpr optional& operator=( U&& value );
7(since C++20)
8template <typename T>
9struct optional {
10 union {
11 T value;
12 char empty;
13 };
14 bool has_value;
15
16 constexpr optional& operator=(T const& rhs) {
17 if (has_value) {
18 value = rhs;
19 } else {
20 // basically ::new (&value) T(rhs);
21 // except blessed for constexpr usage
22 std::construct_at(&value, rhs);
23 }
24 has_value = true;
25 return *this;
26 }
27};
28QUESTION
No analytics cookies is set upon a consent was updated
Asked 2021-Dec-11 at 17:17I am using the Google Tag Manager with a single tag referencing a default Google Analytics script. My solution is based on the information from these resources:
- https://www.iubenda.com/en/help/27137-google-consent-mode
- https://www.simoahava.com/analytics/consent-settings-google-tag-manager/
- https://www.simoahava.com/analytics/consent-mode-google-tags/
The code is simple (commit):
index.html: define gtag() and set denied as a default for all storages
1 <script>
2 window.dataLayer = window.dataLayer || [];
3 function gtag() { window.dataLayer.push(arguments); }
4 gtag('consent', 'default', {
5 ad_storage: 'denied',
6 analytics_storage: 'denied',
7 personalization_storage: 'denied',
8 functionality_storage: 'granted',
9 security_storage: 'granted',
10 wait_for_update: 400,
11 });
12Then load a user configuration from the localStorage and call update:
1 <script>
2 window.dataLayer = window.dataLayer || [];
3 function gtag() { window.dataLayer.push(arguments); }
4 gtag('consent', 'default', {
5 ad_storage: 'denied',
6 analytics_storage: 'denied',
7 personalization_storage: 'denied',
8 functionality_storage: 'granted',
9 security_storage: 'granted',
10 wait_for_update: 400,
11 });
12handleCookies(preferences) {
13 console.log('handleCookies callback');
14 gtag('consent', 'update', {
15 ad_storage: preferences.ad,
16 analytics_storage: preferences.analytics,
17 personalization_storage: preferences.personalization,
18 });
19 console.log(window.dataLayer);
20},
21So far so good because I see the event queue is updated in dataLayer:
As the consent is set I anticipate the the cookies will be set for the Google Analytics now. But they are missing. What stupid mistake have I done?
ANSWER
Answered 2021-Dec-08 at 10:11From your screenshot, gtm.js is executed before the update of the consent mode so the pageview continues to be sent to Google Analytics as denied.
The update must take place before gtm.js
QUESTION
Do not nest files in rails active storage
Asked 2021-Nov-04 at 20:01It appears that by default, Rails Active Storage nests your file uploads by means of the associated active_storage_blob key.
The rules appear to be as follows for the default behavior. Within the <Rails.root>/storage/ directory:
- take the first two characters of the
keyand make a directory- within that directory, take the next two characters of the
keyand make another directory- store the file there, and the file name is the entire
key
- store the file there, and the file name is the entire
- within that directory, take the next two characters of the
For example: where the key of a particular file's associated active_storage_blob is: 2HadGpe3G4r5ygdgdfh5534346, It would look like the following:
I do not want this nesting behavior. I want to store the files flat within the storage directory. So I simply want it to look like this:
.
How can I do that? A google search and a read through of the Active Storage Rails Guides didn't reveal a solution.
Also just out of curiosity: why is this the default behavior?
ANSWER
Answered 2021-Oct-30 at 13:03Digging around in the code of the ActiveStorage DiskService, I found the code which generates the folder structure. All is conveniently contained within a single function:
1def folder_for(key)
2 [ key[0..1], key[2..3] ].join("/")
3end
4This makes it easy to eliminate the two-letter subfolder structure by a simple patch:
1def folder_for(key)
2 [ key[0..1], key[2..3] ].join("/")
3end
4module ActiveStorage
5 class Service::DiskService < Service
6 private
7 def folder_for(key)
8 ""
9 end
10 end
11end
12Best to do a little testing on this patch, but as far as I could tell it should work just fine.
The answer to the second question I was not able to determine by just looking at the DiskService code. There are no clues there to this folder structure, so the reasons may lie elsewhere. It may be done entirely for cosmetic purposes, in order to avoid a giant single folder blob on large servers. Perhaps someone who knows more can comment.
QUESTION
What should happen if one calls `std::exit` in a global object's destructor?
Asked 2021-Oct-28 at 07:46Consider the following code:
1#include <cstdlib>
2struct Foo {
3 ~Foo() {
4 std::exit(0);
5 }
6} foo;
7int main() {
8}
9It compiles and terminates with zero successfully for me both on my Linux (GCC, Clang) and Windows (Visual Studio). However, when compiled with MSYS2's GCC on Windows (g++ (Rev2, Built by MSYS2 project) 10.3.0), it enters an infinite recursion and dies from stack overflow. This can be checked by adding some debug output right before std::exit(); I did not add it initially to avoid thinking about the destruction of std::cout.
Does any C++ standard have anything to say about such behavior? Is it well-defined/implementation-defined/undefined/etc and why?
For instance, [support.start.term]/9.1 of some recent draft says the following about std::exit's behavior:
First, objects with thread storage duration and associated with the current thread are destroyed. Next, objects with static storage duration are destroyed and functions registered by calling atexit are called. See [basic.start.term] for the order of destructions and calls.
which refers to [basic.start.term]/1, I guess:
Constructed objects ([dcl.init]) with static storage duration are destroyed and functions registered with std::atexit are called as part of a call to std::exit ([support.start.term]). The call to std::exit is sequenced before the destructions and the registered functions.
I don't see any immediate restriction on calling std::exit in a destructor.
Sidenote: please refrain from commenting that "this code is bad", "thou shalt not use destructors in global objects" (which you probably should not) and probing for the XY problem in the comments. Consider this an academic question from a curious student who knows a much better solution to their original problem, but have stumbled upon this quirk while exploring the vast meadows of C++.
ANSWER
Answered 2021-Oct-27 at 12:26If
std::exitis called to end a program during the destruction of an object with static or thread storage duration, the program has undefined behavior.
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Storage
Tutorials and Learning Resources are not available at this moment for Storage
Share this Page
Get latest updates on Storage